jQuery Mobileフォーム要素

1.range範囲
jsで値を設定でき、refreshメソッドでリフレッシュ効果を完了
 

$(input[type=range]).val(180).slider("refresh")

 
 
 
 

<div data-role="page">
    <div data-role="header"><h1>   </h1></div>
    <div data-role="content">
      <input type="range" id="txtR" value="0" 
             min="0" max="255" onchange="setSpnColor()"  />  
      <span id="spnPrev"></span>
　  </div>
    <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>     
  </div>

 2.切り替えスイッチ(切り替え時にchangeイベントをトリガー)
 
要素のdata-role属性値を「slider」に設定すると、ドロップダウンリストの下にある2つのオプションのスタイルを切り替えスイッチに変更できます.function ChangeEvent() { $("#pTip").html($("#slider").val()); } <div data-role="page"> <div data-role="header"><h1>头部栏</h1></div> <div data-role="content"> <select id="slider" data-role="slider" onchange="ChangeEvent();"> <option value="1">开</option> <option value="0">关</option> </select> <p id="pTip"></p> 　 </div> <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> </div> jsでデフォルト値を割り当てることはできますが、refreshを使用して効果をリフレッシュする必要があります.$("#slider")[0].selectedIndex=1; $("#slider").slider("refresh");  3.ラジオボタングループ $(function() { //获取单选按钮选择时的值 $("input[type='radio']").bind("change", function(event, ui) { $("#pTip").html(this.value); }) }) <div data-role="page"> <div data-role="header"><h1>头部栏</h1></div> <div data-role="content"> <fieldset data-role="controlgroup" data-type="horizontal"> <input type="radio" name="rdoA" id="rdo1" value="1" checked="checked" /> <label for="rdo1">A</label> <input type="radio" name="rdoA" id="rdo2" value="2" /> <label for="rdo2">B</label> <input type="radio" name="rdoA" id="rdo3" value="3" /> <label for="rdo3">C</label> </fieldset> <p id="pTip"></p> 　 </div> <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> </div> jsで切り替える$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");  4.チェックボタングループ $(function() { var strChangeVal = ""; var objCheckBox = $("input[type='checkbox']"); //设置复选框选择时的值 objCheckBox.bind("change", function(event, ui) { if (this.checked) { strChangeVal += this.value + ","; } else { strChangeVal = GetChangeValue(objCheckBox); } $("#pTip").html(strChangeVal); }) }) //获取全部选择按钮的值 function GetChangeValue(v) { var strS = ""; v.each(function() { if (this.checked) { strS += this.value + ","; } }); return strS; } <div data-role="page"> <div data-role="header"><h1>头部栏</h1></div> <div data-role="content"> <fieldset data-role="controlgroup" data-type="horizontal"> <input type="checkbox" name="chkA" id="chk1" value="1" /> <label for="chk1">A</label> <input type="checkbox" name="chkA" id="chk2" value="2" /> <label for="chk2">B</label> <input type="checkbox" name="chkA" id="chk3" value="3" /> <label for="chk3">C</label> </fieldset> <p id="pTip"></p> 　 </div> <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> </div>  5.select選択ドロップダウンボックス元のメニューのタイプをカスタムタイプに変更する方法は、要素でdata-native-menu="false"

<div data-role="page">
    <div data-role="header"><h1>   </h1></div>
    <div data-role="content">
      <fieldset data-role="controlgroup" data-type="horizontal"> 
 		<select name="selY" id="selY" data-native-menu="false"> 
			<option>  </option> 
			<option value="2011">2011</option> 
			<option value="2012">2012</option> 
		</select>
		<select name="selM" id="selM" data-native-menu="false"> 
			<option>  </option> 
			<option value="1">1</option> 
			<option value="2">2</option> 
			<option value="3">3</option> 
			<option value="4">4</option> 
			<option value="5">5</option> 
			<option value="6">6</option> 
			<option value="7">7</option> 
			<option value="8">8</option> 
			<option value="9">9</option> 
			<option value="10">10</option> 
			<option value="11">11</option> 
			<option value="12">12</option> 
		</select>  
		<p id="pTip"></p>
      </fieldset> 
　  </div>
    <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>

複数オプションの場合

 <fieldset data-role="controlgroup"> 
 		<select name="selY" id="selY" data-native-menu="false" multiple="true"> 
			<option>  </option> 
			<option value="2011">2011</option> 
			<option value="2010">2012</option> 
		</select>
		<select name="selM" id="selM" data-native-menu="false" multiple="true"> 
			<option>  </option> 
			<option value="jan">1</option> 
			<option value="dec">2</option> 
			<option value="feb">3</option> 
			<option value="mar">4</option> 
			<option value="apr">5</option> 
			<option value="may">6</option> 
			<option value="jun">7</option> 
			<option value="jul">8</option> 
			<option value="aug">9</option> 
			<option value="sep">10</option> 
			<option value="oct">11</option> 
			<option value="nov">12</option> 
		</select>  
      </fieldset> 

js初期化方式

$("#select")[0].selectedIndex=2;
$("#select").selectmenu(refresh);