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 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
原生js实现选项卡功能
Mar 08 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
微信小程序block的使用教程
Apr 01 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python正则表达式完全指南
2017/05/25 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
基于python实现高速视频传输程序
2019/05/05 Python
python实现证件照换底功能
2019/08/20 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
职称评定自我鉴定
2014/03/18 职场文书
租房协议书怎么写
2014/04/10 职场文书
机关作风建设整改方案
2014/10/27 职场文书
2014司机年终工作总结
2014/12/05 职场文书
介绍信格式样本
2015/05/05 职场文书
公司保洁员管理制度
2015/08/04 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Golang并发工具Singleflight
2022/05/06 Golang