libro
www.tuyano.com
jQuery Mobileによるスマートフォン用Webサイト作成入門

基本的なGUIを使いこなそう (5/5)

作成:2011-05-25 08:18
更新:2011-05-25 08:26

■ネイティブなメニュー表示

<select>タグは、いろいろと面白い使い方ができます。まずは「ネイティブなメニュー表示」についてです。jQuery Mobileが用意したGUIではなく、標準のポップアップメニューを表示させたい場合には、<select>タグに、
data-native-menu="true"
このように属性を用意しておきます。これでネイティブな（HTML本来の）ポップアップメニューが表示されるようになります。


■項目のグループ分け

<select>を使った項目の表示は、項目の役割ごとにグループ分けして表示することもできます。下のリスト欄にサンプルを掲載してありますので見てください。<option>タグを記述するとき、
<optgroup label="グループ名">
    <option>……</option>
    ……略……
</optgroup>
このように、<optgroup>というタグで<option>をまとめると、それぞれがグループ分けして表示されるようになります。これは、jQuery Mobileに限らず、通常のHTMLでも使える機能ですので、ここで覚えておくと便利でしょう。


■トグルスイッチとしての<select>タグ

<select>タグには、もう１つ面白い機能があります。それは「トグルスイッチ」としての表示です。

先ほどのサンプルで、<select>タグの部分を、下のリスト欄のように修正してみてください。すると、クリックするごとに「Windows」「Mac OS X」という項目が切り替わるスイッチとして表示されます。これがトグルスイッチです。

トグルスイッチは、<select>タグに、data-role="slider"という属性を用意して作成します。また、内部に持つ<option>タグは２つだけにします。たったこれだけで、切り換えスイッチのGUIができあがります。


――このように、HTMLに標準で用意されているGUIがだけでも、ずいぶんとスマートフォンらしいインターフェイスを作ることができるようになっています。いずれも、書くタグそのものはHTMLの標準的なタグで特別なタグなど使っていません。自分のWebページのタグにちょっとjQuery Mobileのための属性を追加するだけで済みます。実に簡単！

※プログラムリストが表示されない場合

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>
※関連コンテンツ

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る