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


Posted in Javascript onMay 28, 2016

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界面数据刷新的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
javascript之Partial Application学习
Jan 10 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
jquery自适应布局的简单实例
May 28 #Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 #Javascript
jquery div模态窗口的简单实例
May 28 #Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 #Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 #Javascript
js弹出窗口返回值的简单实例
May 28 #Javascript
JS获取子窗口中返回的数据实现方法
May 28 #Javascript
You might like
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python 字典dict使用介绍
2014/11/30 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
详解django2中关于时间处理策略
2019/03/06 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python安装gdal的两种方法
2019/10/29 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python ini文件常用操作方法解析
2020/04/26 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
2015年电话销售工作总结范文
2015/04/20 职场文书
交通安全教育心得体会
2016/01/15 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS