jQuery Mobile动态刷新页面样式

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

代码如下:

[html] view plain copy

  1. <script>
  2. function myFunction() {
  3. var ul = document.getElementById("myul");
  4. var li1 = "<li data-role=\"fieldcontain\">信息2</li>";
  5. var li2 = "<li data-role=\"fieldcontain\">信息3</li>";
  6. ul.innerHTML += li1;
  7. ul.innerHTML += li2;
  8. }
  9. </script>
  10. <!-- listview测试 -->
  11. <ul data-role="listview" data-inset="true" id="myul">
  12. <li data-role="list-divider">信息列表</li>
  13. <li data-role="fieldcontain">信息1</li>
  14. </ul>

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

刷新代码如下:

[html] view plain copy

  1. <script>
  2. function myFunction() {
  3. var ul = document.getElementById("myul");
  4. var li1 = "<li data-role=\"fieldcontain\">信息2</li>";
  5. var li2 = "<li data-role=\"fieldcontain\">信息3</li>";
  6. ul.innerHTML += li1;
  7. ul.innerHTML += li2;
  8. //刷新jQuery Mobile样式
  9. $(‘#myul‘).listview(‘refresh‘);
  10. }
  11. </script>

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

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

注意:在使用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");

新加的:来自:http://hi.baidu.com/life_to_you/item/bf3621365fa5974b033edcbc

各类标签的刷新

1.Textarea fields


1

2

$(‘body‘).prepend(‘<textarea id="myTextArea"></textarea>‘);

$(‘#myTextArea‘).textinput();

2.Text input fields


1

2

$(‘body‘).prepend(‘<input type="text" id="myTextField" />‘);

$(‘#myTextField‘).textinput();

3.Buttons


1

2

$(‘body‘).append(‘<a href="" data-theme="e" id="myNewButton">testing</a>‘);

$(‘#myNewButton‘).button();

4.Combobox or select dropdowns


1

2

3

4

5

6

7

8

9

10

<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


1

2

3

4

5

6

7

<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


1

2

3

4

5

6

<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


1

2

3

4

5

6

7

8

9

10

11

<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


1

2

3

4

5

6

7

8

9

10

11

12

13

<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


1

2

3

4

5

6

7

8

9

<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‘);

时间: 2024-11-09 15:41:58

jQuery Mobile动态刷新页面样式的相关文章

JQuery Mobile的页面

1.JQuery Mobile的页面结构如下图: page:是在浏览器中显示的页面 header:创建页面上方的工具栏(常用于标题和搜索按钮) content:定义了页面的内容,比如文本, 图片,表单,按钮等 footer:用于创建页面底部工具条 2.页面的加载 JQM的默认链接请求方式是ajax,为了不重新渲染整个页面和减少传输数据量,只是部门加载页面,也就是指加载另外一个页面上面提到的page中的内容. 下面是两个html页面,启动的是第一个页面 这时浏览器显示的内如如下,第二个page被隐

jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head > 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>验证加载顺序</title> 5 <s

jQuery改变html页面样式

  1.用css()方法返回元素的样式属性 $("div").css("padding-left")); 2.用css()设置样式 $("div").css("color","yellow"); 3.设置多个样式 $("div").css({"background-color":"yellow","font-size":&quo

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面事件与 deferred

在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件,而页面事件由于事件数较多,并且涉及 jQuery 中一个比较复杂的对象 deferred ,因此在本文中单独说明.jQuery Mobile 页面事件使用分为页面加载事件 (Page load events),页面跳转事件 (Page change events),页面显示/隐藏事件 (

jQuery mobile 监听页面的各种生命周期

一.pagebeforecreate 1.触发时机: 在页面初始化及jQuery Mobile在开始对页面进行增强之前触发. 注意: 该事件在每个页面中只能触发一次 - 在页面第一次载入时, jQuery Mobile 会在 DOM (内存)缓存页 面, 所以当你通过浏览器从第二个页面回退第一个页面时,该事件将不会被触发, 这是因为第一页面已经被初始化 了. 2.监听方式: $(document).on("pagebeforecreate","#page1",fun

jquery mobile 教程

简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代

一个简单的特效引发的大战之移动开发中我为什么放弃jquery mobile

我本想安静的做一个美男子,可是,老板不涨工资,反而,一月不如一月. 我为什么放弃jquery mobile插件选择自己写特效? 在开发中大家都知道效率很重要,一个好的工具可以在开发中大大提升效率,工作做的越多,相应的取得的报酬也就越多,相反就是我自己了. 最近一直在一件事情上,移动线上网站测试必须符合3星,将不合格的网站调优后保证3星,方便线上推广,难免会遇见一些问题,大致为题后期会写一篇随笔总结,“移动开发中网站如何优化”.其中遇见的一个问题就是JS文件过大,CSS文件过大,之前项目一直使用的

jQuery Mobile 手动显示ajax加载器,提示加载中...

在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大致流程如下: 1. 启动加载器,显示“加载中...”: 2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式: 3. 关闭加载器. 下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法(很简单,几行代码就OK了!). 首先是jQ

移动框架jQuery Mobile入门

jQuery Mobile使用指南 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上