2013-08-08 8 views
1

У меня есть этот код для моих закладках ...как перемещаться по вкладкам программным

<!-- Start first page --> 
     <div data-role="page" id="homePage" data-dom-cache="true" data-rel="dialog">  
      <div data-role="header" data-position="fixed" data-id="header"> 
     </div> 

     <div data-role="navbar"> 
      <ul> 
      <li><a href="#homePage" class="ui-btn-active ui-state-persist" >Enter data</a></li> 
      <li><a href="#syncData" >Sync data</a></li> 
       <li><a href="#manageData">Manage data</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div> <!-- /header --> 

    </div><!-- /page --> 

    <!-- Start second page --> 
    <div data-role="page" id="syncData" data-rel="dialog" data-dom-cache="true"> 
     <div data-role="header" data-id="header1" data-position="fixed"> 
    </div> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="#homePage">Enter data</a></li> 
      <li><a href="#syncData" class="ui-btn-active ui-state-persist" >Sync data</a></li> 
      <li><a href="#manageData">Manage data</a></li> 
     </ul> 
    </div><!-- /navbar --> 
    </div><!-- /header --> 
</div><!-- /page --> 

    <!-- Start third page --> 
     <div data-role="page" id="manageData" data-rel="dialog" data-dom-cache="true"> 
      <div data-role="header" data-id="header2" data-position="fixed"> 
     </div> 
     <div data-role="navbar"> 
      <ul> 
      <li><a href="#homePage">Enter data</a></li> 
      <li><a href="#syncData" >Sync data</a></li> 
      <li><a href="#manageData" class="ui-btn-active ui-state-persist" >Manage data</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div> <!-- /header --> 
    <div data-role="popup" id="dialog-confirm" style="display: none" data-overlay-theme="b" data-theme="b"> 
     <div data-role="content" data-theme="b" class="ui-corner-bottom ui-content"> 
    <h3 class="ui-title">Low storage space!!</h3> 
    <p>You must perform one of the actions below before you proceed!.</p> 
     <a href="#" data-role="button" data-inline="true" id="syncDataId" data-theme="c">Sync data</a>  
     <a href="#" data-role="button" data-inline="true" id="backupDataId" data-theme="c">Backup data</a> 
      <a href="#" data-role="button" data-inline="true" id="increaseStorageSpaceId" data-theme="c">Increase storage space</a> 
      <a href="#" data-role="button" data-inline="true" id="cancelId" data-theme="c">Cancel</a> 
    </div> 
     </div> 
    </div><!-- /page --> 

Я хочу изменить для синхронизации данных вэнь я нажмите на кнопку синхронизации данных на появившемся диалоговом окне, которое находится на управление данными вкладка. это должно произойти на события нажатия кнопки например

$('#syncDataId').click(function() {  
    //change to the sync data tab page 
} 

новичок в jquery.any помощь Willl быть

было оценено
+1

Используйте $ .mobile.changePage (hashedPage), где hashedPage является '#' + 'идентификатором div, который имеет страницу данных-роли. – closure

+0

$ .mobile.changePage (hashedPage) сработал как чудо для меня. Многие много. Теперь я могу двигаться move.enjoy вашей карьере чувак – JoseLuke

+0

Отправленный в ответ. Вы никогда не говорили, что используете JQuery Mobile, поэтому я не публиковал его как ответ. – closure

ответ

0

Использовать $.mobile.changePage(hashedPage) где hashedPage - это '#' + 'идентификатор div, на котором есть страница с ролью данных.

+0

@closure ... спасибо за ответ ... это точный ответ на мою проблему. – JoseLuke

2
jQuery('.next-product').click(function() { 
     var selected = $tabs.tabs('option', 'selected'); 
     $tabs.tabs('select', selected + 1 === amount ? 0 : selected + 1); 
    }); 

    jQuery('.previous-product').click(function() { 
     debugger; 
     var selected = $tabs.tabs('option', 'selected'); 
     $tabs.tabs('select', selected === 0 ? amount - 1 : selected - 1); 
    }); 

live demo, это может быть то, что вы ищете

+0

спасибо за ответ ... я не использую jquery ui нигде, поэтому пример, основанный на jqm, будет работать для моего дела. – JoseLuke

Смежные вопросы