持久/外部的JQuery Mobile面板

Question

持久/外部的JQuery Mobile面板

3

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

jsfiddle: http://jsfiddle.net/egntp/ 我希望面板在页面转换期间保持在页面上，类似于持久工具栏的方式。

有什么想法吗？我研究了面板的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>

- user3067877

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cameron Askew · 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 中，面板仍然保持打开状态。

- kakhkAtion · Answer 2

你可以在jQuery mobile 1.4及以上版本中实现这一点。只需将面板放置在页面外部（即data-role="page"），就可以了。

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

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