以下代码在 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>
如何使此对话框页面动态化，以便当用户单击唯一的 anchor 元素时，我可以替换“标题”和“主要”内容区域中的 html。我需要能够创建多个 anchor 标记，每个 anchor 标记都可以动态更改同一对话框页面的内容。例如:
<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>关于javascript - 在 jQuery Mobile 中创建动态对话框页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47957706/