带嵌套菜单/多级菜单的JQuery Mobile滑动面板 [英] JQuery Mobile Sliding Panel with nested menu/ multi-level menu

问题描述

我一直在我的jquery手机上进行多级菜单或子菜单，一般来说，第3部分jquery插件已经深深搞乱了我的与位置相关的CSS：固定页脚和滚动。

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.

我看了插件在这里，几乎所有这些都让我感到困惑。我希望我能用现有的jquery移动框架中的一些魔法重新创建这个例子 在这里看到

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.

尽可能多地创建子菜单，每个子菜单都有一个唯一id 和带有类的关闭按钮。将子菜单放在主jQM面板中。

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.

1. 子菜单HTML结构

<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

• 主jQM面板关闭后关闭所有子菜单

• 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");
});

关闭单击关闭按钮的子菜单

$('.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 类中，将左更改为右。

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%;
   ...
}

演示 ^（1）

^{（1）在Safari上测试 - iPhone 5 iOS 7.0.6& iPad 2 iOS 7.1}

这篇关于带嵌套菜单/多级菜单的JQuery Mobile滑动面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！