jquerymobile局部渲染的各种刷新

我就是我 2022-08-06 03:23 107阅读 0赞

jquerymobile局部渲染的各种刷新  
    在JQueryMobile页面在第一次初始化进行一次整体渲染，动态生成的需要局部渲染。  
在jquerymobile实现listview局部渲染的方法：

备注：  
  listview针对jquerymobile针对listview组件刷新。  
   
    $("div\[data-role=content\] ul").listview();     
如果想针对listview内部的li刷新可以使用  
   $("div\[data-role=content\] ul li").listview("refresh");  
否则报错误如下：  
jquerymobile listviewcannot call methods on listview prior to initialization; attempted to call method 'refresh'  
   
jquerymobile checkbox及时刷新才能获取其准确值  
   
一般登录的时候 都有个记住用户名 记住密码 的两个checkbox 多选框  
  
  
用jquerymobile 做页面 ，当勾选checkbox 时总是不能获取它正确的值。  
  
  
解决办法：    
  
  
$('input\[type="checkbox"\]').bind('click',function() \{  
       $(this).prop('checked').checkboxradio("refresh");   // 绑定事件及时更新checkbox的checked值  
  \});  
  
  
如果要用js去改变checkbox的值时也要及时刷新。   
  
  
$('input \[type="checkbox"\]').attr('checked',false).checkboxradio("refresh");  
  
  
$('input \[type="checkbox"\]').attr('checked',false).checkboxradio("refresh");   
  
  
原因： 因为手动改变它的值后，jquerymobile不能重新渲染。 这样页面显示的值和实际值就不一样了。 （jquerymobile 把form表单元素都隐藏起来，然后用 js添加了一些元素易于美化input, select ,textarea 等元素的效果）  
  
  
    
下拉框刷新  
$("\#selectbox").html(optionList).selectmenu('refresh', true);  
   
  
  
复选按钮  
$("input\[type='checkbox'\]").attr("checked",true).checkboxradio("refresh");  
   
单选按钮组:  
$("input\[type='radio'\]").attr("checked",true).checkboxradio("refresh");  
   
选择列表::  
var myselect = $("select\#foo");  
myselect\[0\].selectedIndex = 3;  
myselect.selectmenu("refresh");   
   
滑动条  
$("input\[type=range\]").val(60).slider("refresh");  
   
开关 (they use slider):  
var myswitch = $("select\#bar");  
myswitch\[0\].selectedIndex = 1;  
myswitch .slider("refresh");  
   
select 禁用样式  
<select id="select-choice-1" class="mobile-selectmenu-disabled ui-state-disabled" disabled="disabled" name="select-choice-1" aria-disabled="true">  
<option value="standard">Standard: 7 day</option>  
<option value="rush">Rush: 3 days</option>  
<option value="express">Express: next day</option>  
<option value="overnight">Overnight</option>  
</select>  
button禁用样式  
<input class="ui-btn-hidden mobile-button-disabled ui-state-disabled" type="button" disabled="disabled" value="不可用" aria-disabled="true">