第一次接触到jquery mobile 。在解析服务器返回的json数据时发现仅仅向对应的div 里面填充返回的数据和html代码并没有达到之前的效果。很多样式都不见了。。。
百度后知道
“jqm在初始化页面时会根据data-xxx在各元素中插入jqm的属性和类等。在页面初始化结束后,如果动态的插入一个元素,往往显示很丑陋,因为没有插入jqm的样式。这个可以用浏览器里的开发工具来查看,会发现有些元素多了很多类,而动态插入的元素代码还是你写的那样子。”
示例:
$(document).ready(function(){
$.ajax({
url:"/deliveryMan/servlet/Loadwaittask",
dataType:"json",
success:function(data){
var res=data;
//。。。。。这里是对json数据的获取和样式的拼接
});
$('#wait_taskList').empty();
$('#wait_taskList').html(res);
$('#wait_taskList').trigger( "create" );//关键是添加这句代码。对动态的生成的div及其内容进行渲染。
}
});
});
发现2:不同的控件有不同的渲染方法
listview:
百度后知道
“jqm在初始化页面时会根据data-xxx在各元素中插入jqm的属性和类等。在页面初始化结束后,如果动态的插入一个元素,往往显示很丑陋,因为没有插入jqm的样式。这个可以用浏览器里的开发工具来查看,会发现有些元素多了很多类,而动态插入的元素代码还是你写的那样子。”
示例:
$(document).ready(function(){
$.ajax({
url:"/deliveryMan/servlet/Loadwaittask",
dataType:"json",
success:function(data){
var res=data;
//。。。。。这里是对json数据的获取和样式的拼接
});
$('#wait_taskList').empty();
$('#wait_taskList').html(res);
$('#wait_taskList').trigger( "create" );//关键是添加这句代码。对动态的生成的div及其内容进行渲染。
}
});
});
发现2:不同的控件有不同的渲染方法
listview: 添加 jq(".detail").listview("refresh");
div或其他: 添加.trigger( "create" );
js 包的引入一定要在jquery mobile之前,否则效果出不来
其他控件的渲染
1、Combobox or select dropdowns
var myselect = $("#sCountry");
myselect[0].selectedIndex = 3;
myselect.selectmenu('refresh');
or$( ".selector" ).selectmenu( "refresh", true )
2、Listviews
$('#mylist').listview('refresh');
3、Slider control
$('#slider').val(80).slider('refresh');
4、Toggle switch
var myswitch = $("#toggle");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
5、Radio buttons
$("input[value=grid]").attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );
6、Checkboxes
$('#checkbox-1').attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );
7、Buttons
$( "[type='submit']" ).button( "refresh" );
or
$( ".selector" ).buttonMarkup( "refresh" );
8、Column-Toggle Table
$( ".selector" ).table-columntoggle( "refresh" );
9、Reflow Table
$( ".selector" ).table( "refresh" );
补一个教程
http://demos.jquerymobile.com/1.2.0/docs/forms/selects/methods.html
其他控件的渲染
1、Combobox or select dropdowns
var myselect = $("#sCountry");
myselect[0].selectedIndex = 3;
myselect.selectmenu('refresh');
or$( ".selector" ).selectmenu( "refresh", true )
2、Listviews
$('#mylist').listview('refresh');
3、Slider control
$('#slider').val(80).slider('refresh');
4、Toggle switch
var myswitch = $("#toggle");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
5、Radio buttons
$("input[value=grid]").attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );
6、Checkboxes
$('#checkbox-1').attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );
7、Buttons
$( "[type='submit']" ).button( "refresh" );
or
$( ".selector" ).buttonMarkup( "refresh" );
8、Column-Toggle Table
$( ".selector" ).table-columntoggle( "refresh" );
9、Reflow Table
$( ".selector" ).table( "refresh" );
补一个教程
http://demos.jquerymobile.com/1.2.0/docs/forms/selects/methods.html