Вступление
JQuery успешно достигла мира мобильных телефонов. Он называется jQuery Mobile, он невероятно прост в использовании, вам просто нужно включить файлы jQuery Mobile в заголовок и добавить несколько атрибутов данных в разметку, и все готово. Все стили обрабатываются jQuery и включенным CSS-файлом, так что вы можете создать полноценную мобильную веб-страницу всего за несколько минут. В этом примере мы собираемся создать простую страницу, которая загружает внутренние ссылки, используя эффекты перехода. На первых шагах будет дано общее описание использования jQuery Mobile, тогда как остальные расскажут о конкретных элементах, используемых в демоверсии.
Мобильные файлы jQuery в заголовке
Это просто; Вы просто должны включить файлы инфраструктуры. Вы можете загрузить их с сайта jQuery Mobile или загрузить файлы с их собственного сайта или CDN, что сократит расходы на пропускную способность и поддержит скорость вашего сайта.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>Атрибут разметки HTML
Примените теги атрибутов данных к вашему HTML, где n — это функция, которую вы хотите установить.
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>My Site</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
<li data-role="list-divider">Transition Effects</li>
<li><a href="effects.php?id=slide" data-transition="slide">Slide</a></li>
<li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li>
<li><a href="effects.php?id=slidedown" data-transition="slidedown">Slide Down</a></li>
<li><a href="effects.php?id=pop" data-transition="pop">Pop</a></li>
<li><a href="effects.php?id=flip" data-transition="flip">Flip</a></li>
<li><a href="effects.php?id=fade" data-transition="fade">Fade</a></li>
</ul>
<br /><br />
<ul data-role="listview" data-dividertheme="e">
<li data-role="list-divider">Seamless List (margin-less)</li>
<li><a href="#" data-transition="slide">Example Item 1</a></li>
<li><a href="#" data-transition="slide">Example Item 2</a></li>
<li><a href="#" data-transition="slide">Example Item 3</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>© Copyright Info or Site URL</h1>
</div>
</div>
Элементы data-role определяют, какой DIV / блок следует использовать в пользу заголовка, нижнего колонтитула и содержимого, которые находятся в оболочке главной страницы. Вот атрибуты данных, использованные в этом примере.
- Data-роль — определяет характер элемента оболочки, который может быть установлен на страницу, верхний колонтитул, содержимое и нижний колонтитул.
- Data-position — указывает, должен ли быть зафиксирован элемент, который визуализируется сверху или снизу.
- Data-Inset — указывает, должен ли элемент быть внутри полей содержимого или снаружи.
- Data-transition — указывает, какой переход использовать при загрузке новой страницы. Это может быть установлено, чтобы скользить, слайд, слайд-н-ролл, поп, флип или исчезать.
- Data-theme — указывает, какую тему дизайна использовать для элементов.
- Data-dividertheme — указывает тему для разделителей списка, которая использует те же параметры, что и data-theme.
Добавить контент / Опубликовать онлайн
jQuery Mobie отображает то же поведение, что и браузеры для настольных компьютеров. Вам не обязательно предоставлять свой смартфон, хотя это может помочь устранить ошибки.
Пример объяснил
Приведенный выше пример для удобства разбит на файл верхнего и нижнего колонтитула, всегда не стесняйтесь использовать любой метод кодирования, который вы предпочитаете.
Вывод
JQuery определенно начинает быть частью нашего мира дизайна сегодня. Поэтому я не удивлюсь, если придет время, когда даже самое маленькое интернет-устройство будет читать jQuery.