jQuery Mobile

jQuery Mobile
Deweloperzy Zespół jQuery
Pierwsze wydanie 16 października 2010 ( 16.10.2010 )
Wersja stabilna
1.4.5 / 31 października 2014 ( 31.10.2014 )
Wersja podglądu
1.5.0-rc1 / 10 września 2018 r. ( 10.09.2018 )
Magazyn
Napisane w JavaScript
Platforma Zobacz Obsługa przeglądarek mobilnych
Rozmiar 351 KB / 142 KB (zminimalizowane) / 40 KB (zminimalizowane, spakowane gzipem)
Typ Ramy aplikacji mobilnych
Licencja MIT
Strona internetowa jquerymobile.com _

jQuery Mobile to zoptymalizowana pod kątem dotyku platforma internetowa (znana również jako platforma mobilna), w szczególności biblioteka JavaScript , opracowana przez zespół projektowy jQuery . Rozwój koncentruje się na stworzeniu platformy kompatybilnej z wieloma smartfonami i tabletami , co jest konieczne ze względu na rosnący, ale heterogeniczny rynek tabletów i smartfonów. Framework jQuery Mobile jest spójny z innymi frameworkami i platformami aplikacji mobilnych, takimi jak PhoneGap , Worklight itp.

Od 7 października 2021 r. jQuery Mobile jest przestarzałe.

Cechy

  • Kompatybilny ze wszystkimi głównymi przeglądarkami stacjonarnymi, a także wszystkimi głównymi platformami mobilnymi, w tym Android , iOS , Windows Phone , Blackberry , WebOS , Symbian .
  • Zbudowany na rdzeniu jQuery , dzięki czemu ma minimalną krzywą uczenia się dla osób już zaznajomionych ze składnią jQuery.
  • Struktura tematyczna, która umożliwia tworzenie niestandardowych motywów.
  • Ograniczone zależności i lekkość w celu optymalizacji prędkości.
  • Ta sama podstawowa baza kodu zostanie automatycznie przeskalowana do dowolnego ekranu.
  • Konfiguracja oparta na HTML5 do układania stron przy minimalnej liczbie skryptów.
  • AJAX z animowanymi przejściami stron, która zapewnia możliwość tworzenia semantycznych adresów URL za pomocą pushState.
  • Widżety interfejsu użytkownika zoptymalizowane pod kątem obsługi dotykowej i niezależne od platformy.

(Źródło: z witryny jQuery Mobile)

Przykład użycia 

 
  
 $  (  'dział'  ).  on  (  'dotknij'  ,  funkcja  (  zdarzenie  ){  alert  (  'dotknięty element'  );  }); 


      
        
    
 $  (  dokument  ).  gotowe  (  funkcja  (){  $  (  '.myList li'  ).  on  (  'click touchstart'  ,  function  ()  {  $  (  '.myDiv'  ).  slideDown  (  '500'  );  });  });

Podstawowy przykład

Poniżej znajduje się podstawowy projekt jQuery Mobile wykorzystujący elementy semantyczne HTML5 . Ważne jest, aby połączyć się z bibliotekami JavaScript jQuery i jQuery Mobile oraz arkuszem stylów (pliki można pobrać i hostować lokalnie, ale zaleca się linkowanie do plików hostowanych w jQuery CDN ) .

Ekran projektu jest zdefiniowany przez sekcję elementu HTML5 i rolę danych strony . Zauważ, że rola danych jest przykładem atrybutu danych HTML5 , w tym przypadku zdefiniowanego przez jQuery Mobile. Strona może zawierać header i footer z rolą danych odpowiednio header i footer . Pomiędzy nimi może znajdować się element article z rolą main i class zawartości interfejsu użytkownika . Na koniec może być obecny element nav z rolą danych navbar .

Jeden dokument HTML może zawierać więcej niż jeden element sekcji , a tym samym więcej niż jeden ekran zawartości . W ten sposób wystarczy załadować tylko jeden plik, który zawiera wiele stron treści. Jedna strona może zawierać link do innej strony w tym samym pliku, odwołując się do atrybutu id strony (np. href="#second" ).

W poniższym przykładzie używane są dwa inne atrybuty danych. Atrybut data -theme informuje przeglądarkę, jaki motyw ma renderować. Atrybut data -add-back-btn dodaje przycisk Wstecz do strony, jeśli jest ustawiony na true .

Wreszcie ikony można dodawać do elementów za pomocą atrybutu data-icon . jQuery Mobile ma wbudowane pięćdziesiąt powszechnie używanych ikon.

