jQuery Mobile 1.1.0 RC 1 Ошибка при загрузке страницы при нажатии NavBar

Поскольку мое приложение jQuery Mobile оказалось довольно медленным на iPhone, я обновил его до версии RC в надежде повысить скорость.

Однако я получаю желтую «Ошибка загрузки страницы», когда нажимаю на панель навигации.

Я обрабатываю это следующим образом:

$('div[data-role="navbar"] a').live('tap', function () {
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $('div#' + $(this).attr('data-href')).show();
    $("#departureslist").listview("refresh");
    $("#arrivalslist").listview("refresh");
    return false;
});

Вид:

<body>
    <div data-role="page" id="frontpage">
        <div data-role="header">
            <a data-icon="refresh" class="ui-btn-right" data-role="button" data-inline="true" data-iconpos="notext" id="refreshbutton"></a>
                <div id="headerlogo"><img src="images/ajax-loader.gif" id="loader" /></div>
                <div data-role="navbar">
                    <ul>
                        <li><a data-href="front" id="menu-front">Oversigt</a></li>
                        <li><a data-href="kort" id="menu-kort">Kort</a></li>
                        <li><a data-href="a" id="menu-a">Afgange</a></li>
                        <li><a data-href="b" id="menu-b">Ankomster</a></li>
                    </ul>
                </div>
            </div>
        <div data-role="content">
            <div id="front" class="content_div">        
            </div>

            <div id="a" class="content_div">
            <ul data-role="listview" id="departureslist" data-theme="c"></ul>               </div>

            <div id="b" class="content_div">
            <ul data-role="listview" id="arrivalslist"></ul> 
            </div>

            <div id="kort" class="content_div">
            <img src="images/retinamap.png" style="width: 100%;" /> </div>              
        </div>
    </div>

</body>

navbar jquery-mobile
person Simon Fredsted    schedule 27.03.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я бы предложил использовать свойство data-id, а не data-href, и вы также должны удалить класс ui-btn-active из тегов привязки в обработчике tap, иначе все кнопки в конечном итоге будут выглядеть так, как будто они активны:

$('div[data-role="navbar"] a').live('tap', function () {
    $('div[data-role="navbar"] a').removeClass('ui-btn-active');
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $('#' + $(this).attr('data-id')).show();
    $("#departureslist").listview("refresh");
    $("#arrivalslist").listview("refresh");
    return false;
});​​​​

Обновите navbar до:

<div data-role="navbar">
  <ul>
   <li><a data-id="front" id="menu-front">Oversigt</a></li>
   <li><a data-id="kort" id="menu-kort">Kort</a></li>
   <li><a data-id="a" id="menu-a">Afgange</a></li>
   <li><a data-id="b" id="menu-b">Ankomster</a></li>
  </ul>
</div>

См. этот jsFiddle.

person Ryan    schedule 27.03.2012
comment
Привет Райан. Большое спасибо за ваш ответ, теперь мое приложение отлично работает :) - person Simon Fredsted; 28.03.2012