2015-12-15 关于jquery mobile

第一次接触到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:               添加 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