Поскольку количество счастливых обладателей мобильных телефонов растёт с каждым днём, необходимо идти в ногу со временем и подстраивать под них свои сайты. Создание сайтов для мобилок несколько отличаются от традиционных устоев.

В помощь нам, умные люди слепили целую систему на основе jQuery и jQuery UI. Знакомьтесь - jQuery Mobile

Сейчас я вам продемонстрирую всю прелесть применения данной библиотеки. Когда вы начинаете что-то разрабатывать при помощи jQuery Mobile, первое что нужно сделать, так это создать шаблон.

Так что открывайте свой любимый текстовой редактор и пишите:

01

02

03

04

05

06

07

08

09

10

11

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

05

06

07

08

09

10

11

12

27

28

Сохраните данный файл и откройте в браузере. Если вы нажмёте на ссылку, то увидите процесс загрузки, затем новую страницу и кнопку возврата.

Если что-то пойдёт не так, то вам выведется сообщение об ошибке.

Внутренняя ссылка

Один html документ может содержать несколько страниц, которые представлены разными div с атрибутом data-role = "page". Каждый такой блок должен содержать уникальный id (id="first"), который будет использоваться для ссылки (href="#first"). Когда пользователь нажмёт на кнопку, фрэймворк найдёт блок с данным id и отобразит его.

01

02

17

18

19

Всё это нужно записать в теге body

Тут нужно уточнить, что если вы сделали внешнюю ссылку на страницу с внутренними ссылками, то тогда данной ссылке нужно задать атрибут rel=”external”. Это позволит странице полностью перезагрузиться и очистить Ajax хэш. Это принципиально важно т.к. Ajax использует данные хэш (#) для того, чтобы хранить историю в то время как многостраничные документы хранят свою историю и из-за этого может произойти конфликт.

Темы

Для того, чтобы изменить тему, вам необходимо использовать атрибут data-theme. Попробуйте:

01

02

03

04

05

06

07

08

09

10

11

25

26

27

Запустите эту страницу в браузере и увидите результат. Можете попробовать и другие буквы, например: е или а

Мне кажется, что для основ информации достаточно. Вскоре мы выпустим урок по созданию сайта на jQuery Mobile с нуля. Надеюсь, статья вам понравилась!