我有一個主頁面，它有多個鏈接到第二個頁面。根據所點擊的鏈接，第二個頁面需要顯示不同的標題（這一部分我已經完成）。在新的頁面上，是一個表單。該表單需要能夠將輸入保存到localStorage。JQuery-mobile多頁表單

我的問題是，我不知道如何使表單行爲像幾種形式（因爲有大約5個不同的鏈接）。用戶應該只看到相同的表單（根據外觀），但表單需要保存該特定頁面的數據。

說，我的主頁上有鏈接A，B，C。這些將用戶帶到相同的＃page2。在＃page2是一個表單，一個將表單數據保存到localStorage的鏈接，以及一個檢索表單數據的鏈接。用戶需要能夠保存鏈接A和B以及C的許多記錄（當用戶從鏈接A查看錶格數據時，應該至少爲他們提供A的最近六個條目）。

我將如何能夠實現上述目標？

來源

2016-04-22 Christn

因爲一切都在一個html頁面中發生，所以您可以爲當前表單設置一個全局javascript變量，或將其設置爲page2 div上的data-attribute。每次單擊一個鏈接以及設置頁面2的標題時，將全局變量設置爲表單。然後，在保存表單時，使用全局變量來指定一個唯一的本地存儲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", { }); 
    }); 
})

DEMO

來源

2016-04-22 13:32:27 ezanker

JQuery-mobile多頁表單

回答

DEMO

相關問題