jQuery Mobile动态刷新页面样式的实现方法


Posted in Javascript onMay 28, 2016

当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素。添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样式了,而变成了很丑陋的元素样式。如下图所示:

 jQuery Mobile动态刷新页面样式的实现方法

代码如下:

<script>
      function myFunction() {
        var ul = document.getElementById("myul");
        var li1 = "<li data-role=\"fieldcontain\">信息2</li>";
        var li2 = "<li data-role=\"fieldcontain\">信息3</li>";
        ul.innerHTML += li1;
        ul.innerHTML += li2;
      }
    </script>

    <!-- listview测试 -->
     <ul data-role="listview" data-inset="true" id="myul">
         <li data-role="list-divider">信息列表</li>
         <li data-role="fieldcontain">信息1</li>
     </ul>

可以看到,jQuery Mobile并没有对于新添加的元素进行渲染。这种情况下就需要对元素的样式进行刷新。

刷新代码如下:

<script>
      function myFunction() {
        var ul = document.getElementById("myul");
        var li1 = "<li data-role=\"fieldcontain\">信息2</li>";
        var li2 = "<li data-role=\"fieldcontain\">信息3</li>";
        ul.innerHTML += li1;
        ul.innerHTML += li2;
        
        //刷新jQuery Mobile样式
        $('#myul').listview('refresh');
      }
    </script>

其实最重要的一句刷新代码是:$('#myul').listview('refresh');

刷新后的效果如下图所示:

 

jQuery Mobile动态刷新页面样式的实现方法

注意:在使用js或者jQuery获取控件(例如:button、checkbox、radiobutton等)的值时,也是需要先刷新,否则无法获取到最新的值。

下面列出常用的标签的refresh操作,其他的可以举一反三。

1.  Listview的refresh操作:

$('#mylistid').listview('refresh');

2. select menu的refresh操作:

var myselect = $("#myselect");

myselect[0].selectedIndex = 2;

myselect.selectmenu("refresh");

3. Checkboxes的refresh操作:

$("#mycheckboxid").attr("checked",true).checkboxradio("refresh");

4. Radio buttons的refresh操作:

$("#myradioid").attr("checked",true).checkboxradio("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">Flipswitch:</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"/>
     <labelfor="radio-view-a">List</label>
     <input type="radio"name="radio-view"value="grid"/>
     <labelfor="radio-view-b">Grid</label>
     <input type="radio"name="radio-view"value="gallery"/>
     <labelfor="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 相关文章推荐
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
javascript基础知识讲解
Jan 11 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
js Proxy的原理详解
May 25 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 #Javascript
jQuery操作动态生成的内容的方法
May 28 #Javascript
javascript 用函数实现继承详解
May 28 #Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 #Javascript
jQuery实现布局高宽自适应的简单实例
May 28 #Javascript
jquery mobile界面数据刷新的实现方法
May 28 #Javascript
jquery自适应布局的简单实例
May 28 #Javascript
You might like
一个简单的PHP入门源程序
2006/10/09 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
小学社会实践活动总结
2014/07/03 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python
MySQL系列之六 用户与授权
2021/07/02 MySQL