jQuery Mobile Внешняя панель отстает от закрытия

0

Я использую jQuery Mobile 1.4.2. Согласно спецификации, я использую внешнюю панель слайдов согласно http://demos.jquerymobile.com/1.4.2/panel-external/

То, что происходит, когда меню закрывает часть, отстает, так что оно не закрывается плавно.

Трудно объяснить, поэтому у меня есть пример:

http://jsfiddle.net/sidouglas/GHh3S/1/

Откройте левую панель меню, а затем щелкните текст lorem ipsum чтобы закрыть панель.

Простая реализация открытого поведения в соответствии с документацией:

( function($) {

$(document).on("pageinit", function() {
            $("body>[data-role='panel']").panel().enhanceWithin(); 
});

} ) ( jQuery );

Упрощенный DOM:

    <header data-role="header" id="header" data-id="header" class="header ui-page-theme- ui-header ui-bar-a" role="banner">
        <div data-role="navbar" class="ui-navbar" role="navigation">
            <ul class="ui-grid-b">
                <li class="ui-block-a">
                    <a href="#main_menu" data-transition="reveal" class="f-menu menu_control ui-link ui-btn"><span>Open left panel</span></a>
                </li>
                <li class="ui-block-b"><a href="#">logo</a></li>
                <li class="ui-block-c"><a href="#">something else</a></li>
            </ul>
        </div>
    </header>
    <section data-role="page" id="product_details" data-title="category page" data-url="product_details" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="position: relative; min-height: 1045px;">
        <div class="ui-panel-wrapper ui-panel-animate ui-panel-page-content-position-left ui-panel-page-content-display-reveal ui-panel-page-content-open">
            <div role="main" class="ui-content single_product">
                Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
            </div>
        </div>
    </section><!--/mneu=-->
    <div data-display="reveal" data-position="left" data-role="panel" data-theme="a" id="main_menu" data-id="main_menu" class="main_menu ui-panel ui-panel-position-left ui-panel-display-reveal ui-body-a ui-panel-animate ui-panel-open">
        <ul data-role="listview" class="ui-listview">
           <li>blah</li>
           <li>blah</li>
           <li>blah</li>
        </ul><!-- submenu -->
        <!--/.catnav-->
    </div>

Хм, кто-нибудь может заметить мою проблему?

Благодарю.

  • 1
    Вы можете опубликовать свою разметку перед улучшением? Разметка выше неверна и вызывает проблему. jsfiddle.net/Palestinian/GHh3S/2
Теги:
jquery-mobile

1 ответ

0

<header data-role="header" id="header" data-id="header" class="header" data-theme="a" data-position="fixed">

Я сравнил вашу рабочую версию Omar и объявление заголовка было неверным. Благодарю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню