jQueryモバイルナビゲーションバー
ナビゲーション バーは水平方向に配置された一連のリンクであり、通常はヘッダーまたはフッター内に含まれます。
デフォルトでは、ナビゲーション バーのリンクは自動的にボタンになります (data-role="button" は必要ありません)。
data-role="navbar" 属性を使用してナビゲーション バーを定義します:
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎访问我的主页</h1> <div data-role="navbar"> <ul> <li><a href="#">主页</a></li> <li><a href="#">第二页</a></li> <li><a href="#">搜索</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>我的内容..</p> </div> <div data-role="footer"> <h1>我的底部</h1> </div> </div> </body> </html>
インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
 | デフォルト この場合、ボタンの幅はそのコンテンツと同じになります。順序なしリストを使用して、ボタンの幅を均等に分割します。1 つのボタンは幅の 100% を占め、2 つのボタンはそれぞれ幅の 50% を占め、3 つのボタンはそれぞれ幅の 33,3% を占めます。ただし、ナビゲーション バーで 5 つを超えるボタンを指定すると、複数の行に分割されます (「その他の例」を参照)。 |
|---|
ナビゲーション ボタン アイコン
data-icon 属性を使用して、ナビゲーション ボタンにアイコンを追加できます:
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎访问我的主页</h1> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home">主页</a></li> <li><a href="#" data-icon="arrow-r">第二页</a></li> <li><a href="#" data-icon="search">搜索</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>我的内容..</p> </div> <div data-role="footer"> <h1>我的底部</h1> </div> </div> </body> </html>
インスタンスの実行»
「インスタンスの実行」をクリックしますオンライン インスタンスを表示するボタン
data-icon 属性は、アイコンの章の CSS クラスと同じ値を使用します。 CSS クラスの使用法 class="ui-icon-value", data-icon属性の使用方法はdata-icon="value"です。
| プロパティ値 | 説明 | アイコン |
|---|---|---|
| data-icon="home" | ホームページ |  |
| data-icon= arrow-r" | 右矢印 |  |
| data-icon="検索" | 検索 |  |
すべての jQuery Mobile ボタン アイコンの完全なリファレンス マニュアルについては、jQuery Mobile アイコン リファレンス マニュアルを参照してください。
アイコンの位置
「ui-btn-icon-position」クラス（アイコンの章で詳しく説明）と同様に、アイコンの表示位置を上（頭）、右（右）に設定できます。側面）、底部（下）、または左（左）。
アイコンの位置はナビゲーション バー コンテナーに設定されます。位置を指定するには data-iconpos 属性を使用します:
| 属性値 | Description | Instance |
|---|---|---|
| data-iconpos="top" | アイコンの上揃え | お試しください |
| data-iconpos="right" | アイコンの右揃え | お試しください |
| data-iconpos="bottom" | アイコンの下揃え | お試しください |
| data-iconpos="left" | アイコンを左揃え | 試してみましょう |
| デフォルトでは、ナビゲーション ボタンのアイコンはテキストの上に配置されます (data-iconpos="上"）。 |
アクティブ化ボタン
ナビゲーション バーのリンクをクリックすると、選択された (押された) ように見えます。
リンクをクリックせずにこの外観を取得したい場合は、class="ui-btn-active" を使用します。
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎访问我的主页</h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-icon="home">首页</a></li> <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>本例设有 ui-btn-active 类，请注意首页按钮时突出显示的（已选）。</p> <p>如果点击页面二，您会注意到按钮不会突出显示。</p> </div> <div data-role="footer"> <h1>我的页脚</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>欢迎访问我的主页</h1> <div data-role="navbar"> <ul> <li><a href="#pageone" data-icon="home">首页</a></li> <li><a href="#" data-icon="arrow-r">页面二</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>本页中没有被预选的按钮（突出显示）。</p> <p>如需让按钮被选的外观表示当前正在访问页面，请返回导航栏教程，继续向下阅读。</p> </div> <div data-role="footer"> <h1>我的页脚</h1> </div> </div> </body> </html>
インスタンスの実行»
[インスタンスの実行] ボタンをクリックして、オンライン インスタンス
複数のページの場合、各ボタンの選択された外観で現在のユーザーがいるページを表すことができます。これを行うには、リンクされたクラスに「ui-state-persist」と「ui-btn-active」を追加します:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首页</a></li> <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>本例设有 ui-btn-active 类，请注意首页按钮时突出显示的（已选）。</p> <p>请点击页面二按钮，看看会发生什么。</p> </div> <div data-role="footer"> <h1>我的页脚</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>欢迎来到我的主页</h1> <div data-role="navbar"> <ul> <li><a href="#pageone" data-icon="home">首页</a></li> <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">页面二</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>该页面的按钮也会被突出显示，归功于 ui-btn-active 类。</p> <p>如果返回首页，您会发现页面将保持状态，归功于 ui-state-persist 类。</p> </div> <div data-role="footer"> <h1>我的页脚</h1> </div> </div> </body> </html>
Run Instance»
オンラインで表示するには、[Run Instance] ボタンをクリックします。インスタンス
その他のインスタンス
コンテンツ内のナビゲーションバー
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="plus">更多</a></li> <li><a href="#" data-icon="minus">更少</a></li> <li><a href="#" data-icon="delete">删除</a></li> <li><a href="#" data-icon="check">喜爱</a></li> <li><a href="#" data-icon="info">信息</a></li> </ul> </div> <p>该例演示内容中的导航栏。</p> </div> <div data-role="footer"> <h1>我的页脚</h1> </div> </div> </body> </html>
インスタンスを実行する»
オンラインインスタンスを表示するには、「インスタンスを実行」ボタンをクリックしてください
データの入力方法- role="content" 内にナビゲーション バーを追加します。
Tail のナビゲーション バー
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="plus">更多</a></li> <li><a href="#" data-icon="minus">更少</a></li> <li><a href="#" data-icon="delete">删除</a></li> <li><a href="#" data-icon="check">喜爱</a></li> <li><a href="#" data-icon="info">信息</a></li> </ul> </div> <p>该例演示页脚中的导航栏。</p> </div> <div data-role="footer"> <h1>我的页脚</h1> </div> </div> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンライン インスタンスを表示します
Tail 内にナビゲーション バーを追加する方法。
ナビゲーションバーにアイコンを配置します
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <div data-role="navbar" data-iconpos="left"> <ul> <li><a href="#" data-icon="plus">更多</a></li> <li><a href="#" data-icon="minus">更少</a></li> <li><a href="#" data-icon="delete">删除</a></li> <li><a href="#" data-icon="check">喜爱</a></li> <li><a href="#" data-icon="info">信息</a></li> </ul> </div> <p>该例演示页脚中的导航栏中的图标定位。</p> <p>data-iconpos="left" 将把图标定位到按钮的左侧。</p> </div> <div data-role="footer"> <h1>我的底部</h1> </div> </div> </body> </html>
インスタンスを実行します »
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
ナビゲーションバーの末尾内のアイコンを配置する方法。
5 つ以上のボタン
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的首页</h1> </div> <div data-role="main" class="ui-content"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="plus">更多</a></li> <li><a href="#" data-icon="minus">更少</a></li> <li><a href="#" data-icon="delete">删除</a></li> <li><a href="#" data-icon="check">喜爱</a></li> <li><a href="#" data-icon="info">信息</a></li> <li><a href="#" data-icon="forward">向前</a></li> <li><a href="#" data-icon="back">向后</a></li> <li><a href="#" data-icon="star">星形</a></li> <li><a href="#" data-icon="gear">选项</a></li> <li><a href="#" data-icon="search">搜索</a></li> </ul> </div> <p>该例演示当导航栏包含超过五个按钮时的情况。</p> </div> <div data-role="footer"> <h1>我的底部</h1> </div> </div> </body> </html>
インスタンスの実行 »
[インスタンスの実行] ボタンをクリックすると、オンライン インスタンスの 10 個のボタンのデモが表示されます
。
