jQueryMobileプロジェクトでタブナビゲーションが必要です。data-role'navbar'を使用できることはわかっていますが、新しいページにスワイプせずに、そのnavbarの下のコンテンツのみを変更したいと思います。これまでのところ、同じナビゲーションバーが相互にリンクしている複数の異なるページしか持てませんでしたが、それは私が望んでいることではありません。
誰か助けてもらえますか？
前もって感謝します
質問する
35436 次
6 に答える
32
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();
});
これにより、タブをネストしたり、ページまたは疑似ページに複数のタブのセットを配置したりできます。
使用される「相対セレクター」に関するいくつかのドキュメント：
.closest()：http ：//api.jquery.com/closest.siblings()：http ：//api.jquery.com/siblings
次に例を示します：http：//jsfiddle.net/Cfbjv/25/（現在オフラインです）
于 2011-07-27T19:24:39.507 に答える
4
更新: 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;
});
});
于 2012-02-16T21:56:51.950 に答える
2
@マイク・バートレット
私はこれに苦労しましたが、ジャスパーのコードを分解した後、彼の投稿されたコードとjsfiddleページのコードからわずかなニュアンスがあるように見えます.
彼が投稿した場所
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });
最後の行を変更して、navbar に「data-href」値を設定したコンテンツを単純に呼び出すと便利であることがわかりました。
$('div[data-role="navbar"] a').live('click', function () {
$(this).addClass('ui-btn-active');
$('div.content_div').hide();
$($(this).attr('data-href')).show();
});
私のnavbar 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>
これは彼とほとんど同じですが、何らかの理由で「ページの読み込みエラー」メッセージが表示されませんでした。それが役立つことを願っています...
于 2012-06-27T17:03:01.343 に答える
1
4年前に質問されたことに気がついたので、当時JQ Mobileでタブウィジェットが利用可能だったかどうかはわかりません. とにかく私は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>
于 2015-07-27T11:47:11.380 に答える
1
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>
ありがとう
于 2013-07-02T08:14:44.593 に答える