Javascript/jQuery Mobile/フォーム(Form) - api_programming @ ウィキ

下位ページ

Content

ボタン(button)

Button Widget - jQuery Mobile
見た目がボタンになるものは

<input type="button" ...>
<button ...>...</button>
<a href="..." ...>...</a>

があるが、ver.1.4.5の記述に従えば、

<input type="button" value="..." />

で指定する。

変更を反映させる

ボタンに変更を加えても、見た目が反映されない場合がある。そのばあいは

.button("refresh")

を実行する
http://api.jquerymobile.com/button/#method-refresh

ボタンを並べる

<!--5列のグリッド-->
<div class="ui-grid-d">
   <div class="ui-block-a">
      <button class="ui-btn ui-corner-all">Aブロック</button>
   </div>
   <div class="ui-block-b">
      <button class="ui-btn ui-corner-all">Bブロック</button>
   </div>
   <div class="ui-block-c">
      <button class="ui-btn ui-corner-all">Cブロック</button>
   </div>
   <div class="ui-block-d">
      <button class="ui-btn ui-corner-all">Dブロック</button>
   </div>
   <div class="ui-block-e">
      <button class="ui-btn ui-corner-all">Eブロック</button>
   </div>
</div>
 

ボタンを使用不可にする際の注意

他のサイトで

.prop("disabled",true)

とする方法が載っているが、ver.1.4.5では使えなさそう。
input要素で作ったボタンは.button("disable")で操作できるが、jQuery Mobileでは「表示」に反映されないので、.button("refresh")まで行う必要がある。つまり、実質は

.button("disable").button("refresh")

を実行する。

ラジオボタン(radio)

Checkboxradio Widget - jQuery Mobile

見た目を変える（横に並べたバーに）

1. fieldsetで囲む
2. fieldsetに以下の属性を付ける
   1. data-role : controlgroup
   2. data-type :
      • horizontal → 横に並ぶ
      • (data-typeを）指定しない → 縦に並ぶ

<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" .../><label>...</label>
<input type="radio" .../><label>...</label>
</fieldset>

リフレッシュする

JavaScriptで設定を変えたあとはリフレッシュが必要

.checkboxradio("refresh")

$("[name=area]").val("0").checkboxradio("refresh")

セレクトメニュー(select)

Selectmenu Widget - jQuery Mobile

リフレッシュする

JavaScriptで設定を変えたあとはリフレッシュが必要

$("[name=area]").val("0").selectmenu("refresh")

関連項目

HTMLでフォームをつくる

HTML・CSS/フォーム(Form)

jQueryでフォームを処理する

Javascript/jQuery/フォーム(Form)