jQuery+Mobile

=**СОДРЖИНА:**=

ВОВЕД ИНСТАЛИРАЊЕ НА jQuery Mobile ВАША ПРВА jQuery Mobile АПЛИКАЦИЈА jQuery Mobile ТРАНЗИЦИИ jQuery Mobile КОПЧИЊА jQuery Mobile ИКОНИ jQuery Mobile ЛЕНТИ СО АЛАТКИ jQuery Mobile НАВИГАЦИСКИ ЛЕНТИ jQuery Mobile ФОРМИ
 * икони во навигациските копчиња
 * икони за позиционирање

 =**ВОВЕД**=

jQuery Mobile е мулти-платформски framework кој им овозможува на веб дизајнерите да креираат веб апликации кои се оптимизирани за користење на мобилни уреди (смартфони и таблети). Негова цел е да го поедностави и зајакне развојот на мобилни веб апликации со интегрирање на HTML5, CSS3, jQuery и jQuery UI во еден framework кој е моќен, организиран и лесен за одржување. jQuery Mobile е изграден врз веќе постоечкиот jQuery. Има Touch-оптимизација, користи responsive распоред на елементите, со што елементите автоматски се адаптираат на различни големини на уредите. Наместо да пишуваме апликација за секој мобилен уред и оперативен систем, со jQuery Mobile овој проблем е решен, бидејќи користи само HTML, CSS и JavaScript, кои се стандард за сите мобилни веб прелистувачи и оперативни системи.

Доста лесен е за учење, а исто така е и многу едноставен за работа. Со тоа што jQuery Mobile ги следи отворените веб стандарди, можеме да бидеме сигурни дека нашата апликација може да добие максимална поддршка и компатибилност со широк спектар на веб прелистувачи и платформи. Еднаш ја пишуваме нашата апликација и таа ќе функционира безпрекорно на iPhone, iPad, Andorid телефони и таблети, Blackberry, Windows, Symbian и многу други. Кодот ќе работи без проблем и на Chrome, Firefox, Opera, Internet Explorer, Safari… Исто така, без проблем ќе работи и на smart TV или било кој друг гаџет кој има компатибилен прелистувач кој е во согласност со отворените веб стандарди. Потенцијалот на пазарот е феноменален.

Мобилните апликации доаѓаат во две основни верзии: native-апликации, кои се компајлирани програми што работат на уредот, и мобилни веб апликации, кои работат внатре во веб прелистувачот на уредот. Native апликациите имаат многу предности, но имаат и едно важно ограничување: не се портабилни.

Со кодирањето native апликации, ќе мора да го пишуваме кодот во различни јазици, зависно од платформата. Тогаш ќе мора да го компајлираме кодот за секоја платформа, и да изгрдиме бинарни пакети кои ќе работат на уредот. Надградба на апликацијата за поддршка на следната верзија ќе значи и враќање назад и проверка/поправање на кодот, обнова, препакување и тн. Овие обврски и проблеми се зголемуваат доколку се додаде поддршка и се направи посебна верзија за секоја платформа. Но овој процес обично е потешко да се менаџира, па затоа најеверојатно најдобро е да се направи верзија за само една или две платформи. Но сепак, важно е да се напомене дека секоја технологија, секој framework (во случајов jQuery Mobile) има свои предности и недостатоци. Во случајов, со native апликациите имаме пристап до изворниот оперативен систем и карактеристиките на уредот, како на пр. камера, акцелерометар, контакти, календар и др. Но денес постојат библиотеки кои се на располагање, со кои може да се пристапи до native карактеристиките на уредот користејќи JavaScript API. PhoneGap е една од тие популарни библиотеки.

Од друга страна, мобилните веб апликации се креирани во HTML, CSS и JavaScript, и работат во веб прелистувачот на мобилниот уред.

jQuery Mobile работи на сите популарни смартфони и таблети:


 * iOS
 * Android
 * BlackBerry
 * Windows Phone
 * palm webOS
 * Symbian

