0

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

1 回答 1

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。

于 2012-03-27T14:26:53.710 回答