jQuery Mobile动态刷新页面样式
见 百度经验
http://jingyan.baidu.com/article/7f766dafbc18f24101e1d014.html
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 Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框
文章目录 JQuery Mobile基础 1. 页面与对话框 1.1 简单的helloworld 1.2 利用JQuery脚本DIY闪光灯效果 1.3 不断切换的场景 1.4 整人游戏 1.5 手机被 ...
- jQuery Mobile中页面page的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中页面page的data-*选项 带有 data-role="page&quo ...
- wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
- 使用ajax追加样式没,ajax-动态添加内容后,jQuery Mobile不应用样式
我知道这个问题出现在几个地方(迫使jQuery Mobile重新评估动态插入的内容的样式/主题),但是没有一个对我有用的答案. 我正在使用ajax加载一些内容,并将其插入到div中,如下所示: $.a ...
- jquery mobile将页面内容当成弹框进行显示
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 1 <div data-role="page" id="pageone"&g ...
- jquerymobile跳转方法_关于jquery mobile的页面跳转
展开全部 jm转场32313133353236313431303231363533e4b893e5b19e31333335323534传参确实是奇葩的东西,首先你要理解:如果采用changePage转 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...
- jQuery Mobile 笔记(1)- jQuery Mobile页面结构
jQuery Mobile页面解构 jQuery Mobile 的"页面"结构不同于传统的html页面,这样做是为了优化single page application的用户体验. ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (九) —— jQuery Mobile 页面与对话框
在<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 基础>中,Kayo 曾经简略介绍过 jQuery Mobile 的页面组件,当 ...
最新文章
- 基于存储过程的可扩展性数据访问框架
- GDI 和GDI+ 混合编程
- 关于maven依赖中的scopeprovided/scope使用
- JS_ECMA基本语法中的几种封装的小函数
- 在unity2d同屏显示9千人
- FZU Problem 2030 括号问题
- java string类api_java基础—String类型常用api
- 两阶段聚合(局部聚合+全局聚合)
- python-深浅拷贝
- Django Bootstrap开发笔记02 - 模板
- 用树莓派控制WS2812圣诞树灯饰
- 【天池大数据赛题解析】资金流入流出预测(附Top4答辩ppt)
- 同事去了友司,没什么可怕的
- 160个crackme 008 Andrénalin.1
- 微商怎么引流被加精准粉?微商有效引流被加方法
- markdown数学公式编辑指令大全
- 抖音短视频创业,抖音机房怎么样搭建?有哪些技巧
- Python简单词云的制作
- java的JVM虚拟机相关知识,简单易懂。
- Elmo NAACl 2018
热门文章
- Oracle19C的dbhome,Windows server 安装Oracle19c (WINDOWS.X64_193000_db_home.zip) 过程碰到的问题总结...
- linux部署多个tomcat服务,Linux 一台服务器部署多个tomcat
- hdu Caocao's Bridges(无向图边双连通分量,找出权值最小的桥)
- lua 字符串包含_Programming in Lualua学习第11期 Lua模块与包
- jsp mysql优点_asp、php、asp.net、jsp的介绍和各自的优缺点
- 如何在ps添加箭头_「PS精选案例教程」制作斑驳生锈字体
- php yii2 sns,GitHub - yggphpcoder/iisns: 基于 yii2 的 sns 社区系统,一站式解决社区建站...
- android 获取已安装 错误代码,android获取手机已经安装的app信息
- jdbc mysql分页_JDBC【数据库连接池、DbUtils框架、分页】
- sambd ERROR: job for smbd.service failed