带有嵌套菜单/多级菜单的 JQuery Mobile 滑动面板 [英] JQuery Mobile Sliding Panel with nested menu/ multi-level menu
问题描述
我一直在我的 jquery 移动设备上处理多级菜单或子菜单，通常第三部分 jquery 插件已经深深地干扰了我与 position:fixed 页脚和滚动相关的 CSS.
我查看了插件在这里，几乎所有的都是对我来说使事情复杂化.我希望我可以重新创建 这个示例 使用现有 jquery 移动框架中的一些魔法作为 见这里
左侧面板和子菜单:
这是一个快速的解决方案，只是为了给您一个想法.它有很大的改进空间，所以每当我做任何更改时，我都会更新这个答案.
根据需要创建子菜单，每个子菜单都有一个唯一 ID 和一个带有 class 的关闭按钮.将子菜单放置在主 jQM 面板中.
子菜单 HTML 结构
CSS
全高、全宽并位于页面外.
.ui-sub-panel {宽度:100%；位置:绝对；顶部:0；左:-100%；最小高度:100%；最大高度:无；}打开子菜单
.ui-sub-panel-open {-moz-transform: translate3d(100%, 0, 0);-webkit-transform: translate3d(100%, 0, 0);变换:translate3d(100%, 0, 0);}关闭子菜单
.ui-sub-panel-close{-moz-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);变换:translate3d(0, 0, 0);}关闭/打开动画
.ui-sub-panel-animate {-webkit-transition: -webkit-transform 500ms 轻松；-moz-transition: -moz-transform 500ms 缓和；转换:转换 500 毫秒轻松；}
JS
关闭主 jQM 面板后关闭所有子菜单
$("#externalpanel").on("panelbeforeclose", function () {$('#submenu1, #submenu2').addClass('ui-sub-panel-close ui-sub-panel-animate').removeClass("ui-sub-panel-open");});打开第一个子菜单
$('.sub1').on('click', function () {$('#submenu1').addClass('ui-sub-panel-open ui-sub-panel-animate').removeClass("ui-sub-panel-close");});打开第二个子菜单
$('.sub2').on('click', function () {$('#submenu2').addClass('ui-sub-panel-open ui-sub-panel-animate').removeClass("ui-sub-panel-close");});点击关闭按钮的关闭子菜单
$('.panel-close').on('click', function () {$(这个).closest(".ui-sub-panel").addClass('ui-sub-panel-close ui-sub-panel-animate').removeClass("ui-sub-panel-open");});
<块引用>
演示 (1)
<小时><块引用>
更新 1
右侧面板和子菜单:
要将面板定位到右侧，请将 data-position="right" 属性添加到面板 div.另外，在 .ui-sub-panel 类中，将 left 更改为 right.
.ui-sub-panel {...右:-100%；...}<块引用>
演示 (1)
<小时>
(1) 在 Safari 上测试 - iPhone 5 iOS 7.0.6 &iPad 2 iOS 7.1
I have been working on multi-level menu's or sub-menu's on my jquery mobile and generally 3rd partly jquery plugins have been deeply messing with my CSS relating to position:fixed footer and scrolling.
I looked at the plugin's here and almost all of them are complicating things for me. I was hoping I could recreate this example with some magic from the existing jquery mobile framework as seen here
Left-hand Panel and submenus:
Here is a fast solution just to give you an idea. It has big room for improvement, so I will update this answer whenever I do any changes.
Create Submenus as much as you want, each one with a unique id and a close button with a class. Place Submenus inside main jQM panel.
Submenu HTML structure
<div class='ui-sub-panel' id='submenu1'> <div class='ui-header' data-theme='a'> <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'>Close</a> <h1 class='ui-title'>Submenu1</h1> </div> <div class="ui-content"> <!-- submenu contents here --> </div> </div>CSS
Full height, width and positioned outside page.
.ui-sub-panel { width: 100%; position: absolute; top: 0; left: -100%; min-height: 100%; max-height: none; }Open Submenu
.ui-sub-panel-open { -moz-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }Close Submenu
.ui-sub-panel-close{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }Animate close/open
.ui-sub-panel-animate { -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; transition: transform 500ms ease; }
JS
Close all submenus once main jQM panel is closed
$("#externalpanel").on("panelbeforeclose", function () { $('#submenu1, #submenu2') .addClass('ui-sub-panel-close ui-sub-panel-animate') .removeClass("ui-sub-panel-open"); });Open first submenu
$('.sub1').on('click', function () { $('#submenu1') .addClass('ui-sub-panel-open ui-sub-panel-animate') .removeClass("ui-sub-panel-close"); });Open second submenu
$('.sub2').on('click', function () { $('#submenu2') .addClass('ui-sub-panel-open ui-sub-panel-animate') .removeClass("ui-sub-panel-close"); });Close Submenu where close button is clicked
$('.panel-close').on('click', function () { $(this) .closest(".ui-sub-panel") .addClass('ui-sub-panel-close ui-sub-panel-animate') .removeClass("ui-sub-panel-open"); });
Demo (1)
Update 1
Right-hand Panel and submenus:
To position panel to right side, add data-position="right" attribute to panel div. Also, in .ui-sub-panel class, change left to right.
.ui-sub-panel {
...
right: -100%;
...
}
Demo (1)
(1) Tested on Safari - iPhone 5 iOS 7.0.6 & iPad 2 iOS 7.1
这篇关于带有嵌套菜单/多级菜单的 JQuery Mobile 滑动面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
