neu lädt den ersten Daten-role = „Seite“ von anderem Daten-role = „page“

Question

Ich habe ein Formular mit drei verschiedenen data-role="page" mit drei verschiedenen data-url="abc".

Basierend auf einem gewissen Zustand Ich bin Rendering/Anzeige einig Felder auf der zweiten Seite nach dem Klicken auf die Schaltfläche auf der ersten Seite.

Jetzt bekomme ich die zweite Seite

<a id="123" class="xxx" href="#secondPageId" data-role="button">GoToNextScreen</a> 

nun in der zweiten Seite URL ich in der Lage kann http://www.test.com/index.html#secondPageId

, um zu sehen, wenn ich in der zweiten Seite bin Wenn ich den Browser aktualisieren,

Es zeigt alle verfügbaren Steuerelemente auf der zweiten Seite.

Aber ich brauche Anzeige nur wenige Felder basierend auf der Schaltfläche klicken.

Wie kann ich das tun?

Wenn das nicht möglich ist, dann gilt:

Während den Browser aktualisieren, indem Sie auf „Browser Refresh Button“ oder Drücken von F5 Ich brauche die #secondPageId aus der URL zu entfernen.

So dass ich zurück zur ersten Seite gehen kann.

Answer 1

Ich habe eine jsfiddle gemacht, die eine mögliche Lösung veranschaulicht. Grundsätzlich können Sie dies auf zwei Arten tun:

1. zunächst alle Elemente verstecken und verwenden jQuery die erforderlichen diejenigen bei pagechange zu zeigen.
2. Verbergen Sie zunächst nichts und verwenden Sie jQuery, um die erforderlichen Elemente bei pagechange auszublenden.

Die Geige verwendet die letztere.

HTML:

<div data-role="page" id="first"> 
    <div data-role="header"> 
    <h3> 
     First Page 
     <a id='Goto_page2' class='ui-btn-right ui-btn ui-corner-all ui-shadow'>NEXT</a> 
    </h3> 
    </div> 
    <div data-role="content"> 
    <p> 
     Please go to next page. 
    </p> 
    </div> 
</div> 

<div data-role="page" id="second"> 
    <div data-role="header"> 
    <h3> 
     Second Page 
     <a href='#first' class='ui-btn-left ui-btn ui-corner-all ui-shadow'>HOME</a> 
    </h3> 
    </div> 
    <div data-role="content"> 
    <div> 
     <p class="tobehidden"> 
     This text was visible, but has been made hidden. 
     </p> 
    </div> 
    <div> 
     <p> 
     This text only is visible. 
     </p> 
    </div> 
    <div class="tobehidden"> 
     <h4> 
     This text was also visible, but has now been made hidden. 
     </h4> 
    </div> 
    </div> 

</div> 

jQuery:

$(document).ready(function(e) { 

    //Change to first page at load 
    $(":mobile-pagecontainer").pagecontainer("change", "#first"); 

    /* 
    * Read more about page handling here: 
    * http://api.jquerymobile.com/pagecontainer/#method-change 
    */ 

    //Click event for the "NEXT" button 
    $(document).on("click", "#Goto_page2", function(){ 

    //Hide elements that has the class "tobehidden" 
    $(".tobehidden").hide(); 

    //Switch to page 2 
    $(":mobile-pagecontainer").pagecontainer("change", "#second"); 
    }); 
});