jQuery Mobile導航選項卡

Question

我想在我的jQuery Mobile項目中有一個選項卡導航。我知道我可以使用數據角色「navbar」，但我只想更改該導航欄下方的內容，而不必滑動到新頁面。到目前爲止，我只能使用相同的導航欄鏈接到彼此的幾個不同的頁面，但這不是我想要的。

任何人都可以幫助我嗎？

預先感謝您

Answer 1

您可以使用jQuery Mobile的導航欄樣式，但使用自己的點擊處理程序，以便而不是改變頁面的點擊只會隱藏/顯示在同一頁面上適當的內容。

HTML

<div data-role="navbar"> 
    <ul> 
     <li><a href="#" data-href="a">One</a></li> 
     <li><a href="#" data-href="b">Two</a></li> 
    </ul> 
</div><!-- /navbar --> 
<div class="content_div">onLoad Content</div> 
<div id="a" class="content_div">Some 'A' Content</div> 
<div id="b" class="content_div">Some 'B' Content</div> 

JAVASCRIPT

$(document).delegate('[data-role="navbar"] a', 'click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('.content_div').hide(); 
    $('#' + $(this).attr('data-href')).show(); 
    return false;//stop default behavior of link 
}); 

CSS

.content_div { 
    display: none; 
} 
.content_div:first-child { 
    display: block; 
} 

這裏是上面的代碼的一個的jsfiddle：http://jsfiddle.net/3RJuX/

注：

• 導航欄中的每個鏈接都有一個「data-href」屬性，設置爲要顯示的div（或任何您想使用的容器）的id。

更新

一年後我又回到了這個答案，發現委派的事件處理程序選擇器可優化了一下，利用類，而不是一個屬性（這是快了很多查找）：

$(document).delegate('.ui-navbar a', 'click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('.content_div').hide(); 
    $('#' + $(this).attr('data-href')).show(); 
}); 

更新

該代碼可以做成更MODULA通過使用相對選擇符而不是絕對值（例如$('.content_div')，因爲這將選擇DOM中的所有匹配元素，而不僅僅是相對於單擊的按鈕）。

//same selector here 
$(document).delegate('.ui-navbar ul li > a', 'click', function() { 

    //un-highlight and highlight only the buttons in the same navbar widget 
    $(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active'); 

    //this bit is the same, you could chain it off of the last call by using two `.end()`s 
    $(this).addClass('ui-navbar-btn-active'); 

    //this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM 
    $('#' + $(this).attr('data-href')).show().siblings('.content_div').hide(); 
});​ 

這允許您在頁面或僞頁面上嵌套製表符和/或具有多組製表符。

有些文檔所用的 「相對選擇」：

• .closest()：http://api.jquery.com/closest
• .siblings()：http://api.jquery.com/siblings

下面就是一個例子：http://jsfiddle.net/Cfbjv/25/（現在是離線）

Answer 2

更新：看看我的jsfiddle在http://jsfiddle.net/ryanhaney/eLENj/

我只是花了一些時間弄清楚這一點，所以我想我會回答這個問題。注意我正在使用多頁單個文件YMMV。

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
      <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
      <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
     </ul> 
    </div> 
</div> 

$("div[data-role=page]").bind("pagebeforeshow", function() { 
    // prevents a jumping "fixed" navbar 
    $.mobile.silentScroll(0); 
}); 

$("a[data-role=tab]").each(function() { 
     // bind to click of each anchor 
     var anchor = $(this); 
     anchor.bind("click", function() { 
      // change the page, optionally with transitions 
      // but DON'T navigate... 
      $.mobile.changePage(anchor.attr("href"), { 
       transition: "none", 
       changeHash: false 
     }); 

     // cancel the click event 
     return false; 
    }); 
}); 

Answer 3

@Mike巴特利特

我掙扎着這個自己，但打破Jasper的代碼下來以後，它看起來像有從他貼出的代碼略有細微差別，而且的jsfiddle頁面上。

他在那裏已經發布

$(document).delegate('[data-role="navbar"] a', 'click', function() { 
$(this).addClass('ui-btn-active'); 
$('.content_div').hide(); 
$('#' + $(this).attr('data-href')).show(); }); 

我認爲應該改變的最後一行簡單地調用任何內容設置「數據HREF」的價值在你的導航欄。

$('div[data-role="navbar"] a').live('click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('div.content_div').hide(); 
    $($(this).attr('data-href')).show(); 
    }); 

我的導航欄HTML然後讀取

<div data-role="navbar"> 
<ul> 
    <li><a href="#" data-href="#a">One</a></li> 
    <li><a href="#" data-href="#b">Two</a></li> 
</ul> 

這是幾乎一樣的他，但由於某種原因，我沒有「錯誤加載頁面」的消息。希望可以幫助...

Answer 4

請在jQuery中是指這下面鏈接所有類型的導航欄

http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html

<div data-role="navbar"> 
    <ul> 
    <li><a href="a.html" class="ui-btn-active">One</a></li> 
    <li><a href="b.html">Two</a></li> 
    </ul> 
</div> 

感謝

Answer 5

我喜歡@瑞恩 - 哈尼的答案，但思想我會添加自己的草稿，如果有人可以找到一個更有效的方式做到這一點，然後請添加評論..謝謝

我這樣做是因爲我有一堆在運行時加載到DOM中的「包含」文件，所以我無法硬編碼第n個選項卡突出顯示/激活每個頁面，如Ryan可以。我也有我的應用程序只有一個單一的tabbar豪華。

$(document).delegate('.ui-navbar a', 'tap', function() 
{ 
    $('.ui-navbar').find('li').find('a').removeClass('ui-btn-active'); 
    $('.ui-navbar').find('li:nth-child(' + ($(this).parent().index() + 1) + ')').find('a').addClass('ui-btn-active'); 
}); 

Answer 6

我注意到這個問題是在四年前問的，所以我不確定當時是否有JQ Mobile的Tab小部件。反正我是從2015年

的真棒解決一個傢伙，我下面使用與jQuery Mobile的1.4.5

<div data-role="tabs" id="tabs"> 
  <div data-role="navbar"> 
    <ul> 
      <li><a href="#one" data-ajax="false">one</a></li> 
      <li><a href="#two" data-ajax="false">two</a></li> 
      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> 
    </ul> 
  </div> 
  <div id="one" class="ui-body-d ui-content"> 
    <h1>First tab contents</h1> 
  </div> 
  <div id="two"> 
    <ul data-role="listview" data-inset="true"> 
        <li><a href="#">Acura</a></li> 
        <li><a href="#">Audi</a></li> 
        <li><a href="#">BMW</a></li> 
        <li><a href="#">Cadillac</a></li> 
        <li><a href="#">Ferrari</a></li> 
    </ul> 
  </div> 
</div>