Question

以下代码在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>

Answer 1

您只需使用pagecontainerbeforeshow触发器：

＆＃13;

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();
  }
});

＆＃13;

<!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>

＆＃13;

在jQuery Mobile中创建动态对话框页面

1 个答案: