back
基本的なGUIを使いこなそう (5/5)
■ネイティブなメニュー表示
<select>タグは、いろいろと面白い使い方ができます。まずは「ネイティブなメニュー表示」についてです。jQuery Mobileが用意したGUIではなく、標準のポップアップメニューを表示させたい場合には、<select>タグに、
<select>を使った項目の表示は、項目の役割ごとにグループ分けして表示することもできます。下のリスト欄にサンプルを掲載してありますので見てください。<option>タグを記述するとき、
<select>タグには、もう１つ面白い機能があります。それは「トグルスイッチ」としての表示です。
先ほどのサンプルで、<select>タグの部分を、下のリスト欄のように修正してみてください。すると、クリックするごとに「Windows」「Mac OS X」という項目が切り替わるスイッチとして表示されます。これがトグルスイッチです。
トグルスイッチは、<select>タグに、data-role="slider"という属性を用意して作成します。また、内部に持つ<option>タグは２つだけにします。たったこれだけで、切り換えスイッチのGUIができあがります。
――このように、HTMLに標準で用意されているGUIがだけでも、ずいぶんとスマートフォンらしいインターフェイスを作ることができるようになっています。いずれも、書くタグそのものはHTMLの標準的なタグで特別なタグなど使っていません。自分のWebページのタグにちょっとjQuery Mobileのための属性を追加するだけで済みます。実に簡単！
data-native-menu="true"このように属性を用意しておきます。これでネイティブな（HTML本来の）ポップアップメニューが表示されるようになります。
■項目のグループ分け
<select>を使った項目の表示は、項目の役割ごとにグループ分けして表示することもできます。下のリスト欄にサンプルを掲載してありますので見てください。<option>タグを記述するとき、
<optgroup label="グループ名">このように、<optgroup>というタグで<option>をまとめると、それぞれがグループ分けして表示されるようになります。これは、jQuery Mobileに限らず、通常のHTMLでも使える機能ですので、ここで覚えておくと便利でしょう。
<option>……</option>
……略……
</optgroup>
■トグルスイッチとしての<select>タグ
<select>タグには、もう１つ面白い機能があります。それは「トグルスイッチ」としての表示です。
先ほどのサンプルで、<select>タグの部分を、下のリスト欄のように修正してみてください。すると、クリックするごとに「Windows」「Mac OS X」という項目が切り替わるスイッチとして表示されます。これがトグルスイッチです。
トグルスイッチは、<select>タグに、data-role="slider"という属性を用意して作成します。また、内部に持つ<option>タグは２つだけにします。たったこれだけで、切り換えスイッチのGUIができあがります。
――このように、HTMLに標準で用意されているGUIがだけでも、ずいぶんとスマートフォンらしいインターフェイスを作ることができるようになっています。いずれも、書くタグそのものはHTMLの標準的なタグで特別なタグなど使っていません。自分のWebページのタグにちょっとjQuery Mobileのための属性を追加するだけで済みます。実に簡単！
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※ネイティブメニューの表示 <div data-role="fieldcontain"> <label for="sel1">select</label> <select id="sel1" name="sel1" data-native-menu="true"> <option value="Windows">Windows</option> <option value="Mac OS X">Mac OS X</option> <option value="Linux">Linux</option> </select> </div> ※グループ分けした<select>タグ <div data-role="fieldcontain"> <label for="sel1">select</label> <select id="sel1" name="sel1" data-native-menu="false"> <optgroup label="PC"> <option value="Windows">Windows</option> <option value="Mac OS X">Mac OS X</option> <option value="Linux">Linux</option> </optgroup> <optgroup label="Smart Phone"> <option value="iOS">iOS</option> <option value="Android">Android</option> <option value="Blackberry">Blackberry</option> </optgroup> </select> </div> ※トグルスイッチとしての<select>タグ <div data-role="fieldcontain"> <label for="sel1">select</label> <select id="sel1" name="sel1" data-role="slider"> <option value="Windows">Windows</option> <option value="Mac OS X">Mac OS X</option> </select> </div>
| << 前へ |