jquery mobile界面数据刷新的实现方法

 更新时间:2016年05月28日 10:06:21   投稿:jingxian  
下面小编就为大家带来一篇jquery mobile界面数据刷新的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, checkboxes, select menus)里的数据时,必须做refresh操作.

为什么必须做refresh操作操作呢?因为JQM在做页面渲染的时候,为了使样式跟客户端程序相似, 隐藏了原始的标签然后用一些新的标签和自定义的样式来表现原标签,其实新样式的标签已经不是原来的标签,所以更新了数据必须做refresh操作. 

各类标签的刷新

1.Textarea fields

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

2.Text input fields

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

3.Buttons

$('body').append('<a href="" data-theme="e" id="myNewButton">testing</a>');
$('#myNewButton').button();

4.Combobox or select dropdowns

<label for="sCountry">Country:</label>
<select name="sCountry" id="sCountry">
<option value="">Where You Live:</option>
<option value="ad">Andorra</option>
<option value="ae">United Arab Emirates</option>
</select>
 
var myselect = $("#sCountry");
myselect[0].selectedIndex = 3;
myselect.selectmenu('refresh');

5.Listviews

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

6.Slider control

<div data-role="fieldcontain">
<label for="slider-2">Input slider:</label>
<input type="range" id="slider-2" value="25" min="0" max="100" />
</div>
 
$('#slider-2').val(80).slider('refresh');

7.Toggle switch

<div data-role="fieldcontain">
<label for="toggle">Flip switch:</label>
<select name="toggle" id="toggle" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
 
var myswitch = $("#toggle");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");

8.Radio buttons

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

9.Checkboxes

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
 
$('#checkbox-1').attr('checked',true).checkboxradio('refresh');

以上这篇jquery mobile界面数据刷新的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jQuery学习笔记之jQuery中的$

    jQuery学习笔记之jQuery中的$

    这篇文章主要介绍了jQuery学习笔记之jQuery中的$的相关资料,需要的朋友可以参考下
    2015-01-01
  • jquer之ajaxQueue简单实现代码

    jquer之ajaxQueue简单实现代码

    手头不是很忙,突然想到了ajax queue这个概念,之前貌似有看技术文章中提到过这个,就想着用jquery来实现一下,思想比较简单
    2011-09-09
  • 关于页面加载即执行JQuery的三种方法小结

    关于页面加载即执行JQuery的三种方法小结

    这篇文章主要介绍了关于页面加载即执行JQuery的三种方法小结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • JQuery鼠标移到小图显示大图效果的方法

    JQuery鼠标移到小图显示大图效果的方法

    这篇文章主要介绍了JQuery鼠标移到小图显示大图效果的方法,涉及jQuery鼠标事件与图形操作技巧,需要的朋友可以参考下
    2015-06-06
  • JQuery中extend使用介绍

    JQuery中extend使用介绍

    这篇文章主要介绍了JQuery中extend怎么使用,需要的朋友可以参考下
    2014-03-03
  • 基于jquery实现的可编辑下拉框实现代码

    基于jquery实现的可编辑下拉框实现代码

    昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件;在网上查了很多,没有找到合适自己的,所以决定自动制作一个
    2014-08-08
  • jQuery:节点(插入,复制,替换,删除)操作

    jQuery:节点(插入,复制,替换,删除)操作

    jQuery:节点(插入,复制,替换,删除)操作,需要的朋友可以参考一下
    2013-03-03
  • jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

    jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

    这篇文章主要介绍了jQuery插件FusionCharts绘制的2D条状图效果,结合完整实例形式分析了jQuery使用FusionCharts插件绘制2D条状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-05-05
  • jQuery解析json格式数据示例

    jQuery解析json格式数据示例

    这篇文章主要介绍了jQuery解析json格式数据,涉及jQuery针对json格式数据元素遍历相关操作技巧,需要的朋友可以参考下
    2018-09-09
  • jQuery中prev()方法用法实例

    jQuery中prev()方法用法实例

    这篇文章主要介绍了jQuery中prev()方法用法,实例分析了prev()方法的功能、定义及取得匹配元素集合中每个元素紧邻的前一个同辈元素使用技巧,需要的朋友可以参考下
    2015-01-01

最新评论