jQuery Mobile - "in-page" Dialog Popup

Ich suche nach einer etwas raffinierten Lösung, um ein "In-Page" -Dialogfeld auf einer meiner JQM-Seiten zu haben. Ich versuche zu vermeiden, die Seite zu verlassen, weil der Dialog Popup eine "Suche" ist, die einem Benutzer hilft, ein Formularfeld aufzufüllen. Ich möchte die aktuelle Seite nicht verlassen, um keine anderen Informationen zu verlieren, die der Benutzer bereits eingegeben hat.jQuery Mobile - "in-page" Dialog Popup

Mein erster Versuch war die Verwendung des Simplydialog2-Plugins, das ich für Popup-Menüs in anderen Teilen der Website verwende. Während es für grundlegende Links gut funktioniert, wird es auf längeren Listen ziemlich klobig. Es fühlt sich sehr begrenzt an, wenn es um Größen und besonders Scrollen geht.

Ich mag die eingebaute JQM-Implementierung des Dialog-Popups für lange Multiselects. Um dir eine Idee zu geben, schau dir das an jsfiddle

Weiß jemand, wie dieses Dialog-Popup implementiert ist und ob ich die gleiche Methode in irgendeiner Weise aufrufen kann? Wenn nicht, kennt jemand Alternativen zu Pro, die einen solchen "In-Page-Dialog" erfordern?

Jede Hilfe wird geschätzt.

PS: Ich kann die mehrseitige Vorlage in JQM nicht verwenden, da die Website als Webanwendung erstellt wird und ich auf das Laden einzelner Seiten von AJAX angewiesen bin, was die mehrseitige Vorlage nicht unterstützt .

Quelle

2012-03-28 Steve

Der Dialog, den Sie in Ihrer Datei veranschaulicht haben, kann leicht auf einer eigenen Seite aufgerufen werden. Sie können entweder data-rel = "dialog" in ein Anker-Tag eingeben <a href="dialog.html">dialog</a> oder Sie können data-role="dialog" zu Ihrem Seitencontainer hinzufügen. Hier ist ein Beispiel

dialog.html

<div data-role="dialog"> 
    <div data-role="header"> 
     <h1>Header</h1> 
    </div> 
    <div data-role="content"> 

    </div> 
    <div data-role="footer"> 
     <h1>Footer</h1>   
    </div> 
</div>

Beachten Sie auch, dass sie sich auf die Herstellung der in Seite Dialoge planen Ich glaube, Ihre Suche in JQM v 1.2. Hier ist eine Vorschau auf diese http://filamentgroup.com/tests/popup/docs/pages/popup/index.html. Ich denke, wenn du wirklich geduldig bist, wirst du genau das bekommen, wonach du suchst.

Quelle

2012-03-28 21:56:30 codaniel

Ich weiß, dass ich den Dialog als eine neue Seite aufrufen können, aber das wäre die aktuelle Seite verlassen, die ich (wie alle eingegebenen Daten zu vermeiden, wollen in die Form wäre verloren). Der zweite Teil Ihrer Antwort ist genau das, wonach ich gesucht habe. Ich habe nicht viel Zeit zu warten, aber ich könnte nur eine temporäre Lösung implementieren und auf die Veröffentlichung von JQM 1.2 warten. Vielen Dank für die Info. – Steve

Sie können die vorherige Seite im Dom beibehalten, indem Sie data-dom-cache = "true" zum Seitencontainer hinzufügen. Auf diese Weise können Sie Javascript verwenden, um Ihr Formular zu aktualisieren. – codaniel

Ich verstehe nicht, warum der Dialog nicht wie ein Popup funktioniert, es ist so viel einfacher, weil Sie die Seite nicht ändern müssen (und alle Benutzer-Formulardaten verlieren) – DavidVdd

Hier brauchen Sie ein undismissible Popup und nicht einen Dialog.

<div data-dismissible="false" data-role="popup" id="myPopup"> 
    <span>Content...</span> 
</div>

Jetzt in JavaScript-Aufruf,

$('#myPopup').popup().popup('open');

Quelle

2014-03-23 09:37:08

jQuery Mobile - "in-page" Dialog Popup

Antwort

Verwandte Themen