jQuerymobile: закрывать всплывающее окно при открытии панели
У меня есть меню навигации, которое является списком внутри разборного внутри всплывающего окна. На моей странице содержимого, у меня также есть обычные ссылки, открывающие ту же страницу, что и в меню. Я хочу, чтобы некоторые из этих ссылок открывались в панелях. Это прекрасно работает для содержимого страницы, панели открываются нормально.
Но когда вы используете ссылку в меню навигации, панель открывается под меню. Есть ли способ заставить панель открываться над навигацией или закрыть навигацию при открытии панели?
Вот что у меня есть:
<!--NAVIGATION -->
<a href="#navigation" data-rel="popup"">Menu</a>
<div data-role="popup" id="navigation">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h2>Category 1</h2>
<ul data-role="listview">
<li><a href="#panel1">Open Panel 1</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible">
<h2>Category 2</h2>
<ul data-role="listview">
<li><a href="#panel2">Open Panel 2</a></li>
</ul>
</div><!-- /collapsible -->
</div><!-- /collapsible set -->
</div><!-- /popup -->
<!-- /NAVIGATION -->
<!-- CONTENT -->
<ul data-role="listview">
<li><a href="#panel1">Open Panel 1</a></li>
</ul>
<!-- /CONTENT -->
<!-- PANEL -->
<div data-role="panel" id="panel1" data-position="right" data-display="overlay" data-position-fixed="true">
<p>content</p>
</div><!-- /panel1-->
<!-- /PANEL -->
1 ответ
Это может быть сделано программно с помощью JavaScript. Удалить href из элемента навигации li. Привязать к нему событие щелчка, которое вызовет состояние открытия и закрытия панели.
Рабочий пример: http://jsfiddle.net/Gajotres/2Hv5f/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<!-- CONTENT -->
<ul data-role="listview">
<!--NAVIGATION -->
<a href="#navigation" data-rel="popup">Menu</a>
<div data-role="popup" id="navigation">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h2>Category 1</h2>
<ul data-role="listview">
<li><a href="#" id="popup-panel1">Open Panel 1</a></li>
</ul>
</div><!-- /collapsible -->
</div><!-- /collapsible set -->
</div><!-- /popup -->
<!-- /NAVIGATION -->
<li><a href="#panel1">Open Panel 1</a></li>
</ul>
<!-- /CONTENT -->
<!-- PANEL -->
<div data-role="panel" id="panel1" data-position="left" data-display="overlay" data-position-fixed="true">
<p>content</p>
</div><!-- /panel1-->
<!-- /PANEL -->
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#popup-panel1', function(){
$('#panel1').panel('open');
$('#navigation').popup('close');
});
});