Krótkie wyjaśnienie atrybutów danych użytych w tym przykładzie:

data-role – Określa rolę elementu, taką jak nagłówek, treść, stopka itp.

data-theme — Określa, który motyw projektu ma być używany dla elementów w kontenerze. Można ustawić na: a lub b.

data-position – Określa, czy element powinien być naprawiony, w którym to przypadku będzie renderowany na górze (dla nagłówka) lub na dole (dla stopki).

data-transition – Określa jedną z dziesięciu wbudowanych animacji używanych podczas ładowania nowych stron.

data-icon – Określa jedną z pięćdziesięciu wbudowanych ikon, które można dodać do elementu. 



    
		 
		
		  
		   <!doctype html>  <  html  >  <  head  >  <  meta  charset  =  "utf-8"  >  <  title  >  przykład jQuery Mobile  </  title  >  <  meta  name  =  "viewport"  content  =  "initial-scale=1, skalowalny przez użytkownika =nie, szerokość=szerokość-urządzenia"  >  <  link  rel  =  "arkusz stylów"  href 		
    
 
    
           
              
                 =  "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"  >  </  head  >  <  treść  >  <  sekcja  data-role  =  "page"  id  =  " first"  data-theme  =  "a"  >  <  header  data-role  =  "header"  data-position  =  "fixed"  >  <  h1  >  Strona 1 Header 
            
 
              
                
                      </  h1  >  </  header  >  <  article  role  =  "main"  class  =  "UI-content"  >  <  h2  >  Witaj świecie!  </  h2  >  <  a  href  =  "#second"  data-role  =  "button"  data-inline  =  "true"  data-transition  =  "flow"  data-icon  
            
 
              
                
            
        
 
         =  "carat-r"  data-iconpos  =  "right"  >  Idź do strony 2  </  a  >  </  article  >  <  footer  data-role  =  "footer"  data-position  =  "fixed"  >  <  h4  >  Strona 1 Stopka  < /  h4  >  </  stopka  >  </  sekcja  >  <  sekcja    
                
                
            
 
              data-role  =  "page"  id  =  "second"  data-theme  =  "b"  >  <  header  data-role  =  "header"  data-position  =  "fixed"  data-add-back-btn  =  "true"  >  <  h1  >  Strona 2 Nagłówek  </  h1  >  </  nagłówek  >  <  rola  artykułu  =  
                
            
 
              
                
            
        
		 "main"  class  =  "ui-content"  >  <  h2  >  Przykładowa strona  </  h2  >  </  artykuł  >  <  footer  data-role  =  "footer"  data-position  =  "fixed"  >  <  h4  >  Strona 2 Stopka  </  h4  >  </  stopka  >  </  sekcja  >  <  
		 
    
 skrypt  src  =  "https://code.jquery.com/jquery-1.11.1.min.js"  ></  skrypt  >  <  skrypt  src  =  "https://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.js"  ></  script  >  </  body  >  </  html  >

Tematyka

jQuery Mobile zapewnia strukturę motywów, która umożliwia programistom dostosowywanie schematów kolorów i niektórych aspektów CSS funkcji interfejsu użytkownika. Deweloperzy mogą używać aplikacji jQuery Mobile ThemeRoller do dostosowywania tych wyglądów i tworzenia markowych doświadczeń. Po opracowaniu motywu w aplikacji ThemeRoller programiści mogą pobrać niestandardowy plik CSS i dołączyć go do swojego projektu, aby użyć własnego motywu.

Każdy motyw może zawierać do 26 unikatowych „próbek” kolorów, z których każda składa się z paska nagłówka, treści i stanów przycisków. Łączenie różnych próbek umożliwia programistom tworzenie szerszego zakresu efektów wizualnych, niż byłoby to możliwe przy użyciu tylko jednej próbki na motyw. Przełączanie między różnymi próbkami w motywie jest tak proste, jak dodanie atrybutu o nazwie „motyw danych” do elementów HTML.

Domyślny motyw jQuery Mobile zawiera dwie różne próbki kolorów, nazwane „a” i „b”. Oto przykład tworzenia paska narzędzi z próbką „b”:

   
	 
 <  div  data-role  =  "header"  data-theme  =  "b"  >  <  h1  >  Tytuł strony  </  h1  >  </  div  >

(Źródło: z witryny jQuery Mobile)

Istnieje już kilka motywów w stylu open source, które są opracowywane i wspierane przez organizacje zewnętrzne. Jednym z takich motywów w stylu open source jest motyw w stylu Metro, który został opracowany i wydany przez Microsoft Open Technologies, Inc. Motyw w stylu Metro ma naśladować interfejs użytkownika Metro (język projektowania), którego Microsoft używa w swoich mobilnych systemach operacyjnych.

