jQuery モバイル ツールバー
ツールバー要素は通常、ヘッダーとフッター内に配置されており、ナビゲーションに簡単にアクセスできます:
ヘッダー バー
ヘッダー バーには通常、ページ タイトル/ロゴ、または 1 つまたは 2 つのボタン (通常はホーム、オプション、または検索) が含まれます。
ヘッダーの左側または右側にボタンを追加できます。
次のコードは、ヘッダー テキストの左側にボタンを追加し、ヘッダー テキストの右側にボタンを追加します:
インスタンス
<!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"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p> </div> </div> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックして、オンライン インスタンスを表示します
以下のコードは、ヘッダー テキストの左側にボタンを追加します:
インスタンス
<!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="header"> <a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> </div> </body> </html>
インスタンスを実行する »
オンライン インスタンスを表示するには、[インスタンスを実行] ボタンをクリックします。インスタンスの例
ただし、ボタンのリンクを <h1> 要素の後に配置すると、右側のテキストは表示されません。ヘッダー タイトルの右側にボタンを追加するには、クラスを「ui-btn-right」として指定してください:
インスタンス
<!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="header"> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-btn-right ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">搜索</a> </div> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしますオンライン インスタンスを表示するには
| 頭部には 1 つまたは 2 つのボタンを含めることができますが、尾部には制限がありません。 |
テールバー
テールバーはヘッダーバーよりも柔軟です - テールバーはより機能的でページ全体で変更可能であるため、できるだけ多くのボタンを含めることができます:
インスタンス
<!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"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> <p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p> </div> <div data-role="footer"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </body> </html>
実行例 »
「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します
注: 尾のスタイルは頭とは異なります (パディングやスペースがなく、ボタンは中央にありません)。この問題は、次の単純なスタイルを使用して解決できます:
インスタンス
<!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"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram关注我</a> </div> </div> </body> </html>
インスタンスを実行»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
ボタンを変更することもできます水平または垂直の組み合わせを作成します:
インスタンス
<!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"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </div> </body> </html>
インスタンスを実行»
オンラインインスタンスを表示するには、[インスタンスを実行]ボタンをクリックしてください
ヘッダーバーとトレーラーバーを配置します
ヘッダーとテールは 3 つの方法で配置できます:
インライン - デフォルト。ヘッダー列とフッター列はページのコンテンツとインラインで配置されます。
修正 - ヘッダーバーとフッターバーがページの上部と下部に固定されています。
フルスクリーン - 基本的に固定配置モードと同じで、ヘッダーとフッターのバーはページの上部と下部に固定されます。ただし、ツールバーが画面外にスクロールしても、画面をクリックしない限り自動的に再表示されません。これは、置換感覚を高める写真やビデオなどのアプリケーションに非常に便利です。このモードではツールバーがページのコンテンツを覆うため、特別な状況で使用するのが最適であることに注意してください。
data-position 属性を使用して、ヘッダー列と末尾列を配置します。
インライン配置 (デフォルト)
インスタンス
<!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"> <div data-role="header" data-position="inline"> <h1>行内页眉</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示：</b> 如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="inline"> <h1>行内页脚</h1> </div> </div> </body> </html>
インスタンスを実行»
[インスタンスを実行] ボタンをクリックして、オンラインインスタンスを表示
固定配置
インスタンス
<!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"> <div data-role="header" data-position="fixed"> <h1>Fixed 页眉</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p><b>提示：</b> 如果滚动条可用，那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="fixed"> <h1>Fixed 页脚</h1> </div> </div> </body> </html>
インスタンスを実行»
オンラインインスタンスを表示するには、[インスタンスを実行]ボタンをクリックしてください
全画面配置を有効にするには、data-position="fixed" を使用し、要素に data-fullscreen 属性を追加します:
全画面配置
インスタンス
<!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"> <div data-role="header" data-position="fixed" data-fullscreen="true"> <h1>Fixed 和 Fullscreen 页眉</h1> </div> <div data-role="main" class="ui-content"><br><br> <p><b>提示:</b> T如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p><b>提示:</b> 敲击屏幕会隐藏或显示页眉和页脚。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="fixed" data-fullscreen="true"> <h1>Fixed 和 Fullscreen 页脚</h1> </div> </div> </body> </html>
インスタンスの実行»
「インスタンスの実行」をクリックします「 」ボタンをクリックすると、オンラインの例が表示されます
ヒント: フルスクリーンの位置調整は、写真、画像、ビデオに対して機能します。
ヒント: 固定配置と全画面配置では、ヘッダーバーとテールバーが非表示になり、画面をクリックすると表示されます。
その他の例
ツールバーにアイコンのみを表示する
ツールバーにアイコンのみを表示するには、ui-btn-icon-notext クラスを使用できます。
