jQueryMobile　ラジオボタン、チェックボックス ITかあさん

ITかあさん

2011年09月21日| jQueryMobileでスマートフォンサイトを作ろう

jQueryMobile　ラジオボタン、チェックボックス

jQueryMobileでフォームを出力しましょう。jQueryMobileでは多彩なフォームUIを用意してくれています。
フォームを使いこなせれば、jQueryMobileをUIにして、アプリなんかも作れそうですね。
数が多いので、フォームのパーツごとに記事を書きたいと思います。

jQueryMobile　フォーム（form）の書き出し

フォームの基本的な書き方については通常のHTMLと何ら変わりありませんが、スマートフォンの場合はHTML5で書いていくのがよいでしょう。

チェックボックス：checkbox

レイアウトの変更については前回のナビゲーションレイアウトについての記事が参考になるかと思います。
controlgroupで囲ってあげると、パーツをグループ化することができ、逆にはずすと２つ目のチェックボックスのように３つバラバラになります。

3つ目は、チェックボックスの箱が隠れているものの、これも立派なチェックボックス。
ただどうしても他のパーツのようにチェックボックスの箱を表示してあげることが出来ませんでした。
3つを横並びにするにはCSSの追加が必要になります。CSS記述についてはソースコードを参照してください。

フォームパーツはfieldcontainで囲う

フォームのパーツ全体はdata-role=”fieldcontain”で必ず囲ってあげましょう。
囲ってあげないとレイアウトがくずれてしまうようです。











ラジオボタンあれこれ

DEMO

ラジオボタン：radio

ラジオボタン(radio)も、チェックボックスと全く一緒ですね。
ソースはほとんど一緒になります。
３つ目のラジオボタンですが、やはり3つ横並びにすると、ラジオボタンの枠が消えてしまいます。
でも、ちゃんとラジオボタンのように１つしか選択できないので、特に問題は無さそうです。











ラジオボタンあれこれ













ラジオボタンあれこれ

DEMO

ラジオボタン、チェックボックスを横並びにすると…

非常に残念なのですが、ラジオボタン、チェックボックスをそれぞれ横並びにすると自動でボタンの様なスタイルがあたり、動作は問題ないものの、見た目が全くラジオもチェックボックスも一緒なのでユーザビリティ的にやや難がありそうです。
3つ横並びにしたい時はCSSにおいて　記述をもう少し追加してあげる必要がありそうです。
(それはまたの機会ということで・・・・)

初夏のJavaScript祭 in サーキュレーションビル ForPro

«

»