и др.

 =**ИНСТАЛИРАЊЕ НА jQuery Mobile**=

Има неколку начини да се започне со користење jQuery Mobile на вашиот веб сајт:
 * со вклучување на jQuery Mobile библиотеката од CDN (препорачливо)
 * со симнување на jQuery Mobile библиотеката од jQuery.com

За да го вклучиме јQuery Mobile од CDN (Content Delivery Network), потребно е само да ги вклучиме следниве .css и .js фајлови директно во HTML страната:

code     code

Доколку сакаме да ја симнеме и хостираме на наш сервер jQuery Mobile библиотеката:

code     code

Симнатите фајлови треба да бидат во истиот директориум со страните на кои сакаме да го користиме jQuery Mobile.

 =**ВАША ПРВА jQuery Mobile АПЛИКАЦИЈА**=

Едноставна jQuery Mobile апликација се состои од страна, која ја формира главната структура на нашата апликација. Страната се состои од три главни делови: header, содржина на страната и footer. Подоцна, можеме да изградиме апликација со повеќе функционалности и работни текови користејќи повеќе страни, секоја страна со своја функционалност, логика и навигациски тек.

Во следниов пример ќе објасниме како се креира едноставна страна во jQuery Mobile, со ставена од трите основни елементи header, содржина на страната и footer.



code <!DOCTYPE html>      Header СОДРЖИНА Footer

code

data-* атрибутите се HTML5 атрибути кои се користени од страна на jQuery Mobile за креирање на атрактивен и "touch-friendly" изглед за мобилните уреди.
 * **data-role="page"** е страната која е прикажана во веб прелистувачот
 * **data-role="header"** креира toolbar најгоре на страната, кој најчесто се користи за наслов и копчиња за пребарување
 * **data-role="main"** ја дефинира содржината на страната. Пр. текст, слики, форми, компчиња и др.
 * **"ui-content"** класата додава дополнителни маргини на содржината на страната

jQuery Mobile прави разлика помеѓу HTML документи и страни. jQuery Mobile апликациајта може да биде составена од еден HTML документ со повеќе страни во него, користејќи го data-role=”page” атрибутот секоја страна ќе биде линкувана со користење на anchors, секоја страна со свој уникатен id и href атрибут; или да биде составена од повеќе документи, секој од нив да содржи свој посебен data-role=”page” атрибут и нормални линкови до посебно креирани документи.

code <!DOCTYPE html>    <script src="http://code.jquery.com/jquery-1.10.2.min.js"> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">

Header

СОДРЖИНА НА ПРВА СТРАНА <a href="#pagetwo">Оди на 2ра страна</a>

Footer

Header

СОДРЖИНА НА ВТОРА СТРАНА <a href="#pageone">Оди на 1ва страна</a>

Footer

code

Времето на вчитување на веб апликацијата може да биде подолго доколку користиме внатрешно линкување помеѓу страните. Доколку сакаме апликацијата да се вчитува побрзо, пожелно е секоја страна да ја креираме како посебен фајл, и да ја линкуваме на следниов начин:

code <a href="strana2.html">Оди на страна 2</a>

code

 =**jQuery Mobile ТРАНЗИЦИИ**=

jQuery Mobile вклучува CSS3 ефекти кои ни овозможуваат да го избереме начинот на кој ќе се отвора страната. За да се постигне transition ефектот, веб прелистувачот мора да поддржува CSS3 3D Transforms. Transition ефектот може да се зададе на секој линк или форма, со користење на data-transition атрибутот:

code <a href="#nekojlink" data-transition="slide">Slide ефект за страна 2</a> code

Следнава листа содржи транзиции кои може да се користат со data-transition атрибутот:


 * fade – избледува до следната страна
 * flip – врти до следната страна од назад кон напред
 * flow – ја фрла тековната страна и доаѓа со следната страна
 * pop – оди на следна страна како popup прозорец
 * slide – лизга до следната страна од десно кон лево
 * slidefade – лизга од десно кон лево и избледува во следна страна
 * slideup – лизга до следна страна од долу нагоре
 * slidedown – лизга до следна страна од горе надолу
 * turn – врти следна страна
 * none – без transition ефект

