摘要:[jQuery Mobile]動態產生JQM控制項
在JQM中當要動態產生新的控制項的時候,除了要添加對應的HTML之外,還需要呼叫page本身的create事件來重製頁面的控制項,如此一來才能成功呈現!
這邊做了一個簡單的範例透過按下按鈕來動態產生更多按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Panels - jQuery Mobile Demos</title>
<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.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
function addBtn(){
var btnIndex=$('#buttonList').children().length;
$('#buttonList').append('<button data-theme="b" value="動態產生的按鈕'+(++btnIndex)+'" ></button>');
$('#index').trigger('create');
}
</script>
</head>
<body>
<!--首頁-->
<div data-role="page" id="index">
<div data-role="content">
<button value="產生" data-theme="e" onclick="addBtn();" ></button>
<div id="buttonList">
</div>
</div>
</div>
</body>
</html>
如果覺得文章還不錯麻煩請在文章最上面給予推薦,你的支持是小弟繼續努力產出的動力!