持久/外部 JQuery 移动面板答案

【问题标题】：Persistent/External JQuery Mobile Panel持久/外部 JQuery 移动面板
【发布时间】：2013-12-21 16:24:10
【问题描述】：

在 JQuery Mobile 1.4 中，面板可以是外部的、固定的和响应式的，这导致我尝试使用面板创建持久侧边栏。一切似乎都很好，除了每次页面转换时面板都会关闭。当显示新页面时，面板会再次打开。

我希望面板在页面转换期间保留在页面上，类似于持久工具栏的工作方式。

有什么想法吗？我查看了面板的 beforeClose() 事件 (http://api.jquerymobile.com/panel/#event-beforeclose) 试图阻止它关闭，但我不知道如何继续。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" />
    <style type="text/css">
        .ui-panel-dismiss{display:none;}
        #p1, #p2{margin-left:17em;}
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){$("#sidebar").panel();});
        $(document).on("pageshow", ":jqmData(role=page)", function() {
            $("#sidebar").panel("open");
        });
    </script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
</head>
<body>
    <div data-role="panel" data-animate="false" data-position-fixed="true" data-swipe-close="false" id="sidebar">
        <h1>sidebar</h1>
        <a href="#p1">Page 1</a><br />
        <a href="#p2">Page 2</a>
    </div>
    <div id="p1" data-role="page">
        My page 1
    </div>
    <div id="p2" data-role="page">
        My page 2
    </div>
</body>
</html>

【问题讨论】：

标签： javascript jquery jquery-mobile panel

【解决方案1】：

我正在尝试做类似的事情，在这里和那里都取得了轻微的成功......尝试从这个开始，看看你能走多远......

.ui-panel-closed {
    width: 17em !important;
    visibility: visible !important;
}

这可能起作用的原因是，当您打开或关闭面板时，jQuery Mobile 所做的所有事情都是修改面板 div 的 css 类。他们做的一件事是切换几个 css 类，ui-panel-open 和 ui-panel-closed。

上面的 css 确保即使他们将 ui-panel-closed 类添加到面板 div 中，面板仍保持打开状态。

【讨论】：

【解决方案2】：

您可以在 jQuery mobile 1.4 及更高版本中执行此操作。只需将面板放在页面之外（即 data-role="page"）。

请注意，外部面板需要手动初始化。因此，只需执行以下操作：

$(document).on( "pageshow", "[data-role='page']", function() {
    $( "your_panel_selector" ).panel({ animate: true });
});

【讨论】：

这已经是 OP 正在做的事情了。所以这并不能回答问题。
这正是我实现持久外部面板的方式！你能解释一下为什么你认为它没有回答这个问题吗？？
因为它已经在问题中了。他已经在使用外部面板，并且已经使用 JavaScript 对其进行了初始化。很明显，这并不能回答问题。