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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
php实现记事本案例
2020/10/20 PHP
jquery maxlength使用说明
2011/09/09 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Python中join和split用法实例
2015/04/14 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python和opencv实现抠图
2018/07/18 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python实现图片压缩代码实例
2019/08/12 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
庆六一活动总结
2014/08/29 职场文书
工作经验交流材料
2014/12/30 职场文书
离职感谢信
2015/01/21 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
离婚纠纷代理词
2015/05/23 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
学校学期工作总结
2015/08/13 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python