14. jQuery Mobile Like jQuery UI, jQuery Mobile consists of a suite of related components that can be used a la carte but work together seamlessly The framework provides an Ajax-driven navigation system (Ajax: next slide) mobile-optimized interaction elements advanced touch event handlers
71
Embed
14. jQuery Mobile Like jQuery UI, jQuery Mobile consists of a suite of related components that can be used a la carte but work together seamlessly The.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
14. jQuery Mobile Like jQuery UI, jQuery Mobile consists of a suite of related
components that can be used a la carte but work together seamlessly
The framework provides
an Ajax-driven navigation system (Ajax: next slide)
mobile-optimized interaction elements
advanced touch event handlers
Ajax: short for asynchronous JavaScript + XML
It's a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications
Applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page
Data can be retrieved using the XMLHttpRequest object
Despite the name,
use of XML isn’t required: JSON is often used instead
the requests don’t have to be asynchronous
The following browsers support the jQuery mobile experience
Apple iOS (3.1-4.2)
Android (1.6-2.3) all devices
Blackberry 6
Windows Phone 7 Mango
Palm WebOS (1.4)
Opera Mobile (10.1)
Opera Mini (5.02)
Firefox Mobile (beta)
See http://jquerymobile.com/download/ for info on downloading and using the CDN
<li><a href="drupal-7.html">Drupal 7 Development by Example</a></li>
<li><a href="jq-game.html">jQuery Game Development Essentials</a></li>
<li><a href="jqmobile-cookbook.html">jQuery Mobile Cookbook</a></li>
<li><a href="jquery-designers.html">jQuery for Designers</a></li>
</ul>
</div>
</div></body>
jQuery Mobiles notices the page header
Renders a standard-looking mobile header bar across the top of the page
If text is too long for the header bar,
jQuery Mobile truncates it and adds an ellipsis at the end
We can rotate the device and get landscape orientation
This is all that’s required to produce Ajax navigation
To enable animated page transitions, any link pointing to an external page is loaded via Ajax
The framework parses the link’s href to create an Ajax request and displays the loading spinner
When the link to the page is clicked,
jQuery Mobile loads the page with an Ajax call
grabs the part of the document marked with data-role="page"
displays this content using a fading transition
Similar markup in the pages linked in the list—e.g., drupal-7.html
<div data-role="page">
<div data-role="header">
<h1>Drupal 7 Development by Example</h1>
</div>
<div data-role="content" class="book">
<img src="images/drupal-7.jpg"
alt="Drupal 7 Development by Example" />
<div class="title">Drupal 7 Development by Example</div>
<div class="author">Kurt Madel</div>
</div></div>
An Ajax application is often no more than a request for a chunk of HTML
This is Asynchronous HTTP and HTML (AHAH)
Delivering Multiple Pages in One Document jQuery Mobile lets us deliver the same user experience even if all
the content is within a single document (and not delivered by Ajax)
Link the anchors within the page to internal pages with id attributes using the # notation for fragment identifiers
Mark those divs with data-role="page" as if they were in separate documents
If a link in a multi-page document has href="#example", jQuery Mobile will look for a page div with id="example"
If the page is found, it will transition that page into view
You can seamlessly navigate between internal pages (href="#example") and external pages (href="example.html")
Internal and external pages look the same to the end user except the external pages will display the Ajax spinner while loading
Both also update the page’s URL hash to enable back button support, deep-linking, and bookmarks
Example
<div data-role="page">
<div data-role="header">
<h1>Selected jQuery Books</h1>
</div>
<div data-role="content">
<ul>
<li><a href="#drupal-7">Drupal 7 Development by Example</a></li>
<li><a href="#jq-game">jQuery Game Development Essentials</a></li>
<li><a href="#jqmobile-cookbook">jQuery Mobile Cookbook</a></li>
<li><a href="#jquery-designers">jQuery for Designers</a></li>
</ul>
</div>
</div>
Continue
<div id="drupal-7" data-role="page">
<div data-role="header">
<h1>Drupal 7 Development by Example</h1>
</div>
<div data-role="content" class="book">
<img src="images/drupal-7.jpg" alt="Drupal 7 Development by Example" />
<div class="title">Drupal 7 Development by Example</div>
<div class="author">Kurt Madel</div>
</div>
</div>
Etc.
Freely choose between these 2 techniques at our convenience
Content in separate documents lets us defer the loading of info until it’s needed
The cost is some higher overhead due to multiple page requests
Interactive Elements Most features offered by jQuery Mobile are specific interactive
elements that enhance basic web functionality
Make page components more user-friendly for a touch interface
Among these elements are accordion-style collapsible sections, toggle switches, sliding panels, and responsive tables
There’s considerable overlap between the user interface elements offered by jQuery UI and jQuery Mobile
It’s not recommended to use the 2 libraries together
Rarely any need: the most important widgets are offered by both
List Views Smart phone applications are often list-driven
Use jQuery Mobile to enhance lists on our pages: more HTML5 custom data attributes
<div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#drupal-7">Drupal 7 Development by Example</a></li> <li><a href="#jq-game">jQuery Game Development Essentials</a></li> <li><a href="#jqmobile-cookbook">jQuery Mobile Cookbook</a></li> <li><a href="#jquery-designers">jQuery for Designers</a></li> </ul></div>
data-role="listview" makes the items within this list large and easily activated by finger in a touch interface
data-inset="true" gives the list a nice border
List views in mobile apps are often paired with search fields that narrow down the items in the list
Add such a field by introducing the data-filter attribute
As with jQuery UI, jQuery Mobile offers a ThemeRollerfor customizing the look and feel of widgets
The theming system used in jQuery Mobile is similar to the ThemeRoller system in jQuery UI with a few important improvements
It takes advantage of CSS3 properties for new effects, very lightweight theme files, and reduced server requests
Themes include multiple color "swatches" that can be freely mixed and matched to create visual texture Each consists of a header bar, content body, and button states
jQuery Mobile provides 2 main swatches, "a" and "b"
To customize the look of an application, assign the data-theme attribute a letter—e.g.,
<div data-role="page" data-theme="a">
Swatch "a" specifies Black text on a light gray background for page content Black text on a gray background for headers and footers Black text on a light gray background for buttons White text on a blue background for active buttons Blue text on links Light gray text (placeholder) or black text (value) on a white
background for input fields
Swatch "b" specifies White text on a dark gray background for page content White text on a dark gray background for headers and footers White text on a charcoal background for buttons White text on a "cyan" blue background for active buttons "Cyan" blue text on links Gray text (placeholder) or white text (value) on a black
background for input fields
For buttons with class="ui-btn", use the "ui-btn-a" or "ui-btn-b" class to style the button either gray (default) or black—e.g.,
<a href="#" class="ui-btn ui-btn-b">Button</a>
The "a" theme is used for most elements
A child element often inherits the theme of its parent (or page)
If no theme swatch letter is set, the framework uses
the "a" swatch for headers and footers and
the "c" swatch (light gray in the default theme) for the page content to maximize contrast
All items in containers inherit the swatch from their parent
Exceptions to this rule are
Default to "b" (blue in the default theme) the listdivider in listviews the header of nested list pages, and the button of split button lists
Default to "c" (silver in the default theme) count bubbles
Icons See
Icons,
http://api.jquerymobile.com/icons/ Adding Icons to Buttons,
<div data-role="main" class="ui-content"> <p> Note that we have added the CSS class of "ui-corner-all" and "ui-shadow" to the header buttons, to make them look a bit more desirable. </p> </div>
Continued
<div data-role="footer">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left"> Add Me on Facebook </a> <br />
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left"> Add Me on Twitter </a> <br />
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left"> Add Me on Instagram </a> </div></div></body></html>
When the Back button is pressed, the framework automatically applies the reverse version of the transition used to show the page
To specify that the reverse version of a transition is to be used, add data-direction="reverse" to a link
PhoneGap Integration PhoneGap is a mobile development framework
Lets us build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs
Extends the features of HTML and JavaScript to work with the device
Applications are hybrid,
neither truly native mobile application All layout rendering is done via web views instead of the
platform's native UI framework
nor purely web-based They're not just web apps, but are packaged as apps for
distribution and have access to native device APIs
The software underlying PhoneGap is Apache Cordova
Apache Cordova (http://cordova.apache.org/) is a set of device APIs that let us access native device function (e.g., camera, accelerometer, geolocation) from JavaScript
Combined with a UI framework (e.g., jQuery Mobile, Dojo Mobile, or Sencha Touch), this lets us develop a smartphone apps with just HTML, CSS, and JavaScript
In building an app, web technologies are used
These technologies are hosted in the app itself locally (generally not on a remote http server)
Sites built with jQuery Mobile are easy to convert to native mobile applications using PhoneGap
The $.support.cors and $.mobile.allowCrossDomainPages properties even allow access to pages not contained in the application—e.g., those on a remote server