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 相关文章推荐
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
js使用formData实现批量上传
Mar 27 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 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实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
JS跨域总结
2012/08/30 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python中实现控制小数点位数的方法
2019/01/24 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL