jQuery Mobile动态刷新页面样式

jQuery Mobile动态刷新页面样式

当我们使用Ajax或者javascript动态在页面上添加元素后，如添加select控件的option元素，添加ul的li元素。添加之后显示的样式不是jQuery Mobile的样式了

在使用js或者jQuery获取控件（例如：button、checkbox、radiobutton等）的值或者动态赋值时，也是需要先刷新，否则无法更新最新的值

1、文本框/文本域动态刷新

代码：

//$('#div_test').html('');

$('#div_test').html('');

/*******其他文本类型也适用******/

$('#text').textinput();//动态刷新代码

2、普通button动态刷新

代码：

$('body').append('button');

$('#button').button();//动态刷新代码

3、特殊按钮/框动态刷新

（1）单选/复选

代码：

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

（2）滑块控件

代码：

$('#points').val(50).slider('refresh');

4、下拉列表

（1）普通下拉列表

代码：

$("#sel").html("111222");

$("#sel").selectmenu("refresh")//刷新

（2）切换开关

代码：

On

Off

varmyswitch = $("#switch");

myswitch.selectedIndex = 1;

myswitch .slider("refresh");

5、列表视图（ListView）

代码：

$("#list").html('

$("#list").listview('refresh');

6、导航栏（navbar）

首先需要了解的是，JQM默认没有提供navbar的刷新方法，需要手动补充

补充方式：

a、找到jquery的js文件，打开搜索“navbar”

b、在$.widget( "mobile.navbar", $.mobile.widget, {}中添加refresh函数

具体操作：在_create函数下方加一个refresh函数，代码如下：

refresh:function(){

this._create();

}

实际使用，代码及效果：

$("#nav").html('

• 首页
'+

'

• 页面二
• 搜索

$("#nav").navbar('refresh');//刷新

对单独界面或容器进行刷新/重建

当上面提及的刷新方案无效时，或者同一个界面或容器中同时需要对多个控件进行刷新，不妨尝试下

代码：

$(容器/界面/元素).trigger('create');

小结：

上面总结了，实际项目中出现频率较高的动态刷新方式，但在实际项目中可能还会遇到各种问题，欢迎大家留言交流！