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