jQuery Mobile 1.1.0 RC 1 Navbarのクリックでエラーが発生しました。

jQuery MobileのアプリがiPhoneでかなり遅いことが判明しましたので、RCにアップグレードしてスピードを向上させてみました。jQuery Mobile 1.1.0 RC 1 Navbarのクリックでエラーが発生しました。

ただし、ナビゲーションバーをクリックすると「ページを読み込む際にエラーが発生します」というエラーが表示されます。

私はこのようにそれを処理しています：私はむしろdata-hrefよりdata-idプロパティを使用してお勧めしたい、とあなたもからui-btn-activeクラスを削除する必要があります

<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>

出典

2012-03-27 Simon Fredsted

：

$('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; 
});

見ます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-27 14:26:53 Ryan

こんにちはRyan。あなたの答えをありがとう、私のアプリケーションは素晴らしい今:) –

jQuery Mobile 1.1.0 RC 1 Navbarのクリックでエラーが発生しました。

答えて

関連する問題