Сите ефекти од оваа листа исто така поддржуваат и обратни акции, пр. доколку сакаме страната да слајда од лево кон десно, наместо од десно кон лево, го користиме атрибутот data-direction со вредност “reverse”.

ПРИМЕР:

code <a href="#strana2" data-transition="slide" data-direction="reverse">Slide</a> code

 =**jQuery Mobile КОПЧИЊА**=



Копчиња во jQuery Mobile може да бидат креирани на три начини:

code <input type="button" value="Button"> code code <button class="ui-btn">Button code code <a href="#" class="ui-btn">Button</a> code
 * со користење на елементот
 * со користење на елементот со class=”ui-btn”
 * со користење на <a> елементот со class=”ui-btn”

Копчињата во jQuery Mobile се автоматски стилизирани, правејќи ги поатрактивни и корисни и за мобилни уреди и за десктоп компјутери. За линкање помеѓу страни, препорачливо е да се користи <a> елементот со class="ui-btn", а и елементите за испраќање на формулари. За поврзување со копчиња помеѓу страници, се користи <a> елементот со class="ui-btn": ПРИМЕР: <a href="#pagetwo" class="ui-btn">Go to Page Two</a>

jQuery Mobile овозможува лесен начин за групирање на копчиња заедно. Се користи атрибутот data-role="controlgroup" заедно со data-type="horizontal|vertical", за да се специфицира дали копчињата треба да се групираат хоризонтално или вертикално.

ПРИМЕР: code <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn">Button 3</a>

code

CSS класи за линк копчињата:


 * ui-btn-b - ја променува позадината на копчето во црна, а текстот останува бел
 * ui-corner-all - краевите на копчето да бидат заоблени
 * ui-mini - го прави кочето помало
 * ui-shadow - додава сенка на копчето

Доколку сакаме да користиме повеќе од една класа, ги одвојуваме секоја од класите со празно место, пример: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

Стандардно, копчињата имаат сенка и заоблени краеви. <a> и елементите немаат.

 =**jQuery Mobile ИКОНИ**=

За да се додаде икона на копчето, се користи ui-icon класата, а позиционирањето на иконата се врши со класата за позиционирање (ui-btn-icon-pos).

code <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a> code

Подолу се наведени некои од иконите кои се достапни во jQuery Mobile:



Може да се изврши и позиционирање на иконите, односно дефинирање на нивната позиција во копчето. Има три вредности за позиционирање: top, right, bottom и left. За специфицирање на позицијата се користи класата ui-btn-icon:

code <a href="#nekojlink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a> <a href="#nekojlink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a> <a href="#nekojlink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a> <a href="#nekojlink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a> code

 =**jQuery Mobile ЛЕНТИ СО АЛАТКИ**=

Елементите на лентата со алатки најчесто се ставени во header-от и footer-от, за полесна навигација. Header-от е лоциран на најгоре на страната и најчесто содржи лого/наслов на страната или 2-3 копчиња, најчесто копчињата Home, Options или Search. Копчиња може да се додаваат и на левата и на десната страна на header-от.

Следниов пример, ќе додаде копче Home на левата страна и копче Search на десната страна на header-от.

code <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> Добредојде <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a> code



Footer-от е лоциран најдолу на страната. Пофлексибилен е од header-от и пофункционален, исто така може да претрпи повеќе измени низ страниците, па затоа може да содржи копчиња колку што е потребно.

Header-от и footer-от може да се позиционираат на три начини:


 * Inline – Header-от и footer-от се во линија со содржината на страната.
 * Fixed - Остануваат позиционирани на најгоре и најдолу на страната.
 * Fullscreen – Делуваат како да се фиксирани; header-ot и footer-от остануваат позиционирани, но над содржината на страната. Исто така, имаат и мал ефект на провидност.

code code



code <!DOCTYPE html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">

<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a> Header <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a>

СОДРЖИНА

