Java程式教學甘仔店: [jQuery mobile]jquery mobile 使用 Create 及refresh

2013年4月10日星期三

[jQuery mobile]jquery mobile 使用 Create 及refresh

1、Create與及refresh：

創建事件和刷新方法有一個重要的區別需要注意
重要區別在一些widgets關系。
Create - 事件適合用於加強原始標記包含一個或多個widgets。
refresh - 方法應該使用現有的widgets（已增強）已編程操作和需要更新匹配的UI。

例如:
如果你有一個頁面，
在那裡你動態地追加一個新的無序列表與數據的 data-role=listview 屬性創建頁面後，
觸發父元素上創建，列表將它改造成一個ListView風格的小部件。
如果多個列表項，然後以編程方式添加，
調用ListView的刷新方法將更新這些新的列表項的強化狀態，
並保留現有的列表項目不變。

2、範例：
2.1 流程：
2.1.1、主頁面loginMember.html ，進入會有二個選項，為Test create 及Test refresh。
2.1.2、選擇Test create ，是將div id為#divData，載入createpage.html #data。
主要是測試，將更新大量的元件。
2.1.3、選擇Test refresh，是將div id為#divData，載入refreshpage.html #data。
主要是測試，將更新大量的元件後，在於其中更新部分元件。

如果將移除
$('#divData').trigger('create');
$('#divData').trigger('create').trigger('pagecreate');
其你更新的大量元件將沒有jQuery ui的效果。
2.2 程式
主頁面：
loginMember.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Menu Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<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/jquery-migrate-1.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

<script type="text/javascript">
$().ready(function(){
$("#createpage").live("click",function(){
$("#divData").empty();
$("#divData").load("createpage.html #data" , function() {$('#divData').trigger('create'); });
});
$("#refreshpage").live("click",function(){
$("#divData").empty();
$("#divData").load("refreshpage.html #data" , function() {$('#divData').trigger('create').trigger('pagecreate'); });
});
});

$('#listDemo').live('pagecreate', function() {
$('#withoutRefresh').on("click", function() {
$('ul').append('<li>list item</li>');
});
$('#withRefresh').on("click", function() {
$('ul').append('<li>list item</li>');
$('ul').listview('refresh');
});
$('#clear').on("click", function()
{
$('ul').empty();
});
});
</script>
</head>
<body>
<div id="listDemo" data-role="page">
<div data-role="header">
<h3><a href="#"id="createpage">Test create</a></h3>
<h3><a href="#"id="refreshpage">Test refresh</a></h3>
</div>

<div data-role="content" id="divData" align="left">
</div>
</div>
</body>
</html>

測試create 頁面：
createpage.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="data">
<div data-role="main" align="center">請選擇</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
</div>
<div><label for='account1'>帳號:</label><input type='text' /></div>
</div>
</body>
</html>

測試refresh 頁面：
refreshpage.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="data">
<input type="button" id="withoutRefresh" value="Add without refresh"/>
<input type="button" id="withRefresh" value="Add with refresh"/>
<ul data-role="listview" data-inset="true"></ul>
<input type="button" id="clear" value="Clear List"/>
</div>
</body>
</html>

3、畫面

程式執行畫面