Википедија

ЈQуерy мобиле

jQuery Mobile je web framework прилагођен за екране осетљиве на додир (такође познат као мобилни framework), или прецизније ЈаваСцрипт библиотека, коју тренутно развија јQуерy тим. Развој је усмерен на стварање framework-а који је компатибилан са широким спектром паметних телефона и таблет рачунара [1] , што је било неопходно због појављивања све већег броја различитих таблет рачунара I паметних телефона на тржишту [2]. јQуерy Мобиле [3] framework је комаптибилан са другим мобилним framework-овима и платформама као што су ПхонеГап, Wорклигхт [4] I друге.

Карактеристике уреди

  • Компатибилан је са свим познатијим прегледачима веба I мобилним платформама укључујући Андроид, иОС, Wиндоwс Пхоне, Блацкберрy, WебОС, Сyмбиан.
  • Направљен је по узору на јQуерy тако да људи који су упознати са јQуерy синтаксом могу лако да га савладају.
  • Тематски framework који допушта креирање произвољних тема.
  • Код це се исто приказивати на било ком екрану.
  • ХТМЛ5-контролисана конфигурација за израду страница са минимално кодирања.
  • Навигација заснована на АЈАX-у са анимираним преласком страница која омогућује способност креирања семантичких УРЛ-ова кроз pushState.
  • УИ widget-и који су оптимизовани за екране који су осетљиви на додир и специфични за платформу.


Пример уреди

Оно што следи је основни јQуерy Мобиле пројекат који користи ХТМЛ5 семантичке елементе. Важно је повезати га са јQуерy и јQуерy Мобиле ЈаваСцрипт библиотекама као и стилским листовима (датотеке могу бити преузете и складиштене локално, али је препоручљиво да буду повезане са датотекама ускалдиштеним на јQуерy ЦДН). Главни део пројекта је дефинисан са section ХТМЛ5 елементом I атрибутом data-role са вредношћу page. Приметимо да је data-role атрибут из јQуерy Мобиле, а не из ХТМЛ5. Страница може имати header и footer елементе са атрибутом data-role који имају редом вредности header I footer . Измедју се може налазити елемент article са атрибутом data-role постављеним на вредност content . Такође, елемент nav може имати атрибут data-role који има вредност navbar . ХТМЛ документ може садржати више section елемената, као I више страница. Потребно је само учитати датотеку која садржи више страница садржаја где једна страница може да води до друге из исте датотеке наводјењем id-ја странице као атрибута(нпр. href="#second" ).


У истом примеру, друга два data-атрибута су коришћена. Атрибут data-theme обавештава прегледаче о теми коју рендерује, а атрибут data-add-back-btn додаје back дугме на страницу ако му је вредност постављена на true . На крају, иконице могу бити додате помоћу data-icon атрибута. јQуерy Мобиле има на располагању педесет уградјених иконица.

Кратко објашњење data-атрибута коришћених у овом примеру:

дата-роле – објашњава улогу елемента, као што су header, content, footer, итд.

дата-тхеме – одређује коју ће тему користити елементи без омотача. Вредност му може бити постављена на а или б.

дата-поситион – одређује да ли ће позиција елемента бити фиксирана I у ком случају ће се приказивати на врху (header) или дну (footer).

дата-транситион – бира једну од десет уграђених анимација за учитавање нових страница.

дата-ицон – подржава педесет иконица које се могу придружити елементу. 

<!doctype html>
<html>
    <head>
		<meta charset="utf-8">
		<title>jQuery Mobile Example</title>
		<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
 
    <body>
        <section data-role="page" id="first" data-theme="a">
            <header data-role="header" data-position="fixed">
                <h1>Page 1 Header</h1>
            </header>
 
            <article data-role="content">
                <h2>Hello, world!</h2>
                <a href="#second" data-role="button" data-inline="true" data-transition="flow" data-icon="carat-r" data-iconpos="right">Go to Page 2</a>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 1 Footer</h4>
            </footer>
        </section>
 
        <section data-role="page" id="second" data-theme="b">
            <header data-role="header" data-position="fixed"  data-add-back-btn="true">
                <h1>Page 2 Header</h1>
            </header>
 
            <article data-role="content">
                <h2>Example Page</h2>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 2 Footer</h4>
            </footer>
        </section>
    </body>
</html>

Употреба тема уреди

