jquerymobile局部渲染的各种刷新方法小结


Posted in Javascript onMarch 05, 2014

在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染。

在jquerymobile实现listview局部渲染的方法:

function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){  
    var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.svc/WorkOrderSimpSelByType/Json/"+trackOrDealOrInsp+"/"+userCode+"/"+type+"/"+pageNum;  
    $.ajax({  
        type: 'get',  
        dataType : "json",  
        url: queryPublishOrderListURL,  
        contentType: 'application/json',  
        data: [],  
        success: function(data) {  
              var sb = new StringBuffer();   
              $.each(data, function(i,item){  
                 //创建一个工单列表行对象  
                sb.append("<ul data-role='listview' data-inset='true' data-theme='c' data-pidertheme='b' >");  
                sb.append("<li data-role='list-pider'> "+item.work_orders_id+"<span class='ui-li-count'>"+i+"</span></li>");  
                sb.append("<li><a id='"+item.work_orders_id+"' href='inspectorder.html' >");  
                sb.append("<p data-role='fieldcontain' ><label for='work_orders_id'>工单号:</label><span id='work_orders_id'>"+item.work_orders_id+"</span></p>");  
                sb.append("<p data-role='fieldcontain'><label for='founder_na'>创建人:</label><span id='founder_na'>"+item.founder_na+"</span></p>");  
                sb.append("<p data-role='fieldcontain'><label for='found_time'>创建时间:</label><span id='found_time'>"+item.found_time+"</span></p>");  
                sb.append("<p data-role='fieldcontain'><label for='type_na'>工单类型:</label><span id='type_na'>"+item.type_na+"</span><img  src='../../images/beforeforward.png' style='float: right'/></p>");  
                sb.append("<p data-role='fieldcontain'><label  for='work_cont'>工单内容:</label><span id='work_cont'>"+item.work_cont+"</span></p>");  
                sb.append("</a></li>");  
                sb.append("</ul>");  
              });  
              var content = sb.toString();   
                 $("#queryList").html(content);  
        },  
        error:function(XMLHttpRequest, textStatus, errorThrown){  
                alert("请求远程服务错误!");  
        },  
        complete: function() {      
              $("p[data-role=content] ul").listview();            
        }    
    });  
} 

备注:

listview针对jquerymobile针对listview组件刷新。

$("p[data-role=content] ul").listview();  

如果想针对listview内部的li刷新可以使用

$("p[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 时总是不能获取它正确的值。  
解决办法:    
[code]
$('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 等元素的效果)
[/code]
下拉框刷新

$("#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-disableddisabled="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">

Javascript 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 #Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 #Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 #Javascript
js判断ie版本号的简单实现代码
Mar 05 #Javascript
浅析tr的隐藏和显示问题
Mar 05 #Javascript
jQuery性能优化的38个建议
Mar 04 #Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 #Javascript
You might like
php FPDF类库应用实现代码
2009/03/20 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php数组随机排序实现方法
2015/06/13 PHP
php实现微信公众号无限群发
2015/10/11 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
JavaScript版代码高亮
2006/06/26 Javascript
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
python调用java的Webservice示例
2014/03/10 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python实现的堆排序算法示例
2018/04/29 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
python实现代码审查自动回复消息
2021/02/01 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
网络安全类面试题
2015/08/01 面试题
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
工程索赔意向书
2014/08/30 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android