您的位置：首页 > Web前端 > JQuery

js动态添加元素之后jquery mobile不能正确渲染解决方法 和 JM checked全选反选

2015-07-14 16:13 1166 查看
jquerymobile动态添加元素之后有些不能被正确渲染的解决方法：
listview： 添加 jq(".detail").listview("refresh");
div或其他：添加.trigger( "create" );

create事件适用范围广，甚至可以是 不存在的元素(raw markup?)，比如要插入一个按钮

$('<a data-role="button">dy button</a>').appendTo('#content').trigger('create');

有些对象提供了refresh 方法，如listview、flip toggle。与create的区别是refresh方法需要作用在已存在的对象上，如

$('ul').listview('refresh')，而且refresh只会去更新新加入的元素，如listview里最新append的元素会更新，原有的保持不变。

不使用jqm样式：

如果不希望jqm自动初始化你的元素，有两种方法。加入data-role="none"属性，或者在mobileinit事件中对keepNative选项进行配置

$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});


关于jquery mobile checked全选反选的操作 与jquery的操作不同

$("[name=checkReason]:checkbox").filter(':checkbox').prop('checked', false).checkboxradio("refresh");


jquery mobile列表远程数据的自动过滤 listviewbeforefilter

<!DOCTYPE html>
<html>
<head>
<title> Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script>
<script>
$( document ).on( "pageinit", "#myPage", function() {
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length >  2 ) {
$ul.html( "<li> <div class='ui-loader'> <span class='ui-icon ui-icon-loading'> </span> </div> </li> " );
$ul.listview( "refresh" );
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
html += "<li> " + val + "</li> ";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
</script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 1035px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 1035px;
}
.ui-content{
padding:10px 15px 0px 15px;
}
.ui-listview-filter-inset {
margin-top: 0;
}
</style>
</head>
<body>
<div data-role="page" id="myPage" style="max-height:1040px; min-height:1040px;">
<div data-role="content" >
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"> </ul>
</div>
</div>
</div>
</body>
</html>


默认是查出全部

输入搜索姓名以后模糊查询
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航