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 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
vue数据响应式原理知识点总结
Feb 16 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判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JS location几个方法小姐
2008/07/09 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
javascript动画浅析
2012/08/30 Javascript
JS实现div居中示例
2014/04/17 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
第一篇初识bootstrap
2016/06/21 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
管理心得体会
2013/12/28 职场文书
六查六看自查材料
2014/02/17 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python