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事件）

 

将<select>元素的data-role属性值设置为“slider”,可以将该下拉列表下的两个<option>选项的样式变成一个切换开关

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选择下拉框

将原始菜单的类型变为自定义类型的方法，就是在<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);