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 相关文章推荐
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Javascript中的arguments对象
Jun 20 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP SOCKET编程详解
2015/05/22 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
python实现八大排序算法(2)
2017/09/14 Python
python将list转为matrix的方法
2018/12/12 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
环保标语大全
2014/06/12 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
2014年班组长工作总结
2014/11/20 职场文书
小学德育工作总结2015
2015/05/12 职场文书