Unterschied zwischen jQuery und jQuery Mobile?

92

Ich bin neu in der mobilen Webentwicklung und habe gerade eine mobile App mit PhoneGap erstellt, bei der jQuery häufig verwendet wird.

Aber es gab natürlich ein paar Probleme damit, wie ich Dinge formatiert habe und wie sie tatsächlich auf den Bildschirmen von Mobilgeräten angezeigt wurden, mit denen ich getestet habe, und als ich versuchte, diese herauszufinden, bin ich auf viele Vorschläge gestoßen, um mir die Arbeit zu erleichtern jQuery Mobile.

Das verwirrt mich jetzt - jQuery hatte keine Rolle bei der Formatierung. Das war nur das Wissen meines Anfängers über mobiles CSS, das die Probleme verursachte.

Was genau macht jQuery Mobile und wie unterscheidet es sich von gewöhnlichem jQuery? Wenn ich jQuery bereits kenne, was wird für mich neu sein?

jquery jquery-mobile

— temporärer_Benutzername
quelle

2

"Ich konnte nicht glauben, dass das noch niemand gefragt hatte." Eigentlich haben sie: stackoverflow.com/q/6636388/368167

— Tamer Shlash

Was ist mobile CSS?

— Legenden

94

jQuery wurde lediglich entwickelt, um die Skripterstellung in verschiedenen Browsern zu vereinfachen und zu standardisieren. Es konzentriert sich auf die einfachen Dinge: Erstellen von Elementen, Bearbeiten des DOM, Verwalten von Attributen, Ausführen von HTTP-Anforderungen usw.

jQueryUI ist eine Reihe von Komponenten und Funktionen der Benutzeroberfläche, die auf jQuery aufbauen (dh es benötigt jQuery, um zu funktionieren): Schaltflächen, Dialogfelder, Schieberegler, Registerkarten, erweiterte Animationen, Drag & Drop-Funktionen.

jQuery und jQueryUI sind beide so konzipiert, dass sie Ihrer Site (Desktop oder Mobile) hinzugefügt werden. Wenn Sie eine bestimmte Funktion hinzufügen möchten, können jQuery oder jQueryUI möglicherweise helfen.

jQuery Mobile ist jedoch ein vollständiges Framework. Es soll Ihr Ausgangspunkt für eine mobile Website sein. Es erfordert jQuery und nutzt die Funktionen von jQuery und jQueryUI, um sowohl UI-Komponenten als auch API-Funktionen zum Erstellen mobiler Websites bereitzustellen. Sie können immer noch so viel oder so wenig davon verwenden, wie Sie möchten, aber jQuery Mobile kann das gesamte Ansichtsfenster auf mobile Weise steuern, wenn Sie es zulassen.

Ein weiterer wichtiger Unterschied besteht darin, dass jQuery und jQueryUI eine Ebene über Ihrem HTML- und CSS-System sein sollen. Sie sollten in der Lage sein, Ihr Markup einfach in Ruhe zu lassen und es mit jQuery zu verbessern. JQuery Mobile bietet jedoch Möglichkeiten, um zu definieren, wo Komponenten nur mithilfe von HTML angezeigt werden sollen - z. B. (von der jQuery Mobile-Site):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

Das data-roleAttribut weist jQuery Mobile an, diese Liste in eine mobilfreundliche UI-Komponente umzuwandeln, und die Eigenschaften data-insetund data-filterAttribute legen die Eigenschaften davon fest - ohne eine einzige Zeile JavaScript zu schreiben. jQueryUI-Komponenten hingegen werden normalerweise durch Schreiben einiger Zeilen JavaScript erstellt, um die Komponente im DOM zu instanziieren.

— Stu Cox
quelle

Als jemand, der gerade von jQuery + UI auf browserbasierten Websites zum Verständnis von jQuery Mobile für mobile Geräte übergeht, muss ich sagen, dass ich Schwierigkeiten habe zu sehen, wie diese bestimmte Antwort 41 positive Stimmen erhalten hat, aber KEINE Kommentare. In seiner primären Ausrichtung wird ausdrücklich darauf hingewiesen, dass jQuery Mobile im Gegensatz zu jQueryUI, das "auf jQuery aufbaut", "jedoch ein vollständiges Framework" ist. Dies steht im völligen Widerspruch zu den anderen Antworten unten, die besagen (ziemlich genau - ich denke!), Dass jQuery Mobile auch jQuery zum Ausführen benötigt, und meine persönliche Verwirrung darüber, was .js und .css ich brauche, erhöhen.

— Andy Lorenz

3