Obsługa przeglądarek mobilnych

Platforma Wersja Rodzinny Luka telefoniczna Operę mobilną Opera Mini Fenek Ozon Przód z siatki
0,9 8,5, 8,65 9.5 10 4.0 5.0 1.0 1,1* 0,9 4.0
iOS v2.2.1 A A
v3.1.3, v3.2 A A A
v4-7.0 A A A
Symbiana S60 v3.1, v3.2 A A A A A C C
v5.0 C C C A C A
Interfejs użytkownika Symbiana v3.0, v3.1
C 8,65 		C
v3.2 C C
Platforma Symbiana wersja 3.0 A
system operacyjny BlackBerry v4.5 C C C
v4.6, v4.7 C C C B
v5.0 B A C A
wersja 6.0 A A A
Android v1.5, v1.6 A A
v2.1 A A
v2.2 A A A* C* A*
Windows Mobile v6.1 C C C C B C B C
v6.5.1 C C C A A C A
v7.0 A A C A
webOS 1.4.1 A A
źle 1.0 A
Mamo 5.0 B B C B*
MeeGo 1,1* A* A* A*

Klucz:

  • A - Wysoka jakość. Przeglądarka, która jest w stanie co najmniej korzystać z zapytań o media (wymaganie dla jQuery Mobile). Te przeglądarki będą aktywnie testowane, ale mogą nie uzyskać pełnych możliwości jQuery Mobile.
  • B - Średnia jakość. Wydajna przeglądarka, która nie ma wystarczającego udziału w rynku, aby uzasadnić codzienne testowanie. Poprawki błędów będą nadal stosowane, aby pomóc tym przeglądarkom.
  • C — Niska jakość. Przeglądarka, która nie obsługuje zapytań o media. Nie otrzymają żadnych skryptów jQuery Mobile ani CSS (powrót do zwykłego HTML i prostego CSS).
  • * - Nadchodząca przeglądarka. Ta przeglądarka nie została jeszcze wydana, ale jest w fazie testów alfa/beta.

(Źródło: z witryny jQuery Mobile)

Historia wydania

Data wydania Numer wersji
16 października 2010 r 1.0.0 Alfa 1
12 listopada 2010 r 1.0.0 Alfa 2
4 lutego 2011 r 1.0.0 alfa 3
31 marca 2011 r 1.0.0 alfa 4
7 kwietnia 2011 r 1.0.0 Alfa 4.1
20 czerwca 2011 r 1.0.0 Beta 1
3 sierpnia 2011 1.0.0 Beta 2
8 września 2011 r 1.0.0 Beta 3
29 września 2011 r 1.0.0 RC1
19 października 2011 r 1.0.0 RC2
13 listopada 2011 r 1.0.0 RC3
16 listopada 2011 r 1.0.0
26 stycznia 2012 1.0.1
28 lutego 2012 r 1.1.0 RC1
6 kwietnia 2012 r 1.1.0 RC2
13 kwietnia 2012 r 1.1.0
28 czerwca 2012 r 1.1.1 RC1
12 lipca 2012 r 1.1.1
1 sierpnia 2012 r 1.2.0 Alfa
5 września 2012 r 1.2.0 Beta
14 września 2012 r 1.2.0 RC1
21 września 2012 r 1.2.0 RC2
2 października 2012 r 1.2.0
14 stycznia 2013 r 1.3.0 Beta
4 lutego 2013 r 1.3.0 RC1
20 lutego 2013 r 1.3.0
19 marca 2013 r 1.1.2
22 marca, 2013 1.2.1
10 kwietnia 2013 r 1.3.1
19 lipca 2013 r 1.3.2
25 lipca 2013 r 1.4.0 Alfa 1
15 sierpnia 2013 r 1.4.0 Alfa 2
24 września 2013 r 1.4.0 Beta 1
24 października 2013 r 1.4.0 RC 1
23 grudnia 2013 r 1.4.0
12 lutego 2014 r 1.4.1
28 lutego 2014 r 1.4.2
1 lipca 2014 r 1.4.3
12 września 2014 r 1.4.4
31 października 2014 r 1.4.5 (najnowsza stabilna wersja)
3 stycznia 2017 r 1.5.0-alfa.1

Zobacz też

Dalsza lektura

Linki zewnętrzne

Pobrano z „ https://en.wikipedia.org/w/index.php?title=JQuery_Mobile&oldid=1139673995 ”