JQuery Mobile滑动面板,带有嵌套菜单/多级菜单
我一直在我的jquery移动设备上进行多级菜单或子菜单的工作,一般来说,第三部分jquery插件已经深深搞乱我的CSS与position:fixed
有关position:fixed
页脚和滚动。
我在这里查看插件 ,几乎所有插件都让我感到复杂。 我希望我能用现有的jquery移动框架中的一些魔法重新创建这个例子 ,如图所示
左侧面板和子菜单:
这是一个快速的解决方案,只是为了给你一个想法。 它有很大的改进空间,所以每当我做任何改动时,我都会更新这个答案。
尽可能多地创建子菜单,每个子菜单都有一个唯一的ID ,一个关闭按钮和一个类 。 将子菜单放在主jQM面板中。
-
子菜单HTML结构
-
CSS
-
全高,宽和定位外页。
.ui-sub-panel { width: 100%; position: absolute; top: 0; left: -100%; min-height: 100%; max-height: none; }
-
打开子菜单
.ui-sub-panel-open { -moz-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
-
关闭子菜单
.ui-sub-panel-close{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
-
动画关闭/打开
.ui-sub-panel-animate { -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; transition: transform 500ms ease; }
-
-
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 () { $(this) .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 { ... right: -100%; ... }
演示 (1)
(1)在Safari上测试 – iPhone 5 iOS 7.0.6和iPad 2 iOS 7.1