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');
    });    
});
Другие вопросы по тегам