Question

由于我的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>

Answer 1

我建议使用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。

jQuery Mobile 1.1.0 RC 1在NavBar上点击“加载页面时出错”

1 个答案: