Introduction to jQuery Mobile
Introduction to jQuery Mobile
The jQuery mobile strategy can be easily explained - this is the introduction of custom JavaScript into the most frequently used browsers on mobile platforms.
The core value of our approach is a wide range of platforms supported by jQuery Mobile. We make every effort that jQuery supports all mobile browsers, at least occupying a nominal market share.
To provide broad support, all pages in jQuery Mobile are built on pure HTML, this ensures compatibility with quite a few web-based devices. In devices that interpret CSS and JavaScript, jQuery Mobile uses progressive methods to unobtrusively transform semantic pages using the rich interactive experience and power of Query and CSS. Accessibility standards for active Internet applications such as WAI-ARIA are tightly integrated throughout the structure to provide support for screen reading.
Key features
- Built on jQuery familiar syntax
- Compatible with all major mobile platforms - iOS, Android, Blackberry, Palm WebOS, Nokia / Symbian, Windows Mobile, bada, MeeGo and with basic support for all devices that understand HTML
- Small file size (12kb including functionality for all mobile) and minimal image dependency to increase speed
- HTML5 markup driven configuration pages and minimum requirements for the rapid development of scenarios
- A progressive approach, strengthening the core content and functionality of all mobile, electronic books, Desktop Platform, will be easily used on new mobile platforms.
- Automatic initialization using HTML5 date-role attributes in the HTML markup, automatically initializes all the jQuery Mobile widgets found on the page.
- Accessibility standards for active Internet applications such as WAI-ARIA are included to provide convenient screen reading (for example, VoiceOver in IOS) and other assistive technologies.
- A simple API that streamlines the process of supporting Touch, mouse, and other types of input devices.
- New modules expand the capabilities of touch control.
- Powerful themes for visualizing applications make it easy to build interfaces.
Supported Platforms
There are still a fair amount of errors, but they will be fixed to version 1.0 in January. At the alfa stage, jQuery Mobile was tested on the following devices:
- Apple iOS: iPhone, iPod Touch, iPad (all versions)
- Android: all devices (all versions)
- Blackberry Torch (version 6)
- Palm WebOS Pre, Pixi
- Nokia N900 (in development)
Pages
JQuery Mobile includes automatic page loading using AJAX, with the return button enabled, animation settings, and simple dialog display tools. The goal of this model is to allow developers to create websites using best practices - where regular links will work without any special configuration, while creating native applications, which could not be achieved using standard HTML.
Mobile page structure.
The jQuery Mobile site must start with HTML5 'DOCTYPE' in order to take full advantage of the framework features. (Older devices and browsers that do not understand HTML5 will safely ignore doctype and various special attributes). In the heading header, there are links to jQuery, jQuery Mobile, Mobile CSS theme and other necessary components.
<! DOCTYPE html> <html> <head> <title> Page Title </ title> <link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src = "http://code.jquery.com/jquery-1.4.3.min.js"> </ script> <script src = "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </ script> </ head> <body> ... </ body> </ html>
Inside the body tag, each presentation or page on a mobile device is defined by an element (usually a div) with the data-role = "page" attribute.
<code>
<div data-role = "page">
...
</ div>
</ code>
Within the “page” container, any valid HTML code can be used, where direct children of “page” should be divs with the attributes “header”, “content”, and “footer”.
<div data-role = "page">
<div data-role = "header"> ... </ div>
<div data-role = "content"> ... </ div>
<div data-role = "footer"> ... </ div>
</ div>
Finished simple page template
Putting it all together, a standard page should start with a template:
<! DOCTYPE html>
<html>
<head>
<title> Page Title </ title>
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src = "http://code.jquery.com/jquery-1.4.3.min.js"> </ script>
<script src = "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </ script>
</ head>
<body>
<div data-role = "page">
<div data-role = "header">
<h1> Page Title </ h1>
</ div> <! - / header ->
<div data-role = "content">
<p> Page content goes here. </ p>
</ div> <! - / content ->
<div data-role = "footer">
<h4> Page Footer </ h4>
</ div> <! - / header ->
</ div> <! - / page ->
</ body>
</ html>
External pages containing a link
JQuery Mobile automates the process of creating Ajax sites and applications. By default, when you click on a link pointing to an external page (for example, products.html), the structure parses the HREF links, formulates the Ajax request, and displays the download. If the Ajax request is successfully completed, the new page content will be added to the DOM, all mobile widgets will be automatically initialized, and the new page will be displayed. If the Ajax request fails, a separate layer will display an error message that will disappear after a short period of time, so that it does not break the navigation stream.
')
Links inside the page
A single HTML document can contain multiple pages that are loaded by stacking multiple div elements with data-role = "pages" attributes. Each page must have a unique identifier that will be used for communication between indoor units using HREF = "# Foo". When you click on the link, it will search for the internal page (page) with the desired ID and display this block on the screen. It is important to note that if you link a page that was loaded via Ajax with a page with several internal pages, you must add REL = “external” to the link. This tells the framework to completely reload the page and clear the hash in the URL. This is important because Ajax pages use bars (#) to track history, and in-page links use a hash inside their pages, this can cause conflicts. For example, a link to a page containing several internal pages will look like this:
<a href="multipage.html" rel="external"> Multi-page link </a>
Here is an example of two pages of a site built using a div, the navigation of which is tied to the id of these elements. Note that the identifiers on the page are only needed to support the internal linking of the pages, and are not required if each page is a separate HTML document. Here are two pages inside the body element:
<body> <! - Start of first page -> <div data-role = "page" id = "foo"> <div data-role = "header"> <h1> foo </ h1> </ div> <! - / header -> <div data-role = "content"> <p> I'm first in the order of the order. </ p> <p> View internal page called <a href="#bar"> bar </a> </ p> </ div> <! - / content -> <div data-role = "footer"> <h4> Page Footer </ h4> </ div> <! - / header -> </ div> <! - / page -> <! - Start of second page -> <div data-role = "page" id = "bar"> <div data-role = "header"> <h1> Bar </ h1> </ div> <! - / header -> <div data-role = "content"> <p> I'm first in the order of the order. </ p> <p> <a href="#foo"> Back to foo </a> </ p> </ div> <! - / content -> <div data-role = "footer"> <h4> Page Footer </ h4> </ div> <! - / header -> </ div> <! - / page -> </ body>
PLEASE NOTE: Since we use hash navigation to track history for all pages, it is currently not possible to implement anchor type links (index.html # Foo). Source http://jquerymobile.com/demos/1.0a2/
Source: https://habr.com/ru/post/130473/
All Articles