Entschuldigung, Sie haben Recht. Ich habe nicht klargestellt, dass für jQuery Mobile auch jQuery erforderlich ist. Ich werde es aktualisieren. Obwohl meine Antwort nicht wirklich darauf ausgelegt ist, Ihnen zu erklären, wie Sie mit jQuery Mobile arbeiten können (das war nicht die ursprüngliche Frage), nur um einen umfassenden Überblick über die konzeptionellen Unterschiede zu geben.

— Stu Cox

tolles Zeug Stu, danke, dass du deine Antwort optimiert hast, was jetzt viel sinnvoller ist. Sie werden überrascht sein, wie schwierig es für "jquery mobile newbies" ist, loszulegen - selbst die jquerymobile-Website macht es nicht offensichtlich! Das an sich führt zu einem weiteren verwirrenden Punkt: Welche Version von jquery benötigt jquerymobile? Zum Zeitpunkt des Schreibens impliziert jquerymobile.com nur , dass 1.4.2 mit jQuery 1.8 - 1.10 / 2.0 kompatibel ist - aber ich kann nirgendwo finden, wo Versionen & js / css-Abhängigkeiten speziell angegeben sind!

— Andy Lorenz

28

Was ist jQuery Mobile?

JQM (jQuery Mobile) ist ein Benutzeroberflächensystem für Mobiltelefone, das auf jQuery aufbaut. jQuery ist erforderlich, damit JQM funktioniert. Im Gegensatz zu anderen ähnlichen Handy-Frameworks unterstützt JQM alle wichtigen Mobil-, Tablet-, E-Reader- und Desktop-Plattformen und nicht nur mobile Webkit-Browser. Eine der bemerkenswertesten Funktionen des Frameworks ist das Ajax-Navigationssystem, das animierte Seitenübergänge verwendet (sehr cool).

Was mag für dich neu sein?

Eine Sache bei JQM, die neuen Benutzern einen Kurvenball zuwirft, ist die Ajax-Navigation. Wenn Sie von jquery kommen, sind Sie wahrscheinlich daran gewöhnt, Ihr Javascript in jede Seite aufzunehmen und dann dom ready ( $(function(){ ... }oder $(document).ready(function(){ .... }) zu verwenden, um all Ihre lustigen Javascript-Aktivitäten zu starten. Da JQM jedoch die Ajax-Navigation verwendet, zieht das System andere Seiten in den gleichen Bereich wie die erste Seite und lädt Ihre in der enthaltenen Seite nicht <head>. Wenn die nächste Seite über Ajax geladen wird, werden Sie feststellen, dass Ihre Inhalte $(function(){ ...}auf der zweiten Seite nicht funktionieren. Die Lösung hierfür ist die Bindung an das Pageinit-Ereignis. Die folgenden Beispiele helfen Ihnen zu Beginn Ihrer Reise:

$(document).on('pageinit', function(){ // this fires for each new page

});

Um auf eine bestimmte Seite zu zielen, fügen Sie die ID der Seite hinzu:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

Wenn Sie mit JQM beginnen, können Sie die neuen Seitenereignisse besser verstehen. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Viel Glück!

— Codaniel
quelle

5

jQuery ist ein DOM-Manipulations- / Traversing- und AJAX-JavaScript-Framework. Es abstrahiert automatisch einen Großteil der Komplexität zwischen den verschiedenen Browsern. Es gibt unzählige jQuery-Plugins, die viele Aufgaben vereinfachen.

jQuery Mobile ist ein UI-Framework für mobile Anwendungen, das auf jQuery basiert. Es hat Themen- und UI-Komponenten.

Insgesamt sind sie kostenlos. Sie müssen jQuery Mobile nicht verwenden, um jQuery zu verwenden. Um jQuery Mobile verwenden zu können, müssen Sie jQuery verwenden.

— Daniel A. White
quelle

Könnten Sie also sagen, dass dies jQuery Mobiledie mobile Version von ist jQuery UI?

— Jeff Hines

@ JeffHines - etwas. Sie sind unterschiedliche Codebasen, erreichen jedoch ähnliche Ziele auf unterschiedliche Weise.

— Daniel A. White

Hervorragende Kommentare, Daniel A. White. Sie müssen jQuery Mobile nicht verwenden, um jQuery zu verwenden. Um jQuery Mobile verwenden zu können, müssen Sie jQuery verwenden.

— user3174782

Eine Alpha-Version ist derzeit in Arbeit. jquerymobile.com/changelog/1.5.0-alpha1

— Jackson Ng

2

Sie haben nicht genug Punkte, um sie oben zu kommentieren, also fügen Sie sie dem Thread hinzu, um Andys zweite Frage nach Abhängigkeiten zu beantworten.

Ich glaube, was Sie suchen, ist hier: jQuery Mobile Demo

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    ...content goes here...
</body>
</html>

— TransitDataHead
quelle