As we see that smart phones and PDAs are becoming ever more advanced, usage of mobile internet will be playing a significant role in up-coming years. Even web browsers that are being used on computers, had issues at earlier stages. HTML 2.0 was the first to see many features that web developers could use. But this was a basic version and did not offer great looks. To yield better looks, Netscape Navigator; a dominant leader during then, introduced proprietary tags and attributes into its browser. While, other browser vendors tried to reflect the same tags; they were not able to render pages to any effect. At this juncture the W3C introduced HTML 3.2, loaded with improved tags, to resolve varying rendering. This standard was highly stable and supported almost all browsers.
When it comes to mobiles, we have quite a few challenges. With no exception, rendering issue continues to be a concern; as there are a number of browsers, delivered by various vendors. Web Developers started off using WML, with a WAP 1.0 Gateway. But this demanded the device to handle WML, thus causing a device dependency. WML was followed by XHTML and WAP 2.0, which also demanded device to handle XHTML. Later, HTML 4 came in to thwart this device dependency, but ‘rendering content in different browsers’ was a bit of concern; since all vendors had to develop a miniature version of their browsers and let handle content in similar fashion. They also had to depend on third party plugins for efficient programming (Threads, videos etc.). Finally, HTML 5 now aims at developing a standard that would be supported by most vendor browsers. It also promises a far efficient means of programming; offering valuable features.
The jQuery Mobile is a web framework that enables the development of unified user interfaces on popular mobile device platforms esp. smart phones and tablet devices. The framework is built on top of the popular jQuery java script framework. The websites developed using jQuery Mobile rely on clean and semantic HTML to ensure compatibility across any web enabled mobile device. JQuery Mobile framework use progressive enhancement techniques to unobtrusively transform the HTML page to a rich interactive web page that leverages the power of jQuery and CSS.
This piece of writing provides an overview of the jQuery Mobile web framework, with the available set of supported widgets.
Features Of jQuery Mobile:
Following are the key features of jQuery Mobile framework:
- Built on top of jQuery core java script library
- Compatible with the major mobile platforms including iOS, Android, BlackBerry and Windows Mobile
- Baseline support for all devices that recognize HTML
- HTML 5 markup driven configuration
- Progressive enhancement to deliver rich user experience
- Automatic initialization using HTML5 data-role attributes
- Accessibility features such as WAI-ARIA
- Support for events such as mouse, touch, cursor focus based user input etc.
- Powerful theme framework
jQuery Mobile UI
All jQuery Mobile pages are defined using clean and semantic HTML code. The data-role attributes supported by the HTML 5 specification is extensively used in JQuery Mobile pages, to auto initialize the widgets. The jQuery Mobile framework initialization process, interprets the data roles defined for HTML tags, to recognize and render the corresponding tags as UI widgets. Based on the java script / CSS support provided by the mobile device, jQuery Mobile framework enhances the look and feel of the widgets to provide a rich user experience.
A sample HTML page designed to be used with JQuery Mobile is shown below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | < !DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="jquery-1.5.2.min.js"> </script> <script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"> </script> </head> <body> <div id="firstPage" data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> Page content goes here. </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html> |
The page starts with the HTML 5 doc type tag. Mobile devices that do not support HTML 5 capabilities shall ignore this doc types and other HTML5 data attributes. The doc type header is followed by inclusion of the jQuery Mobile framework js and css files. When jQuery Mobile starts to execute, it triggers the mobile init event on the document object. The mobile init event is triggered immediately upon execution, and hence the custom JavaScript files are to be included in the following manner:
1 2 3 | <script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script> |
Multiple mobile pages or views can be defined within a single html body. Typical mobile page will be a div, with the data-role attribute defined as “page”. The page headers, content areas and footers are identified by the data roles “header”, “content” and “footer” respectively. Multiple mobile pages within a single HTML page, enables to pre-fetch any frequently used static pages with a single HTTP request. By default the first page will be displayed in the mobile device by the jQuery Mobile framework. The navigation to the subsequent static pages can be done using “#” href.
jQuery Mobile Data Role Options
As mentioned above, the jQuery mobile identifies the widgets from the data role specification given to the HTML 5 tag. The below list provides the various data role options available to the website developer for building UI rich web pages.
Data Attribute
Description:
data-role: The type of the toolbar to be rendered.
- header – Renders a header toolbar
- footer – Renders a footer toolbar
- navbar – Renders a div as a navigation bar. The navbar should contain an unordered list of links, of which, one link being given the CSS class ui-button-active, to indicate the default selected option.
- button – Renders an anchor reference as a button
- controlgroup – Used to visually group a set of buttons together. The buttons are placed inside a div with this data role.
- fieldcontain – Renders a div as a container of form elements
- collapsible – Renders a div as a collapsible page. The first heading within the page will be treated as the header. The contents of the div shall appear collapsed
- none – During initialization, the jQuery mobile framework tries to provide styling and behavior to various controls and form elements. If this initialization is to be disabled for a specific widget, the data-role attribute can be set to none.
data-position: Indicates how to layout the widgets inside the container
- inline – The widgets are placed side by side on the same line. The attribute indicates the framework to style the widgets to be the width of their content and float them accordingly to fit in the same line.
- fixed – Used along with the toolbars. This attribute indicates whether the position of the respective toolbar is fixed w.r.t the device screen or not. The toolbars start in their natural positions on the page, like the “inline” mode, but when a bar scrolls out of the viewport, the framework animates the bar back into view by dynamically re-positioning the bar to the top or bottom of the viewport.
data-theme: Defines the theme to be used to render the widget or a field container. By default the jQuery mobile framework support 6 different themes. The themes are referred to as a-f.
data-fullscreen: Used along with a mobile page (data-role=”page”). This data attribute indicates that the page should be displayed in full screen mode. By default the toolbars will not be visible on the page unless the user taps on the device to toggle the visibility.
data-collapsed: Used with collapsible panes (data-role=”collapsible”). If this attribute is set to true, the contents of a collapsible pane will appear collapsed on page load.
data-transition: Defines the look and feel of the page transition when a dialog is invoked, or a link is clicked.
- pop
- flip
- fade
- slide
- slideup
- slidedown
data-direction: Used along with data transition to provide a reverse effect of page transition
reverse : Reverses the effect of page transition
data-icon Used to define icons for buttons. The framework comes with a default set of icons.
- arrow-l
- arrow-r
- arrow-u
- arrow-d
- delete
- plus
- minus
- check
- gear
- refresh
- forward
- back
- grid
- star
- alert
- info
- home
- search
Custom icons can also be added by providing custom style sheets. The css file should have definitions starting with ui-icon followed by the custom icon names. The icon to be used should be defined as 18×18 png background image in the CSS definition.
data-iconpos: Used along with data-icon attribute. This attribute indicates the position of the icon w.r.t to the text in the button. The value “notext” for this attribute renders a button with icon alone. Possible values are
- top – the icon appears on top of the button text
- left – the icon appears on the left side of the button text
- bottom – the icon appears on the bottom of the button text
- bottom – the icon appears on the right side of the button text
- notext – the button with icon alone, will be rendered
data-type: Used along with the “controlgroup” data-role. By default the buttons within a control group are arranged vertically. If the buttons are to be arranged horizontally, this data attribute is specified.
- Horizontal
data-placeholder: Used along with the select box widget. By defining this data attribute as true to an option element in the select widget, the option element will be
Widgets
The table below provides the list of available jQuery mobile widgets.
Button
Buttons are code widgets in jQuery Mobile. An anchor reference can be rendered with the look and feel of a button, if the data-role attribute is given. The framework automatically provides the platform look and feel for the HTML markups such as input (with type submit/reset/image/ button) and button.
Applicable data attributes
data-role: { button }
data-icon : { arrow-l | arrow-r | arrow-u | arrow-d | delete | plus | minus | check | gear | refresh | forward | back | grid | star | alert | info | home | search }
data-iconpos : { top | left | bottom | right | notext }
Conclusion
The jQuery Mobile framework provides an option to develop cost effective and UI rich mobile web applications. By using the framework for website development, the developer has to worry less about the varying form factors and capabilities of mobile devices available in the market. Using the framework, along with other advanced features of HTML 5, it is feasible to develop mobile websites that can compete with thick client applications in terms of usability and functionality
