Поскольку количество счастливых обладателей мобильных телефонов растёт с каждым днём, необходимо идти в ногу со временем и подстраивать под них свои сайты. Создание сайтов для мобилок несколько отличаются от традиционных устоев.
В помощь нам, умные люди слепили целую систему на основе 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 с нуля. Надеюсь, статья вам понравилась!