增强 jQuery Mobile 菜单系统 [英] Enhancing a jQuery Mobile Menu System

问题描述

@Omar 创建了一个很酷的 ios 风格菜单系统here

我需要一些修改.

1) 当新的子菜单滑入时，上一个菜单应该滑出.

2) 新的子菜单应该继承与上一个菜单相同的背景色

解决方案

您需要关闭打开菜单，同时打开另一个菜单.在打开任一菜单的 click 处理程序中，添加以下内容:

$(.ui-sub-panel-open").addClass('ui-sub-panel-close ui-sub-panel-animate').removeClass(ui-sub-panel-open");

这将关闭打开菜单然后滑动下一个菜单；完整代码.

/* 打开子菜单 1 */$('.sub1').on('click', function () {$(.ui-sub-panel-open").addClass('ui-sub-panel-close ui-sub-panel-animate').removeClass(ui-sub-panel-open");$('#submenu1').addClass('ui-sub-panel-open ui-sub-panel-animate').removeClass(ui-sub-panel-close");});/* 打开子菜单 2 */$('.sub2').on('click', function () {$(.ui-sub-panel-open").addClass('ui-sub-panel-close ui-sub-panel-animate').removeClass(ui-sub-panel-open");$('#submenu2').addClass('ui-sub-panel-open ui-sub-panel-animate').removeClass(ui-sub-panel-close");});

关于 background 颜色，将您想要的任何颜色添加到 ui-sub-panel-open 并将另一种颜色(如果需要)添加到 ui-sub-面板关闭.

.ui-sub-panel-open {-moz-transform: translate3d(-17em, 0, 0);-webkit-transform: translate3d(-17em, 0, 0);变换:translate3d(-17em, 0, 0);背景:浅蓝色；}.ui-子面板关闭{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);变换:translate3d(0, 0, 0);背景:浅灰色；}

不要忘记删除下面的 CSS

#submenu1 {背景颜色;}#submenu2 {背景颜色;}

---

更新

要向左滑动关闭的面板，修改.ui-sub-panel-close如下.

.ui-sub-panel-close {-webkit-transform: translate3d(-34em, 0, 0);-moz-transform: translate3d(-34em, 0, 0);变换:translate3d(-34em, 0, 0);背景:浅灰色；}

然后你应该通过监听 transitionend 事件将 submenu 返回到它的原始位置.

$(document).on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "#submenu1, #submenu2", function () {var position = $(this).offset().left;如果(位置<0){$(this).removeClass(ui-sub-panel-close ui-sub-panel-animate");}});

<块引用>

演示

@Omar has created a cool ios style menu system here

I need a few modifications.

1) When the new submenu slides in, the previous menu should slide out.

2) The new submenu should inherit the same background color as the previous menu

解决方案

You need to close open menu while opening the other one. Inside click handler which opens either menu, add the following:

$(".ui-sub-panel-open")
    .addClass('ui-sub-panel-close ui-sub-panel-animate')
    .removeClass("ui-sub-panel-open");

This will close open menu then slide next one; complete code.

/* open submenu1 */
$('.sub1').on('click', function () {
    $(".ui-sub-panel-open")
        .addClass('ui-sub-panel-close ui-sub-panel-animate')
        .removeClass("ui-sub-panel-open");
    $('#submenu1')
        .addClass('ui-sub-panel-open ui-sub-panel-animate')
        .removeClass("ui-sub-panel-close");
});

/* open submenu2 */
$('.sub2').on('click', function () {
    $(".ui-sub-panel-open")
        .addClass('ui-sub-panel-close ui-sub-panel-animate')
        .removeClass("ui-sub-panel-open");
    $('#submenu2')
        .addClass('ui-sub-panel-open ui-sub-panel-animate')
        .removeClass("ui-sub-panel-close");
});

Regarding background color, add any color you want to ui-sub-panel-open and another color (if you want) to ui-sub-panel-close.

.ui-sub-panel-open {
  -moz-transform: translate3d(-17em, 0, 0);
  -webkit-transform: translate3d(-17em, 0, 0);
  transform: translate3d(-17em, 0, 0);
  background: lightblue;
}

.ui-sub-panel-close {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  background: lightgray;
}

And don't forget to remove the below CSS

#submenu1 {
  background: color;
}

#submenu2 {
  background: color;
}

---

Update

To slide closed panel to left, modify .ui-sub-panel-close as follows.

.ui-sub-panel-close {
  -webkit-transform: translate3d(-34em, 0, 0);
  -moz-transform: translate3d(-34em, 0, 0);
  transform: translate3d(-34em, 0, 0);
  background: lightgray;
}

Then you should return submenu to its' original position, by listening to transitionend events.

$(document).on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "#submenu1, #submenu2", function () {
  var position = $(this).offset().left;
  if (position < 0) {
    $(this).removeClass("ui-sub-panel-close ui-sub-panel-animate");
  }
});

Demo

这篇关于增强 jQuery Mobile 菜单系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！