在jQuery Mobile中创建动态对话框页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在jQuery Mobile中创建动态对话框页面相关的知识，希望对你有一定的参考价值。
以下代码在jQuery Mobile中创建一个对话框页面：
<div data-role="page" id="dialogPage" data-dialog="true" data-theme="b" data-close-btn="right">
<div data-role="header">
<h2> replace html </h2>
</div>
<div role="main" class="ui-content">
<p> replace html </p>
<a href="#" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">close dialog page</a>
</div>
</div>
该页面目前被调用：
<a href="#dialogPage" data-transition="none">open dialog page</a>
如何使此对话框页面动态化，以便在用户单击唯一锚元素时替换“标题”和“主要”内容区域中的html。我需要能够创建多个锚标签，每个锚标签可以动态地改变同一对话框页面的内容。例如：
<a href="#button1" data-transition="none">button1</a>
<a href="#button2" data-transition="none">button2</a>
答案
你只需要使用pagecontainerbeforeshow触发器：
var data = {
"dialog-1": {
title: "Choose one:",
content: [
'<fieldset data-role="controlgroup" data-type="horizontal">',
'<legend>Horizontal controlgroup, checkbox:</legend>',
'<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">',
'<label for="checkbox-h-2a">One</label>',
'<input name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">',
'<label for="checkbox-h-2b">Two</label>',
'<input name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">',
'<label for="checkbox-h-2c">Three</label>',
'</fieldset>'
].join("")
},
"dialog-2": {
title: "Search:",
content: [
'<label for="search-2">Search Input:</label>',
'<input name="search-2" id="search-2" value="" type="search">'
].join("")
}
},
calle = "";
$(document).on("vclick", "a[data-dialog]", function(e) {
calle = $(this).data("dialog");
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
var pageId = ui.toPage.attr("id");
if (pageId == "dialogPage") {
$("#dialogPage .ui-title").text(data[calle].title);
$("#dialogContent").html(data[calle].content);
$("#dialogPage").enhanceWithin();
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-theme="a" data-role="header" data-position="fixed">
<h2>List Page</h2>
</div>
<div data-role="content">
<a class="ui-btn ui-btn-inline" href="#dialogPage" data-dialog="dialog-1" data-transition="none">Callee 1</a>
<a class="ui-btn ui-btn-inline" href="#dialogPage" data-dialog="dialog-2" data-transition="none">Callee 2</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Footer</h3>
</div>
</div>
<div data-role="page" id="dialogPage" data-dialog="true" data-theme="b" data-close-btn="right">
<div data-role="header">
<h2> replace html </h2>
</div>
<div role="main" class="ui-content ui-page-theme-b">
<div id="dialogContent"> replace html </div>
<a href="pg_2" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">close dialog page</a>
</div>
</div>
</body>
</html>以上是关于在jQuery Mobile中创建动态对话框页面的主要内容，如果未能解决你的问题，请参考以下文章
jquery datatable - “jqueryui modal”正在页面中创建重复的对话框 html