如何模仿jQuery UI標籤

我需要使用我的jquery移動應用程序中的選項卡。我看着jquerymobile中的navbars，但它打開了一個完全不同的頁面。而jQuery UI在同一頁面打開標籤。有什麼辦法可以模仿這種行爲嗎？感謝如何模仿jQuery UI標籤

請注意，我問到，在缺乏更好的詞，變換jquerymobile的導航欄的行爲是UI選項卡

2012-02-10 Autolycus

根據這個jQuery手機應該使用jQuery。你剛剛嘗試使用jQuery UI？ http://www.raymondcamden.com/index.cfm/2011/4/29/How-do-jQuery-jQuery-UI-and-jQuery-Mobile-fit-together – mrtsherman 2012-02-10 03:08:28

這裏是如何使用模擬選項卡行爲的示例navbar.It是一個基本的東西，只需要更多的工作，使其完美。但我認爲它可以作爲一個起點。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script> 
     var prevSelection = "tab1"; 
     $("#navbar ul li").live("click",function(){ 
      var newSelection = $(this).children("a").attr("data-tab-class"); 
      $("."+prevSelection).addClass("ui-screen-hidden"); 
      $("."+newSelection).removeClass("ui-screen-hidden"); 
      prevSelection = newSelection; 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <style> 
     .tab-content{ 
      width:100%; 
      height:250px; 
      background-color:white; 
      border-bottom-left-radius:0.5em; 
      border-bottom-right-radius:0.5em; 
     } 
     .tab-content>div{ 
      padding:5px; 
     }     

    </style> 
    </head> 

    <body> 
     <div data-role="page"> 

     <div data-role="header"> 
     <h1>My Title</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <div data-role="navbar" id="navbar"> 
       <ul> 
        <li><a href="#" class="ui-btn-active" data-tab-class="tab1">Tab1</a></li> 
        <li><a href="#" data-tab-class="tab2">Tab2</a></li> 
        <li><a href="#" data-tab-class="tab3">Tab3</a></li> 
        <li><a href="#" data-tab-class="tab4">Tab4</a></li> 
       </ul> 
      </div> 
      <div class="tab-content"> 
       <div class="tab1"> 
        Tab1 
       </div> 
       <div class="tab2 ui-screen-hidden"> 
        Tab2 
       </div> 
       <div class="tab3 ui-screen-hidden"> 
        Tab3 
       </div> 
       <div class="tab4 ui-screen-hidden"> 
        Tab4 
       </div> 
      </div> 
     </div><!-- /content --> 

     </div><!-- /page --> 
    </body> 
</html>

一個here演示 - http://jsfiddle.net/m8wQM/

讓我知道，如果它幫助。

來源

2012-02-10 07:08:41 user700284