Czym się różni jQuery od jQuery Mobile?

92

Jestem nowy w tworzeniu mobilnych stron internetowych i właśnie stworzyłem aplikację mobilną z PhoneGap, często używającą jQuery.

Ale oczywiście było kilka usterek związanych ze sposobem formatowania rzeczy i sposobem, w jaki faktycznie pojawiały się na ekranach urządzeń mobilnych, z którymi testowałem, i próbując je rozwiązać, natknąłem się na wiele sugestii, aby ułatwić sobie pracę, używając jQuery mobile.

To mnie wprawia w zakłopotanie - w jQuery nie było formatowania. To była tylko moja początkująca znajomość mobilnego CSS, która spowodowała problemy.

Czym właściwie jest jQuery mobile i czym różni się od zwykłego jQuery? Jeśli znam już jQuery, co będzie dla mnie nowego?

nazwa_użytkownika_tymczasowego
źródło
2
„Nie mogłem uwierzyć, że nikt wcześniej o to nie pytał”. Właściwie to zrobili: stackoverflow.com/q/6636388/368167
Tamer Shlash
Co to jest mobilny CSS?
Legends

Odpowiedzi:

94

jQuery został zaprojektowany wyłącznie w celu uproszczenia i ujednolicenia skryptów w różnych przeglądarkach. Skupia się na rzeczach niskiego poziomu: tworzeniu elementów, manipulowaniu DOM, zarządzaniu atrybutami, wykonywaniu żądań HTTP itp.

jQueryUI to zestaw komponentów i funkcji interfejsu użytkownika zbudowanych na bazie jQuery (tj. potrzebuje jQuery do pracy): przyciski, okna dialogowe, suwaki, zakładki, bardziej zaawansowane animacje, funkcja przeciągnij / upuść.

jQuery i jQueryUI zostały zaprojektowane tak, aby można je było „dodać” do Twojej witryny (na komputerze lub urządzeniu mobilnym) - jeśli chcesz dodać określoną funkcję, jQuery lub jQueryUI mogą pomóc.

jQuery Mobile to jednak pełna frameworka. Ma być punktem wyjścia dla witryny mobilnej. Wymaga jQuery i wykorzystuje funkcje jQuery i jQueryUI, aby zapewnić zarówno komponenty UI, jak i funkcje API do tworzenia witryn przyjaznych dla urządzeń mobilnych. Nadal możesz używać tyle lub mniej, ile chcesz, ale jQuery Mobile może kontrolować cały widoczny obszar w sposób przyjazny dla urządzeń mobilnych, jeśli na to pozwolisz.

Inną ważną różnicą jest to, że jQuery i jQueryUI mają być warstwą na wierzchu HTML i CSS. Powinieneś móc po prostu zostawić swoje znaczniki w spokoju i ulepszyć je za pomocą jQuery. Jednak jQuery Mobile zapewnia sposoby definiowania, gdzie mają pojawiać się komponenty przy użyciu samego HTML - np. (Z witryny jQuery Mobile):

<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>

data-roleAtrybut mówi jQuery Mobile, aby włączyć tę listę do elementu interfejsu użytkownika telefonu w obsłudze a data-inseti data-filteratrybutów zestaw właściwości, które - bez pisania pojedynczej linii kodu JavaScript. Z drugiej strony, komponenty jQueryUI są zwykle tworzone przez napisanie kilku wierszy JavaScript w celu utworzenia instancji komponentu w DOM.