<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Footer копче 1</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Footer копче 2</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Footer копче 3</a>

code

 =**jQuery Mobile НАВИГАЦИСКИ ЛЕНТИ**=

Лентата за навигација се состои од група на линкови кои се хоризонтално подредени, обично во рамките на header-от и footer-от. Стандардно, линковите кои се наоѓаат во лентата за навигација автоматски се претвораат во копчиња (нема потреба да се користи класата class="ui-btn" или data-role="button"). Копчињата стандардно се широки колку и содржината на страната. Доколку се две копчиња, секое од нив завзема 50% од ширината, доколку е едно копче 100%, доколку се три копчиња делат по 33.3%. Доколку сакаме да додадеме повеќе од 5 копчиња во лентата за навигација, тогаш таа ќе се подели во повеќе линии.


 * Икони во навигациските копчиња**

За да се додаде икона во навигациското копче, се користи data-icon атрибутот:

code <!DOCTYPE html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">

Header <ul> <li><a href="#" data-icon="home">Дома</a></li> <li><a href="#" data-icon="arrow-r">Страна 2</a></li> <li><a href="#" data-icon="search">Пребарувај</a></li> </ul>

СОДРЖИНА

Footer

code



data-icon атрибутите користат исти вредности како CSS класите објаснети во делот "jQuery Mobile ИКОНИ". Единствената разлика е што наместо да користиме class="ui-icon-вредност", ние користиме атрибут од data-icon="вредност".




 * Икони за позиционирање**

Исто како со класата "ui-btn-icon-позиција", може да избереме каде треба да биде позиционирана иконата во навигациското копче: top, right, bottom или left. data-iconpos атрибути за специфицирање на позиција:


 * data-iconpos="top"
 * data-iconpos="right"
 * data-iconpos="bottom"
 * data-iconpos="left"

 =**jQuery Mobile ФОРМИ**=

jQuery Mobile користи CSS за да ги стилизира HTML form елементите, правејќи ги атрактивни и полесни за користење. Во jQuery Mobile може да се користат следниве form контроли:


 * Text Inputs
 * Search Inputs
 * Radio Buttons
 * Checkboxes
 * Select Menus
 * Sliders
 * Flip Toggle Switches

Кога се работи со jQuery Mobile формите треба да се знае дека:
 * елементот мора да има method и action атрибути.
 * секој form елемент мора да има уникатен "id" атрибут. Ова е така бидејќи jQuery Mobile single-page навигацискиот модел дозволува да има повеќе страни во исто време.
 * секој form елемент мора да има ознака. Треба for атрибутот на ознаката да биде ист со id-то на елементот.

code <!DOCTYPE html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">

<form method="post" action="forma.php"> Име: <input type="text" name="fname" id="fname">

code

Се користи placeholder за да специфицира мало објаснување за тоа каква вредност треба да се внесе во полето:

code Име: <input type="text" name="fname" id="fname" placeholder="Внеси име..."> code

Доколку сакаме "clear button" (X од десна стана на полето за инпут), додаваме data-clear-btn="true" атрибут:

code Име: <input type="text" name="fname" id="fname" data-clear-btn="true"> code

<span style="display: block; height: 1px; left: -40px; overflow: hidden; position: absolute; top: 410px; width: 1px;"> Доста лесен е за учење, а исто така е и многу едноставен за работа. Со тоа што jQuery Mobile ги следи отворените веб стандарди, можеме да бидеме сигурни дека нашата апликација може да добие максимална поддршка и компатибилност со широк спектар на веб прелистувачи и платформи. Еднаш ја пишуваме нашата апликација и таа ќе функционира безпрекорно на iPhone, iPad, Andorid телефони и таблети, Blackberry, Windows, Symbian и многу други. Кодот ќе работи без проблем и на Chrome, Firefox, Opera, Internet Explorer, Safari… Исто така, без проблем ќе работи и на smart TV или било кој друг гаџет кој има компатибилен прелистувач кој е во согласност со отворените веб стандарди. Потенцијалот на пазарот е феноменален.