Поскольку количество счастливых обладателей мобильных телефонов растёт с каждым днём, необходимо идти в ногу со временем и подстраивать под них свои сайты. Создание сайтов для мобилок несколько отличаются от традиционных устоев. В помощь нам, умные люди слепили целую систему на основе jQuery и jQuery UI. Знакомьтесь - jQuery Mobile Сейчас я вам продемонстрирую всю прелесть применения данной библиотеки. Когда вы начинаете что-то разрабатывать при помощи jQuery Mobile, первое что нужно сделать, так это создать шаблон. Так что открывайте свой любимый текстовой редактор и пишите: 01 02 03 04 jQuery Mobile 05 06 07 08 09 10 11
12 13
14

The title

15
16 17
18

The content

19
20 21
22

The Footer

23
24
25 26 27 Теперь сохраните эту страницу под именем index.php и откройте в браузере. Всё работает. Как вы уже заметили мы загрузили jQuery, jQuery Mobile c Google, и jQuery Mobile CSS Если вы посмотрите повнимательнее, то заметите странный атрибут data-role. Именно по данному атрибуту jQuery Mobile отыщет данный элемент. Поехали дальше. В jQuery Mobile есть 2 способа работы ссылки: внутренне и внешнее. Сейчас всё покажу: Внешняя ссылка Когда вы нажмёте на какую-то ссылку на странице (к примеру products.html), jQuery пропарсит ссылку, создаст Ajax запрос (Hijax) и покажет сниппет загрузки. Если Ajax вернёт success, то новая страница добавится в DOM, все виджеты мобилки авто инициализируются и плавно появится новая страница. Если что-то пойдёт не так, фрэймворк покажет небольшое сообщение об ошибке, которое вскоре исчезнет. Создайте новый файл и впишите код: 01 02 03 04 jQuery Mobile 05 06 07 08 09 10 11 12
13 14
15

Some Title

16
17 18
19

The content

20

Click me to show the first page!

21
22 23
24

Page Footer

25
26
27 28 Сохраните данный файл и откройте в браузере. Если вы нажмёте на ссылку, то увидите процесс загрузки, затем новую страницу и кнопку возврата. Если что-то пойдёт не так, то вам выведется сообщение об ошибке. Внутренняя ссылка Один html документ может содержать несколько страниц, которые представлены разными div с атрибутом data-role = "page". Каждый такой блок должен содержать уникальный id (id="first"), который будет использоваться для ссылки (href="#first"). Когда пользователь нажмёт на кнопку, фрэймворк найдёт блок с данным id и отобразит его. 01 02
03 04
05

First

06
07 08
09

The content

10

View internal page called second

11
12 13
14

Page Footer

15
16
17 18 19
20 21
22

Second

23
24 25
26

I'm the second content

27

Back to first

28
29 30
31

Page Footer

32
33
Всё это нужно записать в теге body Тут нужно уточнить, что если вы сделали внешнюю ссылку на страницу с внутренними ссылками, то тогда данной ссылке нужно задать атрибут rel=”external”. Это позволит странице полностью перезагрузиться и очистить Ajax хэш. Это принципиально важно т.к. Ajax использует данные хэш (#) для того, чтобы хранить историю в то время как многостраничные документы хранят свою историю и из-за этого может произойти конфликт. Темы Для того, чтобы изменить тему, вам необходимо использовать атрибут data-theme. Попробуйте: 01 02 03 04 jQuery Mobile 05 06 07 08 09 10 11
12 13
14

The title

15
16 17
18

The content

19
20 21
22

The Footer

23
24
25 26 27 Запустите эту страницу в браузере и увидите результат. Можете попробовать и другие буквы, например: е или а Мне кажется, что для основ информации достаточно. Вскоре мы выпустим урок по созданию сайта на jQuery Mobile с нуля. Надеюсь, статья вам понравилась!