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优化尝试小结
Feb 06 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 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
JS实现php的伪分页
2008/05/25 PHP
PHP重定向的3种方式
2013/03/07 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
深入理解Python3 内置函数大全
2017/11/23 Python
python写一个md5解密器示例
2018/02/23 Python
python实现飞行棋游戏
2020/02/05 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
C语言编程练习
2012/04/02 面试题
关于感恩的演讲稿500字
2014/08/26 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Python装饰器的练习题
2021/11/23 Python