јQуерy Мобиле обезбеђује моћан тематски фрамеwорк који допушта девелоперима да прилагоде шеме боја I одређене ЦСС аспекте УИ. Девелопери могу користити јQуерy Мобиле ТхемеРоллер[5] апликацију да прилагоде изглед. Након прављења теме у ТхемеРоллер апликацији, програмери могу преузети произвољан ЦСС документ I укључити у пројекат своју тему.[6] Свака тема може садржати до 26 јединствених узорака боја, и састоји се од заглавља, садржаја I дугмића. Комбиновање различитих узорака дозвољава девелоперу да направи шири опсег визуелних ефеката него што би могао са једним узорком по теми.Мењање различитих узорака у оквиру теме је подједнако једноставно као додавање атрибута “дата-тхеме” у ХТМЛ елемент.

Подразумевана јQуерy Мобиле тема долази са два различита узорка боја названа "а" и "б". Ово је пример како направити тоолбар са узорком "б" : 

<div data-role="header" data-theme="b"> 
	<h1>Page Title</h1> 
</div>


Већ постоји много стилских тема отвореног кода које су развијене I подржане од стране посредничких организација. Једна таква тема је Метро стyле која је развијена од стране Мицрософт Опен Тецхнологиес, Инц..[7] Метро стyле тема је направљена да опонаша УИ Метро (десигн лангуаге) који Мицрософт користи у својим мобилним оперативним системима.

Подршка мобилних прегледача уреди

Platform Version Native Пхоне Гап Опера Мобиле Опера Мини Феннец Озоне Нет фронт
0.9 8.5, 8.65 9.5 10 4.0 5.0 1.0 1.1* 0.9 4.0
иОС в2.2.1 А
в3.1.3, в3.2 А А А
в4-7.0 А А А
Сyмбиан С60 в3.1, в3.2 А А А А А C C
в5.0 C C C А C А
Сyмбиан УИQ в3.0, в3.1 C C
в3.2 C C
Сyмбиан Платформ в.3.0 А
БлацкБеррy ОС в4.5 C C C
в4.6, в4.7 C C C Б
в5.0 Б А C А
в6.0 А А А
Андроид в1.5, в1.6 А А
в2.1 А А
в2.2 А А А C А
Wиндоwс Мобиле в6.1 C C C C Б C Б C
в6.5.1 C C C А А C А
в7.0 А А C А
wебОС 1.4.1 А А
бада 1.0 А
Маемо 5.0 Б Б C Б
МееГо 1.1* А А А


Кључ:

  • А - Високог квалитета. Прегледач који може да користи медија упите (потребних за {јQуерy Мобиле}). Ови прегледачи ће бити активно тестирани на јQуерy мобиле,али можда неће моћи да у потпуности искористе његове могућности.
  • Б- Средњег квалитета Прегледач који није довољно распрострањен на тржишту да би био свакодневно тестиран, али ће на њих бити примењени алати за исправљање багова.
  • C- Ниског квалитета – Ниског квалитета. Прегледач који не може да користи медија упите. Они нису у могућности да прикажу {јQуерy Мобиле} или ЦСС садржај (приказују једноставан ХТМЛ I ЦСС садржај).
  • * - Прегледач у припреми. Овај прегледач није још у употреби, већ је у фази тестирања.



Референце уреди

  1. ^ „Мобиле Градед Броwсер Суппорт”. 
  2. ^ „Тхе Глобал Рисе оф тхе Смартпхоне”. Архивирано из оригинала 17. 06. 2018. г. Приступљено 26. 05. 2015. 
  3. ^ „јQуерy Мобиле ор Сенцха Тоуцх: Wхицх Оне Ис Беттер!”. хтмлпанда.цом. 
  4. ^ „ИБМ Wорклигхт - Унитед Статес”. Wорклигхт.цом. Архивирано из оригинала 19. 04. 2012. г. Приступљено 9. 10. 2013. 
  5. ^ „ТхемеРоллер”. 
  6. ^ „ЈQуерy Мобиле Тхеминг Овервиеw”. Архивирано из оригинала 21. 01. 2013. г. Приступљено 26. 05. 2015. 
  7. ^ „Море неwс фром МС Опен Тецх: анноунцинг тхе опен соурце Метро стyле тхеме фор јQуерy Мобиле”. 


Спољашње везе уреди

Преузето из „https://sr.wikipedia.org/w/index.php?title=JQuery_mobile&oldid=26754864”