Привет, Гость!
Главная
Вход
Библиотека | Дизайн/Разметка

jQuery Mobile: Основы

Кто добавил:ZIP (08.09.2011 / 14:07)
Рейтинг:rating 199 article (1)
Число прочтений:11189
Комментарии:1
Поскольку количество счастливых обладателей мобильных телефонов растёт с каждым днём, необходимо идти в ногу со временем и подстраивать под них свои сайты. Создание сайтов для мобилок несколько отличаются от традиционных устоев.

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

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

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

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>jQuery Mobile</title>
05 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
06 <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
07 <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
08 </head>
09 <body>
10
11 <div data-role="page">
12
13 <div data-role="header">
14 <h1>The title</h1>
15 </div><!-- /header -->
16
17 <div data-role="content">
18 <p>The content</p>
19 </div><!-- /content -->
20
21 <div data-role="footer">
22 <h4>The Footer</h4>
23 </div><!-- /header -->
24 </div><!-- /page -->
25
26 </body>
27 </html>

Теперь сохраните эту страницу под именем 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 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>jQuery Mobile</title>
05 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
06 <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
07 <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
08 </head>
09
10 <body>
11
12 <div data-role="page">
13
14 <div data-role="header">
15 <h1>Some Title</h1>
16 </div><!-- /header -->
17
18 <div data-role="content">
19 <p>The content</p>
20 <p><a href="index.php">Click me to show the first page!</a></p>
21 </div><!-- /content -->
22
23 <div data-role="footer">
24 <h4>Page Footer</h4>
25 </div><!-- /footer-->
26 </div><!-- /page -->
27 </body>
28 </html>


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

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

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

01 <!-- Start of first page -->
02 <div data-role="page" id="first">
03
04 <div data-role="header">
05 <h1>First</h1>
06 </div><!-- /header -->
07
08 <div data-role="content">
09 <p>The content</p>
10 <p>View internal page called <a href="#second">second</a></p>
11 </div><!-- /content -->
12
13 <div data-role="footer">
14 <h4>Page Footer</h4>
15 </div><!-- /footer -->
16 </div><!-- /page -->
17
18 <!-- Start of second page -->
19 <div data-role="page" id="second">
20
21 <div data-role="header">
22 <h1>Second</h1>
23 </div><!-- /header -->
24
25 <div data-role="content">
26 <p>I'm the second content</p>
27 <p><a href="#first">Back to first</a></p>
28 </div><!-- /content -->
29
30 <div data-role="footer">
31 <h4>Page Footer</h4>
32 </div><!-- /footer -->
33 </div><!-- /page -->

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

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

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

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>jQuery Mobile</title>
05 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
06 <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
07 <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
08 </head>
09 <body>
10
11 <div data-role="page">
12
13 <div data-role="header" data-theme="b">
14 <h1>The title</h1>
15 </div><!-- /header -->
16
17 <div data-role="content" data-theme="b">
18 <p>The content</p>
19 </div><!-- /content -->
20
21 <div data-role="footer" data-theme="b">
22 <h4>The Footer</h4>
23 </div><!-- /header -->
24 </div><!-- /page -->
25
26 </body>
27 </html>

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

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

JohnCMS 8.0.0

© JohnCMS