现在位置首页 / 前端开发 /正文

刷新Jquery mobile listviews, buttons, select 下拉 input输入框

作者: IT小兵 | 2013年8月1日| 热度:℃ | 评论: |参与:


Jquery mobile是一个很好用的组件。在很多时候,我们使用ajax加载数据,

并自动更新到ui上,但是这些数据如果有一些样式的话,就需要我们刷新一下控件。

例子:

1.TextArea刷新

$('body').prepend('<textarea id="myTextArea"></textarea>');
$('#myTextArea').textinput();

2.text input刷新

$('body').prepend('<input type="text" id="myTextField" />');
$('#myTextField').textinput();

3.Combobox 或者select 下拉

<labelfor="sCountry">Country:</label>
<selectname="sCountry"id="sCountry">
<optionvalue="">WhereYouLive:</option>
<optionvalue="ad">Andorra</option>
<optionvalue="ae">UnitedArabEmirates</option>
</select>
varmyselect=$("#sCountry");
myselect[0].selectedIndex=3;
myselect.selectmenu('refresh');


4.Listviews


<ulid="myList"data-role="listview"data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
</ul>
$('#mylist').listview('refresh');


5.Slider 控件


<divdata-role="fieldcontain">
<labelfor="slider-2">Inputslider:</label>
<inputtype="range"id="slider-2"value="25"min="0"max="100"/>
</div>
$('#slider-2').val(80).slider('refresh');


6.Toggle switch:拨动开关


<divdata-role="fieldcontain">
<labelfor="toggle">Flipswitch:</label>
<selectname="toggle"id="toggle"data-role="slider">
<optionvalue="off">Off</option>
<optionvalue="on">On</option>
</select>
</div>
varmyswitch=$("#toggle");
myswitch[0].selectedIndex=1;
myswitch.slider("refresh");


7.Radiobutton


<divdata-role="fieldcontain">
<fieldsetdata-role="controlgroup"data-type="horizontal">
<legend>Layoutview:</legend>
<inputtype="radio"name="radio-view"value="list"/>
<labelfor="radio-view-a">List</label>
<inputtype="radio"name="radio-view"value="grid"/>
<labelfor="radio-view-b">Grid</label>
<inputtype="radio"name="radio-view"value="gallery"/>
<labelfor="radio-view-c">Gallery</label>
</fieldset>
</div>
$("input[value=grid]").attr('checked',true).checkboxradio('refresh');


8.CheckBox


<divdata-role="fieldcontain">
<fieldsetdata-role="controlgroup">
<legend>Agreetotheterms:</legend>
<inputtype="checkbox"name="checkbox-1"id="checkbox-1"class="custom"/>
<labelfor="checkbox-1">Iagree</label>
</fieldset>
</div>
$('#checkbox-1').attr('checked',true).checkboxradio('refresh');


转发请注明来源:IT分享 Http://suchso.com


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询