jQueryモバイルボタン
モバイル アプリは、表示したいものを単純にポイント アンド クリックすることで構築されています。
jQuery Mobile でボタンを作成する
jQuery Mobile では、次の 3 つの方法でボタンを作成できます。
<button> 要素を使用する
<input> 要素を使用するを歌うバンド data-role="button" を持つ <a> 要素
- <button>
インスタンス
<!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"> <button class="ui-btn">按钮</button> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html><input>
インスタンス
<!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"> <input type="button" value="按钮"> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html><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"> <h1>按钮</h1> </div> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn">按钮</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
ページ間のリンクには <a> data-role="button" 要素を使用し、フォーム送信には <input> 要素を使用することをお勧めします。  | ナビゲーション ボタンボタンを介してページ間をリンクするには、data-role="button" 属性を持つ <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"> <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>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>按钮</h1> </div> <div data-role="main" class="ui-content"> <p>再见!</p> <a href="#pageone" data-role="button">返回第一个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html> インスタンスを実行する» オンライン インスタンスを表示するための [インスタンスの実行] ボタン インライン ボタンデフォルトでは、ボタンは画面幅全体を占めます。コンテンツと同じ幅のボタンが必要な場合、または 2 つ以上のボタンを並べて表示したい場合は、 data-inline="true": 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"> <p>普通 / 默认按钮:</p> <a href="#pagetwo" class="ui-btn">访问第二个页面</a> <p>内联按钮:</p> <a href="#pagetwo" class="ui-btn ui-btn-inline">访问第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>内联按钮 (一个接一个显示):</p> <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a> <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a> <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html> Running Instance » を追加します。 オンラインの例を表示するには、[サンプルの実行] ボタンをクリックしてください ボタンを結合するjQuery Mobile では、ボタンをグループ化する簡単な方法が提供されます。 data-role="controlgroup" 属性と data-type="horizontal|vertical" を一緒に使用して、ボタンを水平または垂直に組み合わせるかを指定してください: インスタンス<!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="controlgroup" data-type="horizontal"> <p>水平组合按钮:</p> <a href="#" class="ui-btn">按钮 1</a> <a href="#" class="ui-btn">按钮 2</a> <a href="#" class="ui-btn">按钮 3</a> </div><br> <div data-role="controlgroup" data-type="vertical"> <p>垂直组合按钮 (默认):</p> <a href="#" class="ui-btn">按钮 1</a> <a href="#" class="ui-btn">按钮 2</a> <a href="#" class="ui-btn">按钮 3</a> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html> インスタンスの実行» [例の実行] ボタンをクリックして、オンラインの例を表示します
戻るボタン戻るボタンを作成するには、data-rel="back" 属性を使用します (これはアンカーの href 値を無視します): インスタンス<!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"> <a href="#pagetwo" class="ui-btn">访问第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>返回按钮实例</h1> </div> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn" data-rel="back">返回</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html> インスタンスを実行» 「例の実行」ボタンをクリックしてオンライン例を表示します その他のリンクボタンの例
より完全な CSS クラスについては、jQuery モバイル CSS クラス リファレンス マニュアルをご覧ください。 次の章では、ボタンにアイコンを追加する方法を説明します。 |
|---|
