Question

在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>

Answer 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，面板仍保持打开状态。

Answer 2

您可以在jQuery mobile 1.4之后执行此操作。只需将面板放在页面外（即data-role =“page”）。

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

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

持久/外部JQuery Mobile Panel

2 个答案: