jQuery モバイル テーマ
jQuery Mobile には、「a」から「b」までの 2 つの異なるテーマ スタイルが用意されています。各テーマのボタン、ツールバー、コンテンツ ブロックなどの色は統一されておらず、各テーマの視覚効果も異なります。 。
要素の data-theme 属性を設定することで、アプリケーションの外観をカスタマイズできます:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| Value | Description | Instance |
|---|---|---|
| a | ページの背景は灰色で、黒色です。テキスト 先頭と下部の両方 灰色の背景に黒色のテキスト 灰色の背景に黒色のテキストのボタン アクティブ化されたボタンとリンクは青色の背景に白色のテキストです 入力入力ボックスのプレースホルダー属性値は明るい灰色で、値の値は黒です | 試してみてください |
| b | ページには黒の背景と白のテキストがあります 頭と下は両方とも黒の背景と白のテキストです ボタンは白のテキストと木炭の背景です アクティブなボタンとリンクのテキストは白、背景は青です 入力入力ボックスのプレースホルダー属性値は明るい灰色、値は白です | 試してみましょう |
ボタンスタイルは class="ui-btn" を使用し、「ui-」を使用しますbtn-a|b" クラスを使用してボタンを灰色 (デフォルト) または黒に設定します:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | "a" テーマのスタイルはほとんどの要素に使用され、子要素は通常、テーマのスタイルを継承します。親要素。 |
|---|
テーマのヘッダーと下部
インスタンス
<!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" data-theme="b"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>文本内容</p> <a href="#" class="ui-btn">按钮</a> <p>插入 <a href="#">链接</a> !</p> </div> <div data-role="footer" data-theme="b"> <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" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎!</p> <a href="#pagetwo" class="ui-btn">跳转到页面二</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header" data-theme="b"> <h1>主题对话框!</h1> </div> <div data-role="main" class="ui-content"> <p>我是一个主题对话框 - 我的头部和底部是黑色的!</p> <a href="#pageone" class="ui-btn ui-btn-inline">跳转到页面一</a> </div> <div data-role="footer" data-theme="b"> <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" id="pageone"> <div data-role="header"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>普通按钮:</p> <a href="#" class="ui-btn">灰色按钮 (默认)</a> <a href="#" class="ui-btn ui-btn-b">黑色按钮</a> <br> <p>内联按钮:</p> <a href="#" class="ui-btn ui-btn-inline">灰色按钮 (默认)</a> <a href="#" class="ui-btn ui-btn-inline ui-btn-b">黑色按钮</a> </div> <div data-role="footer"> <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" id="pageone"> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a> <a href="#" class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</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"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all">Show Popup</a> <div data-role="popup" id="myPopup" class="ui-content" data-theme="b"> <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> <p>我是主题弹窗!.</p> <p>在我右上角有个关闭按钮</p> <p><b>提示：</b> 你可以点击弹窗的外部区域来关闭弹窗。</p> </div> </div> <div data-role="footer"> <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"> <a href="#" class="ui-btn ui-btn-b 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-btn-b 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-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </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" id="pageone"> <div data-role="header"> <h1>文本头部</h1> </div> <div data-role="main" class="ui-content"> <p>导航栏将会主动基础父元素的样式。可以通过添加 data-theme 属性来自定义按钮样式。</p> </div> <div data-role="footer" data-theme="b"> <h1>Insert Footer Text Here</h1> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home" data-theme="a">Button 1</a></li> <li><a href="#" data-icon="arrow-r">Button 2</a></li> <li><a href="#" data-icon="arrow-r">Button 3</a></li> <li><a href="#" data-icon="search" data-theme="a">Button 4</a></li> </ul> </div> </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" id="pageone"> <div data-role="panel" id="myPanel" data-theme="b"> <h2>主题面板</h2> <p>我是一个主题面板!</p> <p> 你可以点击面板之外的区域来关闭，或者按下 Esc 键或滑动来关闭。</p> </div> <div data-role="header"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>点击以下按钮打开面板。</p> <a href="#myPanel" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-shadow">打开面板</a> </div> <div data-role="footer"> <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" id="pageone"> <div data-role="header"> <h1>文本头部</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h1>点我 - 我是可折叠的！</h1> <p>我是折叠的内容</p> </div> </div> <div data-role="footer"> <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" id="pageone"> <div data-role="main" class="ui-content"> <h2>有序列表</h2> <ol data-role="listview" data-theme="b"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li data-theme="a"><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ol> <br> <h2>无序列表</h2> <ul data-role="listview"> <li><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> <br> </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" id="pageone"> <div data-role="main" class="ui-content"> <h2>分割按钮实例</h2> <ul data-role="listview" data-inset="true" data-split-theme="b"> <li data-role="divider" data-theme="a">浏览器</li> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p> </a> <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a> </li> <li> <a href="#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox 是一款来自 Mozilla。发布于 2004 年。</p> </a> <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a> </li> </ul> </div> </div> <div data-role="page" id="download"> <div data-role="main" class="ui-content"> <h3>分割按钮实例</h3> <p>下面的按钮仅供演示。</p> <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-check ui-btn-icon-left" data-rel="back">下载</a> <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-delete ui-btn-icon-left" data-rel="back">取消</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" id="pageone"> <div data-role="header"> <h1>主题化的可折叠列表</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h4>A</h4> <ul data-role="listview"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> </ul> </div> <div data-role="collapsible" data-theme="b" data-content-theme="a"> <h4>B</h4> <ul data-role="listview"> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> </ul> </div> </div> <div data-role="footer"> <h1>此处是页脚文本</h1> </div> </div> </body> </html>
インスタンスの実行»
オンラインインスタンスを表示するには「インスタンスの実行」ボタンをクリックしてください
新しいテーマを追加します
jQuery Mobile はモバイル ページに新しいテーマを追加できます。
CSS ファイルを変更して、新しいテーマを追加または編集します (jQuery Mobile をダウンロードしている場合)。スタイル モジュールをコピーし、文字クラス名 (c ～ z) を再コマンドし、お気に入りの色とフォントをスタイルに追加するだけです。
HTML ドキュメントにテーマの新しいスタイルを追加することもできます。ツールバー クラス: ui-bar-(a-z)、テキスト コンテンツ クラス: ui-body-(a-z)、およびページ クラスを追加します。 ui-ページ-テーマ -(a-z) 。
例
<!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"> <form method="post" action="demoform.asp"> <div class="ui-fieldcontain"> <label for="name">全名:</label> <input type="text" name="text" id="name" placeholder="你的名字.." data-theme="b"> <br><br> <label for="search">您需要搜索什么？</label> <input type="search" name="search" id="search" placeholder="搜索内容.."> <br><br> <label for="colors">请选择喜爱的颜色：</label> <select id="colors" name="colors" data-theme="b"> <option value="red">红色</option> <option value="green">绿色</option> <option value="blue">蓝色</option> </select> <br><br> <label for="switch">切换开关:</label> <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-theme="b"> <br><br> <div data-role="controlgroup"> <legend>请选择喜爱的电影:</legend> <label for="mov1">蜘蛛侠</label> <input type="checkbox" name="mov1" id="mov1" data-theme="a"> <label for="mov2">变形金刚</label> <input type="checkbox" name="mov2" id="mov2" data-theme="b"> </div> </div> </form> </div> </div> </body> </html>
例の実行»
オンライン例を表示するには、[例の実行]ボタンをクリックしてください
| jQuery Mobileの以前のバージョンでは、親を継承するためにJavaScriptが使用されていました。要素のテーマ スタイル。バージョン 1.4 以降、フレームワークはパフォーマンスの向上にさらに注意を払い、継承に JavaScript を使用しなくなり、純粋な CSS を使用します。 jQuery Mobile チームは、ThemeRoller でこのためのツールを作成しました。このツールを使用して古いテーマをアップグレードし、新しいバージョンと互換性を持たせることができます。 |
|---|
