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

Question 1

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?

Question 2

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.

Question 3

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!

Question 4

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.

Question 5

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>