Table of contents
Using jQuery Mobile to improve usability
Using jQuery Mobile to improve usability
We going to use jQuery Mobile for user interface enchantment since it provides us with touch-optimized interface elements, like form controls and widgets (toggles, sliders, tabs, etc.) for a wide variety of mobile platforms. You can see demos of jQuery Mobile here.
Key features of jQuery Mobile
Took from jQuery Mobile official site :
- Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve
- Compatible with all major mobile platforms - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo with baseline support for all devices that understand HTML
- Lightweight size (12k compressed for all mobile functionality) and minimal image dependencies for speed.
- HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
- Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
- Automatic initialization by using HTML5 data-role attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.
- Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.
- New events streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.
- New plugins enhance native controls with touch-optimized, themable controls.
- Powerful theming framework and ThemeRoller application make highly-branded experiences easy to build.
jQuery Mobile basics
The last version of jQuery (at the time of this writing, its Alpha 2) requires jQuery 1.4.4 to be included, so since we decided to exclude all the Drupal core and module’s JS, we need to include it ourselves.
To include jQuery 1.4.4, we need to add a new line into the theme’s template.php file:
// Use only theme's js
$scripts = array('theme' => array(
‘sites/all/themes/mobile/js/js.js' => array('cache' => 1, 'defer' => '', 'preprocess' => 1),
'sites/all/themes/mobile_slate/js/jquery-1.4.4.min.js' => array('cache' => 1, 'defer' => '', 'preprocess' => 1),
));
where jquery-1.4.4.min.js is a reduced version of jQuery (we need to put it into the js folder of our theme).
To include jQuery mobile, we’re going to use a check in our js.js and decide if we need it to be included. For example, let’s use a check for the Android version:
js.js
var ANDROID_OLD_VERSION = false;
var JQMOBILE_TAGS = '
<script type="text/javascript" src="/sites/all/themes/mobile/js/mobile/jquery.mobile-1.0a2.min.js"></script>
';
// jQuery init
$(document).ready
(
function()
{
// first retrieve Android version
_get_version();
// not using jquerymobile on Android version < 2.0
if( !ANDROID_OLD_VERSION )
{
$('head').append( JQMOBILE_TAGS );
}
}
)
// Get Android version
function _get_version()
{
if( navigator.userAgent.match(/Android/i) )
{
if( parseFloat( navigator.userAgent.match(/Android [0-9].[0-9]/i).toString().substring( 8 ) ) < 2.1 )
{
ANDROID_OLD_VERSION = true;
}
}
}
jquery.mobile-1.0a2.min.js should exist in the js folder of the theme.
Page structure
The jQuery Mobile "page" structure is optimized to support either single pages or local, internal, linked "pages" within a page. We need a single page model since this is how Drupal delivers pages.
Inside the <body> tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute:
<div data-role="page"> ... </div>
Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with the data-roles of "header", "content", and "footer".
<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
External page linking
By default, when you click on a link that points to an external page, the framework will parse the link's href to formulate an Ajax request and display the loading spinner.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, and then the new page is placed into view with a page transition.
Page transitions
The jQuery Mobile framework uses different effects based on the CSS which can be applied to any object or page-change event which use the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.
Example:
<a href="node/1" data-transition="pop">pop me</a>
Possible values of the data-transition attribute:
- slide
- slideup
- slidedown
- pop
- fade
- flip
For Drupal, we can use some helper functions to create links like:
<?php
define('JM_TRANSITION_SLIDE', 'slide');
…
define('JM_TRANSITION_FLIP', 'flip');
/**
* Helper function to create link with the jquery mobile data transition attribute.
*/
function jm_l($text, $link, $transition = '', $options = array()) {
if ($transition) {
$options['attributes']['data-transition'] = $transition;
}
return l($text, $link, $options);
}
?>
And call it like like this:
<?php print jm_l('pop me', 'node/1', JM_TRANSITION_SLIDE); ?>
Where $text is the link’s title, $link is the URL itself, $role is jQuery Mobile’s data-role attribute value, and $options is the array used to pass further values to Drupal’s core l() function.
Complete page.tpl.php file content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"> <head> <title><?php print $head_title; ?></title> <?php print $head; ?> <?php print $styles; ?> <?php print $scripts; ?> </head> <body class="<?php print $body_classes; ?>"> <div class="page-container"> <div data-role="page"> <div class="header" data-role="header"> <div class="header-inner"> <?php if ($header): ?> <?php print $header; ?> <?php endif; ?> </div> </div> <div class="main" data-role="content"> <?php print $content; ?> </div> <div class="footer" data-role="footer"> <div class="footer-inner"> <?php print $footer; ?> </div> </div> </div> </div> </body> </html>
