2012-03-27 4 views
0

jQuery Mobile 앱이 iPhone에서 느린 것으로 밝혀지기 때문에 속도를 높이려는 RC로 업그레이드했습니다.jQuery Mobile 1.1.0 RC 1 Navbar에서 "페이지로드 오류"가 발생했습니다.

그러나 내 탐색 모음을 클릭하면 노란색 "페이지로드 오류"가 표시됩니다.

나는 이런 식으로 처리 해요 :

$('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> 

답변

1

나는 data-href보다는 data-id 속성을 사용하는 것이 좋습니다 것입니다, 당신은 또한에서 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를 참조하십시오.

+0

안녕하세요. 답변을 주셔서 대단히 감사합니다, 내 응용 프로그램은 잘 작동합니다 :) –

관련 문제