在 Jquery mobile 的一个页面中包含几页
Posted
技术标签:
【中文标题】在 Jquery mobile 的一个页面中包含几页【英文标题】：Include a few pages in one page in Jquery mobile 【发布时间】：2013-03-11 00:14:30 【问题描述】：我正在使用 jquery mobile 开发一个应用程序。在最终提交表单之前，我需要在一个预览页面中包含几页。
这是关于我的应用程序的基本想法。它需要至少 10-15 个表格来收集用户的数据。我的 html 看起来像这样：
<html>
<head>
<title>Title</title>
</head>
<body>
<div data-role="page" id="login-page">
</div>
<div data-role="page" id="form1-page">
<!-- CONTENT -->
</div>
<div data-role="page" id="form2-page">
<!-- CONTENT -->
</div>
<div data-role="page" id="preview-page">
<!-- CONTENT -->
</div>
</body>
</html>
我已将我的预览按钮链接到预览页面。问题是，我想在预览页面中动态包含所有表单页面的填充值。
谁能帮我解决这个问题？
P.S：我已经尝试过 google。我找到了this 的答案。但可能是我误解了一些东西，因为它在我的情况下不起作用。
注意：我在 android webview 中呈现这个。
【问题讨论】：
“动态包含该页面中的所有表单页面”是什么意思？您的意思是最终用户为每个表单输入的内容？ @PhillPafford 是的。我想在最终提交之前显示所有表单的所有详细信息作为预览。 我会查看 html5 webstorage w3schools.com/html/html5_webstorage.asp 将每个表单结果保存到其中并在最后一页检索它们 【参考方案1】：终于，我实现了我想要的。这并不难。我不明白为什么有人不能给出任何提示！ :(
我在这里发布我的答案，以便将来可以帮助解决类似问题的人。
首先，我在 .js 文件中添加了以下内容。
$("#preview-page").live('pageinit', function()
$('#divPage1Preview').html($('#page1-content').clone());
$('#divPage2Preview').html($('#page2-content').clone());
);
这里，divPage1Preview、divPage2Preview 是在preview-page 表单中定义的空白 div。
而page1-content、page2-content 是form1-page 和form2-page 中内容div 的ID。
由此，我可以获取所有字段，但不能获取其中的值。所以我改变了我的html有点像：
<div data-role="content" id ="page1-content" data-dom-cache="true">
<div data-role="content" id ="page2-content" data-dom-cache="true">
所以现在它可以按照我的要求工作了。
希望这对将来的某人有所帮助。 :)
【讨论】：
【参考方案2】：也许将表格分成更小的部分是最好的。每个页面都有一个 ID 为 form-part-# 的表单。每个表单提交时，都会验证当前表单，将表单数据作为隐藏元素添加到最后一个表单中，然后调用$.mobile.changePage();
【讨论】：
感谢您的回复。如果我找不到任何其他选择，我将不得不这样做。但问题是我在每个表单中都有大约 100 个字段。和15个这样的表格。因此，如果我能在预览页面中包含表单本身而不是字段，那就更好了。 您要求移动用户填写 1500 个字段？这是一个相当大的承诺，即使他们只是在扫描要检查的框。 @SurrealDreams 我不是要求用户填写 1500 个字段。是客户的要求。他们有很多领域要记录。我们不能减少它们:( 如果客户需要，您必须交付...我必须感谢您制作了如此庞大的表格集。调试的时候祝你好运，希望一切顺利。 @SurrealDreams 谢谢。我肯定需要那个。关于动态包含页面的任何想法？以上是关于在 Jquery mobile 的一个页面中包含几页的主要内容，如果未能解决你的问题，请参考以下文章
使用 Browserify 在 Node JS 项目中包含 JQuery Mobile