Question

我有以下示例代码：

<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属性来做到这一点？理想情况下，我不想开始破解源代码以实现此目的。

修改

当我尝试to use @ 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

Answer 1

在jquery mobile doc上有这个例子

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

此处打开面板段落

末尾的链接http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/index.html

Answer 2

查看JQuery Mobile 1.3.2而不是1.3.0-beta.1，看来这部分文档已被删除。

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

这就是我解决它的方法。

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

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

2 个答案: