使用jQuery Mobile同时打开两个面板

Opening two panels at the same time with jQuery Mobile

本文关键字：两个 Mobile jQuery 使用      更新时间：2023-09-26

我有以下示例代码:

JS演示

<div data-role="page">
  <div data-role="header">
    <h1>Header</h1>
    <a href="#left">left</a>
    <a href="#right" style="margin-right:60px;">right</a>
  </div><!-- /header -->
  <div data-role="panel" id="left" data-theme="a" data-display="overlay" data-position="left" data-dismissible="false"><a href="#right">open right</a><br/><a href="#" data-rel="close">close</a></div>
  <div data-role="panel" id="right" data-theme="a" data-display="overlay" data-position="right" data-dismissible="false"><a href="#left">open left</a><br/><a href="#" data-rel="close">close</a></div>
  <div data-role="content"> 
    <a href="#left" data-rel="panel">open left</a>
    <a href="#right" data-rel="panel">open right</a>
  </div><!-- /content -->
  <div data-role="footer">
    <h4>Footer</h4>
  </div><!-- /footer -->
</div><!-- /page -->

我想做的是同时打开两个面板。问题是，如果您正在启动另一个面板，jQuery Mobile会自动关闭一个面板。是否有一种方法可以通过添加data属性来做到这一点?理想情况下，我不想为了实现这一点而开始破解源代码。

编辑:

当我尝试使用@keypaul的答案时(根据文档)。

var defer = $("#left").panel().panel("open");
defer = $.Deferred();
defer.then(function(options) {
    $("#right").panel().panel("open", options);
});

我得到一个错误:

Uncaught TypeError: Cannot read property 'options' of undefined

关于jquery手机文档这里有这个例子

$( "#idofpanel" ) .panel( "open" ,
     optionsHash ) .then( function(
         options ){
             $( "#idofpanel2" ).panel( "open" , options )
});

这里链接http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/index.html在开始面板段落的末尾

对比JQuery Mobile 1.3.2和1.3.0-beta。看来文档的这一部分已经被删除了。

他们取消了同时打开多个面板的支持。

这就是我解决它的方法。

//Overrides JQM's default behaviour of having a single modal panel, and instead bases modality on position.
self.overrideModalPanels = function () {
    //remove all panelbeforeopen subscriptions (jquery 1.3.2 source looks like it only uses this to handle panel modality.
    //may change to document on jquery 1.4, check against https://github.com/jquery/jquery-mobile/blob/1.4-stable/js/widgets/panel.js#L260 but on master for versions past 1.4
    //ctrl+f panelbeforeopen
    //$(document).unbind("panelbeforeopen"); //jquery 1.4
    var page = $('#idofpanel').closest(":jqmData(role='page')");
    page.unbind("panelbeforeopen");
    var panels = $(":jqmData(role='panel')");
    panels.each(function (index, element) {
        // Close the panel if another panel on the page opens
        page.on("panelbeforeopen", function (e) {
            var position = $(element).jqmData("position");
            position = position ? position : "left";
            var position2 = $(e.target).jqmData("position");
            position2 = position2 ? position2 : "left";
            var positionsMatch = position === position2;
            //if positions are the same, and there is a panel already open, that isn't the one opening now.
            if (positionsMatch && $(element).hasClass("ui-panel-open") && (e.target !== element)) { //roughly equivalent to if ( self._open && e.target !== self.element[ 0 ] ) {
                $(element).panel("close");
            }
        });
    });
相关文章：