Wechsel zwischen Quer- und Hochformatansichten in JQuery Mobile

Question

Ich arbeite an einer JQuery Mobile App. Je nachdem, ob sich das Gerät im Quer- oder Hochformat befindet, hat meine App unterschiedliche Ansichten derselben Daten. Derzeit erkenne ich diese Änderung mit dem folgenden Code:

$(window).bind("orientationchange", function (e, ui) { 
    alert("orientation changed: " + e.orientation); 
}); 

Von hier aus bin ich mir nicht sicher, wohin ich gehen soll. Ich möchte meine Ansichten ändern. Allerdings möchte ich die Ansicht nicht so laden, wie ich möchte, dass sie so schnell wie möglich ist. Wie zeige ich verschiedene Ansichten basierend auf der Ausrichtung? Wie sieht das HTML aus? Ich weiß, dass eine einzelne Ansicht wie folgt definiert ist:

<div id="myPage" data-role="page"> 
    <div data-role="header"> 
    <a href="#" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left jqm-home">Back</a> 
    <h1>My App</h1> 
    </div> 

    <div data-role="content"> 
    <!-- Page content goes here --> 
    </div> 
</div> 

Vielen Dank für Ihre Hilfe.

Answer 1

Erstellen Sie ein mehrseitiges Layout, bei dem eine Seite die Hochformatansicht und die andere die Querformatansicht hat. Rufen Sie dann $.changePage() auf, um zwischen ihnen unter orientationChange zu wechseln.