web-dev-qa-db-ja.com

jQueryモバイルナビゲーションタブ

JQueryMobileプロジェクトにタブナビゲーションが必要です。データロール「navbar」を使用できることはわかっていますが、新しいページにスワイプせずに、そのnavbarの下のコンテンツのみを変更したいと思います。これまでのところ、同じナビゲーションバーが相互にリンクしている複数の異なるページしか持てませんでしたが、それは私が望んでいることではありません。

誰か助けてもらえますか？

前もって感謝します

javascriptjquerytabsjquery-mobilenavbar
15
Matteo

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/

注意：

  • ナビゲーションバーの各リンクには、表示されるdiv（または使用するコンテナー）のIDに設定された「data-href」属性があります。

更新

1年後、私はこの回答に戻り、委任されたイベントハンドラセレクターを少し最適化して、属性ではなくクラスを利用できることに気付きました（これはルックアップよりもはるかに高速です）。

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

更新

このコードは、絶対セレクターではなく相対セレクターを使用することで、よりモジュール化できます（$('.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();
});​
_

これにより、タブをネストしたり、ページまたは疑似ページに複数のタブセットを配置したりできます。

使用される「相対セレクター」に関するいくつかのドキュメント：

次に例を示します。 http://jsfiddle.net/Cfbjv/25/ （現在オフラインです）

32
Jasper

更新： http://jsfiddle.net/ryanhaney/eLENj/ で私のjsfiddleをチェックしてください

私はこれを理解するのに少し時間を費やしたので、私はこれに答えると思いました。複数ページの単一ファイル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;
    });
});
4
Ryan Haney

@マイクバートレット

私はこれに苦労しましたが、Jasperのコードを分解した後、彼の投稿されたコードとjsfiddleページのコードからわずかなニュアンスがあるように見えます。

彼が投稿した場所

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

最後の行を変更して、ナビゲーションバーに「data-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>

これは彼とほとんど同じですが、何らかの理由で「ページの読み込みエラー」メッセージが表示されませんでした。お役に立てば幸いです...

2
Ralph Marchant

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>

ありがとう

1
Rajarshi Das

質問が4年前に行われたことに気づいたので、その時点でTabウィジェットがJQMobileで使用可能かどうかはわかりません。とにかく私は2015年からの男です

jquery Mobile1.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>
1
rashidnk

@ Ryan-Haneyの答えが好きでしたが、私自身のラフドラフトを追加したいと思いました。誰かがこれを行うより効率的な方法を見つけることができたら、コメントを追加してください。ありがとう

実行時にDOMにロードされる「インクルード」ファイルがたくさんあるので、この方法で行いました。そのため、ライアンのように、ページごとにn番目のタブが強調表示/アクティブになるようにハードコーディングできませんでした。また、アプリにタブバーが1つしかないという贅沢もあります。

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