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 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
JavaScript cookie原理及使用实例
May 08 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 Hash函数,增强密码安全
2011/02/25 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python3 replace()函数使用方法
2018/03/19 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
小学生作文评语
2014/04/18 职场文书
年度评优评先方案
2014/06/03 职场文书
销售团队口号大全
2014/06/06 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书