的 DEMO

Question

我有一个主页面，其中包含指向第二页的多个链接。根据点击的链接，第二页需要显示不同的标题（这部分我已经完成）。在新页面上，是一个表单。此表单需要能够将输入保存到localStorage。

我的问题是我不知道如何使表单表现得像几种形式（因为有大约5个不同的链接）。用户应该只看到相同的表单（就外观而言），但表单需要保存该特定页面的数据。

说，我的主页上有链接A，B，C。这些将用户带到相同的＃page2。在＃page2上是一个表单，一个将表单数据保存到localStorage的链接，以及一个用于检索表单数据的链接。用户需要能够为链接A和B以及C保存大量记录（当用户从链接A查看表单数据时，它应该至少为A提供过去的六个条目。）

我如何才能实现上述目标？

Answer 1

由于所有内容都发生在一个html页面中，您可以为当前表单创建一个全局javascript变量，或者将其设置为page2 div上的数据属性。每次单击链接以及设置第2页的标题时，请将全局变量设置为表单。然后在保存表单时，使用全局变量指定唯一的localstorage id。

例如，如果您有3个这样的链接：

  <div data-role="navbar" id="thenav">
      <ul>
        <li><a href="#page2" data-formid="form1" data-header="The Form 1">Form1</a></li>
        <li><a href="#page2" data-formid="form2" data-header="The Form 2">Form2</a></li>
        <li><a href="#page2" data-formid="form3" data-header="The Form 3">Form3</a></li>
      </ul>
  </div>

和第2页

<div data-role="page" id="page2">
     <div data-role="header" id="page2header" data-add-back-btn="true">
        <h1>My page 2</h1> 
    </div>  
    <div id="cont" role="main" class="ui-content">
      <label for="text-basic">Text input:</label><input type="text" name="text-basic" id="text-basic" value="">
      <button id="btnSave">Save</button>
    </div> 
</div>

然后在脚本中

var formid = '';
$(document).on("pagecreate","#page1", function(){ 
    $("#thenav a").on("click", function(e){
    $("#page2header h1").text($(this).jqmData("header"));
    formid = $(this).jqmData("formid")
  });
});  

$(document).on("pageshow","#page2", function(){ 
  //get from locastorage
  $("#text-basic").val("");
  var t = localStorage.getItem(formid);
  if (t && t != "undefined"){
    $("#text-basic").val(t);
  }
}); 

$(document).on("pagecreate","#page2", function(){ 
    $("#btnSave").on("click", function(e){
    //save to local storage
    var t = $("#text-basic").val();
    localStorage.setItem(formid, t);
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page1", {  } );
  });
})

JQuery-移动多页形式

1 个答案:

的 DEMO