Ich habe mich gefragt, wie ich die jQuery Mobile-Seite dynamisch verbessern kann.
Ich habe versucht, diese Methoden zu verwenden:
$('[data-role="page"]').trigger('create');und
$('[data-role="page"]').page();
Wie kann ich auch verhindern, dass nur Kontrollkästchen erweitert werden?
javascript
jquery
html
cordova
jquery-mobile
user2001897
quelle
quelle
Antworten:
Haftungsausschluss:
Dieser Artikel ist auch als Teil meines Blogs HIER zu finden .
Intro:
Es gibt verschiedene Möglichkeiten, dynamisch erstellte Inhaltsmarkierungen zu verbessern. Es reicht einfach nicht aus, der jQuery Mobile- Seite dynamisch neuen Inhalt hinzuzufügen. Neuer Inhalt muss mit dem klassischen jQuery Mobile- Stil erweitert werden. Da dies eher eine schwere Aufgabe ist, müssen einige Prioritäten gesetzt werden. Wenn möglich, muss jQuery Mobile so wenig wie möglich verbessert werden. Verbessern Sie nicht die gesamte Seite, wenn nur eine Komponente gestaltet werden muss.
Was bedeutet das alles? Wenn das Seiten-Plugin ein pageInit- Ereignis auslöst , das die meisten Widgets verwenden, um sich automatisch zu initialisieren. Alle Instanzen der Widgets, die auf der Seite gefunden werden, werden automatisch erweitert.
Wenn Sie jedoch clientseitig neues Markup generieren oder Inhalte über Ajax laden und in eine Seite einfügen, können Sie das Erstellungsereignis auslösen, um die automatische Initialisierung für alle im neuen Markup enthaltenen Plugins durchzuführen. Dies kann für jedes Element (sogar für das Seitenteil) ausgelöst werden, sodass Sie nicht jedes Plugin manuell initialisieren müssen (Listenansichtstaste, Auswahl usw.).
In diesem Sinne können wir die Verbesserungsstufen diskutieren. Es gibt drei von ihnen, und sie sind von weniger ressourcenintensiv bis höher sortiert:
Erweitern Sie eine einzelne Komponente / ein Widget:
Jedes jQuery Mobile- Widget kann dynamisch erweitert werden:
Listenansicht :
Markup-Verbesserung:
$('#mylist').listview('refresh');Listenansichtselemente entfernen:
$('#mylist li').eq(0).addClass('ui-screen-hidden');Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/LrAyE/
Beachten Sie, dass die Methode refresh () nur neue Knoten betrifft, die an eine Liste angehängt sind. Dies erfolgt aus Leistungsgründen.
Einer der Höhepunkte einer Listenansicht ist eine Filterfunktion. Leider kann jQuery Mobile aus irgendeinem Grund keine Filteroption dynamisch zu einer vorhandenen Listenansicht hinzufügen. Zum Glück gibt es eine Problemumgehung. Entfernen Sie nach Möglichkeit die aktuelle Listenansicht und fügen Sie eine weitere mit aktivierter Filer-Option hinzu.
Hier ist ein funktionierendes Beispiel: https://stackoverflow.com/a/15163984/1848600
$(document).on('pagebeforeshow', '#index', function(){ $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]'); $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview'); $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview'); $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview'); $('#test-listview').listview().listview('refresh'); });Taste
Markup-Verbesserung:
$('[type="button"]').button();Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/m4rjZ/
Eine weitere Sache, Sie müssen kein Eingabeelement verwenden, um eine Schaltfläche zu erstellen. Dies kann sogar mit einem einfachen div erfolgen. Hier ein Beispiel: http://jsfiddle.net/Gajotres/L9xcN/
Navbar
Markup-Verbesserung:
$('[data-role="navbar"]').navbar();Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/w4m2B/
Hier ist eine Demo zum Hinzufügen einer dynamischen Registerkarte "Navigationsleiste": http://jsfiddle.net/Gajotres/V6nHp/
Und noch eine in pagebeforecreate event: http://jsfiddle.net/Gajotres/SJG8W/
Texteingaben, Sucheingaben und Textbereiche
Markup-Verbesserung:
$('[type="text"]').textinput();Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/9UQ9k/
Schieberegler & Kippschalter
Markup-Verbesserung:
$('[type="range"]').slider();Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/caCsf/
Verbesserungsbeispiel während des Ereignisses pagebeforecreate: http://jsfiddle.net/Gajotres/NwMLP/
Schieberegler sind etwas fehlerhaft zu erstellen. Weitere Informationen finden Sie hier: https://stackoverflow.com/a/15708562/1848600
Kontrollkästchen & Radiobox
Markup-Verbesserung:
$('[type="radio"]').checkboxradio();oder wenn Sie ein anderes Radiobox / Checkbox-Element aktivieren / deaktivieren möchten:
$("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh");oder
$("input[type='radio']").eq(0).attr("checked",true).checkboxradio("refresh");Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/VAG6F/
Menü auswählen
Markup-Verbesserung:
$('select').selectmenu();Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/dEXac/
Zusammenklappbar
Leider kann das zusammenklappbare Element nicht durch eine bestimmte Methode erweitert werden, daher muss stattdessen der Trigger ('create') verwendet werden.
Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/ck6uK/
Tabelle
Markup-Verbesserung:
$(".selector").table("refresh");Dies ist zwar eine Standardmethode zur Tabellenerweiterung, aber ich kann sie derzeit nicht zum Laufen bringen. Verwenden Sie stattdessen Trigger ('create').
Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/Zqy4n/
Panels - Neu
Panel Markup-Verbesserung:
$('.selector').trigger('pagecreate');Markup-Verbesserung von Inhalten, die dynamisch zum Panel hinzugefügt wurden :
$('.selector').trigger('pagecreate');Beispiel: http://jsfiddle.net/Palestinian/PRC8W/
Seiteninhalt verbessern:
Wenn wir den gesamten Seiteninhalt generieren / neu erstellen, ist es am besten, alles auf einmal zu tun, und dies kann folgendermaßen geschehen:
$('#index').trigger('create');Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/426NU/
Erweitern Sie den Inhalt einer ganzen Seite (Kopf-, Inhalts- und Fußzeile):
Leider kann Trigger ('create') das Kopf- und Fußzeilen-Markup nicht verbessern. In diesem Fall brauchen wir große Waffen:
$('#index').trigger('pagecreate');Verbesserungsbeispiel: http://jsfiddle.net/Gajotres/DGZcr/
Dies ist fast eine mystische Methode, da ich sie in der offiziellen jQuery Mobile- Dokumentation nicht finden kann . Trotzdem ist es im jQuery Mobile Bug Tracker leicht zu finden, mit der Warnung, es nicht zu verwenden, es sei denn, es ist wirklich wirklich notwendig.
Beachten Sie, .trigger ('pagecreate'); Ich kann davon ausgehen, dass es nur einmal pro Seitenaktualisierung verwendet wird. Ich fand es falsch:
http://jsfiddle.net/Gajotres/5rzxJ/
Erweiterungs-Plugins von Drittanbietern
Es gibt mehrere Erweiterungs-Plugins von Drittanbietern. Einige werden als Aktualisierung einer vorhandenen Methode vorgenommen, andere dienen zur Behebung fehlerhafter jQM-Funktionen.
Änderung des Schaltflächentextes
Leider kann der Entwickler dieses Plugins nicht gefunden werden. Ursprüngliche SO-Quelle: Ändern Sie den Schaltflächentext jquery mobile
(function($) { /* * Changes the displayed text for a jquery mobile button. * Encapsulates the idiosyncracies of how jquery re-arranges the DOM * to display a button for either an <a> link or <input type="button"> */ $.fn.changeButtonText = function(newText) { return this.each(function() { $this = $(this); if( $this.is('a') ) { $('span.ui-btn-text',$this).text(newText); return; } if( $this.is('input') ) { $this.val(newText); // go up the tree var ctx = $this.closest('.ui-btn'); $('span.ui-btn-text',ctx).text(newText); return; } }); }; })(jQuery);Arbeitsbeispiel: http://jsfiddle.net/Gajotres/mwB22/
Erhalten Sie die richtige maximale Inhaltshöhe
Falls Kopf- und Fußzeile der Seite eine konstante Höhe haben, kann der Inhaltsbereich einfach so eingestellt werden, dass er mit einem kleinen CSS-Trick den gesamten verfügbaren Speicherplatz abdeckt:
#content { padding: 0; position : absolute !important; top : 40px !important; right : 0; bottom : 40px !important; left : 0 !important; }Und hier ist ein funktionierendes Beispiel mit
Google maps api3Demo: http://jsfiddle.net/Gajotres/7kGdE/Diese Methode kann verwendet werden, um die korrekte maximale Inhaltshöhe zu erhalten, und muss mit einem Pageshow- Ereignis verwendet werden.
function getRealContentHeight() { var header = $.mobile.activePage.find("div[data-role='header']:visible"); var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); var viewport_height = $(window).height(); var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { content_height -= (content.outerHeight() - content.height()); } return content_height; }Und hier ist ein Live-Beispiel für jsFiddle: http://jsfiddle.net/Gajotres/nVs9J/
Es gibt eine Sache, an die man sich erinnern muss. Mit dieser Funktion erhalten Sie die maximal verfügbare Inhaltshöhe korrekt und können gleichzeitig zum Strecken desselben Inhalts verwendet werden. Leider kann es nicht verwendet werden, um img auf die volle Höhe des Inhalts zu strecken. Das img-Tag hat einen Overhead von 3px.
Methoden zur Verhinderung von Markup-Verbesserungen:
Dies kann auf verschiedene Arten erfolgen. Manchmal müssen Sie sie kombinieren, um das gewünschte Ergebnis zu erzielen.
Methode 1:
Dies kann durch Hinzufügen dieses Attributs erreicht werden:
data-enhance="false"zum Header, Inhalt, Fußzeilencontainer.
Dies muss auch in der Ladephase der App aktiviert werden:
$(document).one("mobileinit", function () { $.mobile.ignoreContentEnabled=true; });Initialisieren Sie es, bevor jquery-mobile.js initialisiert wird (siehe Beispiel unten).
Mehr dazu finden Sie hier:
http://jquerymobile.com/test/docs/pages/page-scripting.html
Beispiel: http://jsfiddle.net/Gajotres/UZwpj/
Verwenden Sie Folgendes, um eine Seite erneut zu erstellen:
$('#index').live('pagebeforeshow', function (event) { $.mobile.ignoreContentEnabled = false; $(this).attr('data-enhance','true'); $(this).trigger("pagecreate") });Methode 2:
Die zweite Möglichkeit besteht darin, dies manuell mit dieser Zeile zu tun:
data-role="none"Beispiel: http://jsfiddle.net/Gajotres/LqDke/
Methode 3:
Bestimmte HTML-Elemente können an der Markup-Verbesserung gehindert werden:
$(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input"; });Beispiel: http://jsfiddle.net/Gajotres/gAGtS/
Initialisieren Sie es erneut, bevor jquery-mobile.js initialisiert wird (siehe Beispiel unten).
Probleme bei der Markup-Verbesserung:
Manchmal tritt beim Erstellen einer Komponente von Grund auf neu (z. B. Listenansicht) der folgende Fehler auf:
Mit der Komponenteninitialisierung vor der Markup-Verbesserung kann dies verhindert werden. So können Sie Folgendes beheben:
$('#mylist').listview().listview('refresh');Probleme beim Überschreiben von Markups:
Wenn aus irgendeinem Grund das Standard-jQuery Mobile-CSS geändert werden muss, muss dies mit
!importantÜberschreibung erfolgen. Ohne sie können Standard-CSS-Stile nicht geändert werden.Beispiel:
#navbar li { background: red !important; }jsFiddleBeispiel: http://jsfiddle.net/Gajotres/vTBGa/Änderungen:
quelle
Von JQMobile 1.4 können Sie tun .enhanceWithin () auf alle Kinder http://api.jquerymobile.com/enhanceWithin/
var content = '<p>Hi</p>'; $('#somediv').html(content); $('#somediv').enhanceWithin();quelle
$('#somediv').trigger('create')und wenn ja, warum?