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

В помощь нам, умные люди слепили целую систему на основе 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 с нуля. Надеюсь, статья вам понравилась!