Stu Cox
źródło
ponieważ ktoś właśnie „przechodził” od jQuery + UI na stronach internetowych opartych na przeglądarkach do zrozumienia jQuery Mobile dla urządzeń mobilnych, muszę powiedzieć, że mam problem z tym, jak ta konkretna odpowiedź otrzymała 41 głosów za, ale ŻADNYCH komentarzy. W swoim głównym założeniu zwraca uwagę, że w przeciwieństwie do jQueryUI, które jest „zbudowane na bazie jQuery”, jQuery Mobile jest „jednak pełnym szkieletem”. Jest to całkowicie sprzeczne z innymi odpowiedziami poniżej, które stwierdzają (dość dokładnie - myślę!), Że jQuery Mobile również wymaga jQuery do działania, i pogłębia moje osobiste wątpliwości co do tego, czego potrzebuję .js i .css.
Andy Lorenz
3
Przepraszam, masz rację, nie wyjaśniłem, że jQuery Mobile również wymaga jQuery - zaktualizuję go. Chociaż zwróć uwagę, że moja odpowiedź nie jest tak naprawdę przeznaczona do tego, aby powiedzieć ci, jak rozpocząć pracę z jQuery Mobile (nie o to chodziło w pierwotnym pytaniu), tylko po to, aby dać szeroki przegląd różnic koncepcyjnych.
Stu Cox
świetna rzecz Stu, dzięki za poprawienie odpowiedzi, która teraz ma dużo więcej sensu. Możesz być zaskoczony, jak trudne jest dla „początkujących użytkowników jquery mobile” - nawet witryna jquerymobile nie czyni tego oczywistym! To samo w sobie prowadzi do kolejnego mylącego punktu - jakiej wersji jquery wymaga jquerymobile? W chwili pisania tego tekstu jquerymobile.com sugeruje tylko, że 1.4.2 jest kompatybilny z jQuery 1.8 - 1.10 / 2.0 - ale nie mogę znaleźć nigdzie, gdzie wersje i zależności js / css są wyraźnie określone!
Andy Lorenz
28

Czym jest jQuery mobile

JQM (jQuery mobile) to system interfejsu użytkownika dla telefonów komórkowych zbudowany na bazie jQuery. jQuery jest wymagane do działania JQM. W przeciwieństwie do innych podobnych struktur dla telefonów komórkowych, JQM jest ukierunkowany na obsługę wszystkich głównych platform mobilnych, tabletów, czytników e-booków i komputerów stacjonarnych, a nie tylko mobilnych przeglądarek webkit. Jedną z najbardziej godnych uwagi cech tego frameworka jest system nawigacji Ajax, który wykorzystuje animowane przejścia stron (bardzo fajne).

Co może być dla ciebie nowe

Jedną z rzeczy w JQM, która rzuca kulkę w nowych użytkowników, jest nawigacja Ajax. Pochodząc z jquery, prawdopodobnie jesteś przyzwyczajony do umieszczania javascript na każdej stronie, a następnie używania dom ready ( $(function(){ ... }lub $(document).ready(function(){ .... }) do uruchamiania wszystkich zabawnych działań javascript. Ale ponieważ JQM używa nawigacji Ajax, system będzie ściągał inne strony do tej samej domeny, co pierwsza strona i nie ładuje twoich skryptów zawartych w <head>. Kiedy następna strona zostanie załadowana przez Ajax, zauważysz, że twoje rzeczy wewnątrz $(function(){ ...}nie będą działać na drugiej stronie. Rozwiązaniem tego problemu jest powiązanie ze zdarzeniem pageinit. Poniższe przykłady pomogą ci na początku twojej podróży:

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

});

Aby kierować reklamy na określoną stronę, dodajesz jej identyfikator:

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

});

Zrozumienie nowych zdarzeń na stronie pomoże Ci dużo, gdy zaczniesz z JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Powodzenia!

codaniel
źródło
5

jQuery to platforma manipulująca / przechodząca przez DOM i framework AJAX JavaScript. Automatycznie usuwa wiele złożoności między różnymi przeglądarkami. Istnieje niezliczona ilość wtyczek jQuery, które upraszczają wiele zadań.

jQuery Mobile to platforma interfejsu użytkownika przeznaczona dla aplikacji mobilnych, która jest oparta na jQuery. Zawiera elementy motywów i interfejsu użytkownika.

W sumie są one bezpłatne. Nie musisz używać jQuery Mobile, aby korzystać z jQuery. Ale aby użyć jQuery Mobile, musisz użyć jQuery.

Daniel A. White
źródło
Czy możesz więc powiedzieć, że jQuery Mobilejest to wersja mobilna jQuery UI?
Jeff Hines
@JeffHines - nieco. są różnymi bazami kodu, ale osiągają podobne cele na różne sposoby.
Daniel A. White
Doskonałe komentarze, Daniel A. White. Nie musisz używać jQuery Mobile, aby korzystać z jQuery. Ale aby użyć jQuery Mobile, musisz użyć jQuery.
user3174782
Obecnie pracujemy nad wersją alfa. jquerymobile.com/changelog/1.5.0-alpha1
Jackson Ng
2

Nie masz wystarczająco dużo punktów do skomentowania powyżej, więc dodaj do wątku, aby odpowiedzieć na drugie pytanie Andy'ego dotyczące zależności.

Wierzę, że to, czego szukasz, jest tutaj: 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
źródło