jQuery Mobile für Mobil und Desktop?

Ich entwickle eine Web-App. MySql/PHP-Backend und HTML/jQuery-Frontend.

Ich wollte das jQuery-UI-Framework verwenden.

Jetzt ist zu sehen, dass jQuery Mobile draußen ist, und ich möchte die App so weit wie möglich für mobile Geräte zugänglich machen.

Ich habe gegoogelt, aber keine qualitativ hochwertige Antwort gefunden.

Kann ich alles mit demselben Code zum Laufen bringen, wenn ich jQuery Mobile verwende?

Ich möchte, dass mobile Widgets angezeigt werden, wenn über den mobilen Browser darauf zugegriffen wird.
Auf die Verwendung von jQuery-UI-Widgets wird jedoch über den Desktop-Browser zugegriffen.

Ist das nur mit jQuery Mobile und seinem Markup möglich, oder muss ich das Frontend für Mobilgeräte (jQuery Mobile) und Desktop (jQuery UI) separat schreiben?

Das heißt, jQuery Mobile kann automatisch auf die jQuery-Benutzeroberfläche zurückgreifen, wenn vom Desktop-Browser darauf zugegriffen wird.

Ich denke, es hängt weitgehend davon ab, was Sie tun möchten und welche Funktionalität Sie erfassen möchten. Wenn Sie möchten, dass sich eine Webseite auf Mobilgeräten und demselben Desktop auf eine bestimmte Weise verhält, sind Sie mit etwas sorgfältigem Codieren/Testen mit jquery.mobile in Ordnung.

Wenn Sie sich das CSS für jquery.mobile (unkomprimierte Version) ansehen, können Sie den Code direkt bearbeiten, um die HTML-Elemente für bestimmte Bildschirmgrößen so anzuzeigen, wie Sie es möchten. Wählen Sie einfach die für Desktop-/große Bildschirmgrößen aus, um sie entsprechend zu skalieren.

Je nachdem, was Sie in Bezug auf Ihre mobile Version erreichen möchten, würde ich es auch überprüfen jQTouch – die mobilspezifische Funktionen wie beispielsweise “Tippen” (anstelle von “Klicken”) zulässt – aber auch eine DesktopCompatability-Option hat, sodass sie für Desktop-Browser zurückgesetzt wird.

Eine Anmerkung, mit jeder dieser Bibliotheken benötigen Sie immer noch die Root-jquery-Bibliothek.

Hoffe das hilft.

Zunächst müssen Sie bedenken, dass sich die Arbeitsabläufe für Mobile und Desktop stark unterscheiden. Der Versuch, zwischen der Desktop-Version und der mobilen Version zu wechseln, ist nicht nur ein Umschalten zwischen Ressourcen.

Zweitens unterscheiden sich die beiden UI-Frameworks stark in ihrer Verwendung. jQuery UI ist eine Sammlung von Widgets, die Sie aufrufen können, wann und wo Sie möchten, es ist in gewisser Weise eine Bibliothek (ish) mit einem CSS-Framework, das sie unterstützt. jQuery Mobile funktioniert jedoch ganz anders, standardmäßig ist es ein Markup-gesteuertes Framework, und um es zum Laufen zu bringen, müssen Sie nicht einmal eine Zeile Javascript schreiben.

Mein Rat an Sie ist, sich die Datenschicht als Ihren gemeinsamen Code und die Client-Seite als zwei völlig getrennte Aufgaben vorzustellen. Persönlich habe ich es geschafft, Anwendungen mit gängigen REST-Webservices zu erstellen. Ich verwende die jQuery-Benutzeroberfläche, um Webservices zu nutzen und Mashups für die Clientseite zu erstellen. Für die mobile Version verwende ich dann die serverseitigen Webservices, um jQuery-mobile HTML-Seiten für die Verwendung auf Mobilgeräten zu erstellen.

Beachten Sie auch, dass das Generieren von dynamischem HTML auf der Client-Seite mit jQuery Mobile Ihnen mit Sicherheit große Kopfschmerzen bereiten wird. Bis das Projekt ausgereift ist, würde ich es nur verwenden, um das stark semantische Markup des Frameworks zu verbessern. Erstellen Sie eine gute solide Datenschicht und der Rest wird kinderleicht sein 🙂

Hier ist der vollständige Quellcode: https://github.com/ti-dev/Scrum-it für ein Open-Source-Scrum-Board, das für Desktop-Geräte und Apple iPad entwickelt wurde. So ist es möglich, diese beiden Welten auf einer Webseite zu vereinen.