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);
相关推荐
84483065 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
tztzyzyz 2020-07-05
delmarks 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
tztzyzyz 2020-05-31
81463166 2020-05-17
88570299 2020-05-17
delmarks 2020-05-17
donghongbz 2020-05-15
tztzyzyz 2020-05-15
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%&qu
牵手白首 2020-05-14
Chriswang 2020-04-30
83510998 2020-05-03