Стойкая/внешняя панель JQuery Mobile

В панелях JQuery Mobile 1.4 могут быть внешние, фиксированные и реагирующие, что заставило меня попытаться создать постоянную боковую панель с помощью панели. Кажется, что все работает отлично, за исключением того, что панель закрывается каждый раз при переходе страницы. Затем панель открывается снова, когда отображается новая страница.Стойкая/внешняя панель JQuery Mobile

jsfiddle: http://jsfiddle.net/egntp/

Я хотел бы на панели, чтобы остаться на этой странице во время перехода страницы аналогично тому, как настойчивые панелей инструментов работы.

Любые идеи? Я просмотрел событие 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>

источник

2013-12-04 user3067877

Я пытаюсь делать подобные вещи, играя с мягким успехом здесь и там .... попробуйте начать с этим и посмотреть, как далеко вы можете взять его ...

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

Причина этого может быть связана с тем, что все jQuery Mobile делает, когда вы открываете или закрываете панель, они изменяют классы css панели div. Одна вещь, которую они делают, - это переключить пару классов css, ui-panel-open и ui-panel-closed.

Вышеупомянутый css гарантирует, что даже если они добавят класс ui-panel-closed к панели div, панель останется открытой.

источник

2013-12-28 00:39:32

Вы можете сделать это в jQuery mobile 1.4 и далее. Просто разместите панель вне вашей страницы (т. Е. Data-role = "page").

Обратите внимание, что внешние панели необходимо инициализировать вручную. Так что просто выполните следующие действия:

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

источник

2014-03-19 02:06:37 kakhkAtion

Это уже то, что делает OP. Так что это не отвечает на вопрос. – Flimzy

Именно так я и добился постоянной внешней панели! Можете ли вы объяснить, почему вы думаете, что он не отвечает на вопрос? – kakhkAtion

Потому что это уже в вопросе. Он уже использует внешнюю панель, и он уже инициализирует ее с помощью JavaScript. Так ясно, что это не отвечает на вопрос. – Flimzy

Стойкая/внешняя панель JQuery Mobile

ответ

Смежные вопросы