jquery-mobileНачало работы с jquery-mobile
замечания
Это происходит непосредственно с веб-сайта JQuery Mobile:
http://jquerymobile.com/about/
«jQuery Mobile - это система пользовательского интерфейса на основе HTML5, предназначенная для создания интерактивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах. Она построена на основе прочного jQuery и jQuery UI и предлагает Ajax-навигацию с переходы страниц, события касания и различные виджеты. Его легкий код построен с прогрессивным улучшением и имеет гибкий, легко настраиваемый дизайн ». - Команда JQuery Mobile
Я настоятельно рекомендую перейти на сайт, чтобы узнать больше о JQuery Mobile. Это всего лишь выдержка, чтобы помочь новичкам.
Вы также можете найти больше примеров и информации на официальной странице jquery-mobile: https://jquerymobile.com/demos
Настроить
Текущая версия JQuery Mobile - 1.4.5 и может быть загружена здесь: https://jquerymobile.com/
- Загрузите zip-файл и извлеките все файлы.
- Создайте папку библиотеки (или lib) внутри вашего приложения (внутри папки www).
- Создайте папку jquery-mobile внутри папки lib (я назвал мой jqm).
- Поместите все файлы jquery-mobile, которые вы извлекли из папки jquery-mobile. Теперь вы можете ссылаться на эти файлы в файле index.html.
В приведенном ниже коде файлы javascript и css включены по URL-адресу. Вы также можете следовать указанным выше пунктам и включать их по пути, на котором он расположен на вашей локальной машине, то есть:
<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
...
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
Это мини-версии файлов css и js. В качестве альтернативы вы можете включить неминифицированную версию во время разработки, чтобы ее было легче читать, если вам нужно ее копать. Если вы это сделаете, я бы рекомендовал переключить их обратно на мини-версии при развертывании на производство.
<!-- it is imported inside head tags. -->
<!-- no additional files needed, if css and js referred with full path. -->
<!DOCTYPE html>
<html>
<head>
<!-- Viewport setup. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery Mobile styles come first before js. -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Basic jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- jQuery Mobile library kind of extends upon jQuery -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- example page element using jQuery mobile tags: -->
<div data-role="page" id="pageone">
<div data-role="header" id="pageone-header">
<h3>Insert Page header Here</h3>
</div><!-- /header -->
<div role="main" class="ui-content" id="pageone-content">
<center><h3>Page title</h3></center>
<!-- All HTML for the page content goes here -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Insert Page footer Here</h4>
</div><!-- /footer -->
</div>
</body>
</html>