[jQuery Mobile]動態產生JQM控制項

摘要:[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>


如果覺得文章還不錯麻煩請在文章最上面給予推薦,你的支持是小弟繼續努力產出的動力!