These Are A Few Of Our Favorite Things (About jQuery Mobile Development)

Posted on - Last Modified on

jQuery Mobile is an advanced web framework which is also referred to as a mobile framework, or a JavaScript library. jQuery aims at generating a framework that is compatible with various tablets and smartphones. The increasing use and manufacture of smartphones and tablets has necessitated the enhancement of the jQuery framework to give users a consolidated interface across various platforms and frameworks. These include Work light, Android, iPhone, Windows mobile, and Phone Gap.

What sets jQuery apart from the rest?

It supports a vast coverage of browsers and devices

jQuery has lived up to its slogan – ‘don’t break the web' by ensuring mobile device users can access the internet simply, by clicking on a link or typing a URL - regardless of the device or browser they use. jQuery Mobile works in collaboration with web ideas, and ensures that devices which are not compatible with Ajax or CSS can function through the use of fundamental HTML. jQuery also improves the devices which support both CSS and Ajax.

It supports a touch-appropriate UI widgets and form inputs

Hitting a checkbox from a non-mobile friendly form can be discouraging. \with the need to keep zooming in and out to hit badly constructed form elements, UI widgets and form elements should be touch-friendly. With various devices supporting touch features today, website developers should ensure they construct websites that are compatible with all the touch devices on the market.

jQuery Mobile can be used with a mouse or through the touch feature. jQuery Mobile auto-improves each form to make it touch-friendly. Checkboxes on jQuery come wrapped to create an appropriate tap-zone. This makes it easier to tap the purposed checkbox.  jQuery Mobile grows text areas automatically to enable users to view all the content they’ve entered. jQuery Mobile comes with widgets such as dialogs, buttons, persistent toolbars, and the pop-up widget, which allows users to pop-up different types of content from where they prompt it. This helps in displaying photos, videos, maps, dialogs, and in-page forms.

Other reasons why jQuery mobile is the best include:

  • It has a customizable theming engine and layout

  • It comes complete with a responsive web mobile design

Currently, many web developers are taking advantage of massive mobile device usage to target mobile web development. There is, therefore, a need for mobile users to understand a number of tips which can help them design user-friendly websites that followers will not only find irresistible, but also help attract traffic and popularize it

Disabling pop-ups

Pop-up messages can be bothersome, more so when they pop up whenever users are loading pages. Disabling pop-up messages enables users to enjoy their mobile browsing experience. This can be implemented by keying in “$.mobile.pageloading(true)” to a JS file. By so doing, users do not have to experience annoying pop-ups when browsing the internet.

Choosing page background color

Mobile device users can change a page's background color without writing it on the jQuery mobile CSS.  Setting up a background color to the body element works just fine. However, when using the jQuery mobile development framework users can connect it to the ui-page category.

A combination of 'save and cancel' buttons

Many web developers want to incorporate libraries that can design apps, and accommodate two buttons adjacent to each other. In addition, developers seek to come up with a library that can have two sets of differently themed buttons. Currently, no documentation can provide developers with the convenience to achieve this as efficiently as jQuery.

Target devices through the use of media queries

Media queries enable developers to target devices in CSS depending on their screen sizes. This allows them to create a two column chart for tablets, and one column for smartphones. Developers should have various media queries ready to accomplish this. Only then will they be able to have the CSS target various screen sizes fast and efficiently.

Removing an arrow from a list item

jQuery adds arrows automatically to every created list item. Mobile developers who find this feature annoying can set the data-icon feature to 'false' on all list items that do not require an arrow to disable it.

Traditional jQuery calls

Amending items on a web page can be done before activation of the mobile plug-in. Web developers can accomplish this by adding a traditional jQuery prior to the call that prompts the mobile plug-in loading. This allows the jQuery commands to run before the library starts loading.

Incorporating driving directions to a jQuery mobile site

One of the most crucial features of a mobile website is the driving directions. It is important for web developers to strive to understand how to incorporate those features on their jQuery mobile websites.

Creating popup dialogs

A pop-up dialogue box is one of the constituents of a library's built in features. However, mobile users should command the feature in order to benefit from it. The process is as easy as adding this link data-rel="dialog".  In order to do this, users should first open an external jQuery mobile page which should be different from the other pages for the best results.

Stop particular key items from being truncated

jQuery’s ability to intelligently abbreviate long items so as to put them into UI elements must be one of its best features. However, there may be times when users do not want to utilize this feature. For example, for users who prefer adding footers to their web pages, or using full text, abbreviating words will not be essential.

Creating a column structure on your own

If web developers want to design single pages to make them easily readable from various devices, they can accomplish this by using the "columns" technique in no particular order. Of course, there are many shortcuts that web developers can take to make their work easier. Incorporate this technique, and various other media queries, to move columns around. This way, good results will be achieved with minimum struggle.

Add jQuery mobile inline buttons

Web developers who do not want buttons which consume the width of an entire screen can incorporate the data-in line 'true' option to it.

Target platforms with jQuery

Many web developers target various mobile devices when making mobile designs. This may be a good thing. However, different people today use various types of mobile devices. It would, therefore, be better to focus on a particular platform for the design they are creating. The following code example can be used to enable particular parts of jQuery to run. This depends on the platform a web developer is designing for.

var deviceAgent = navigator.userAgent.toLowerCase();

jQuery(document).ready(function($){

if (agentID) {

var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);

// do something special

Creating a customized theme

A jQuery Mobile framework consists of five themes - Theme A, B, C, D, and E. The following steps can help web developers to easily create new themes for their web app.

  • From the jQuery Mobile CSS file, select CSS for whichever theme and copy it onto the CSS file.

  • Name the theme and rename all the CSS selectors adequately. The theme title can use any random alphabet.  For instance, if the copied Theme is C, and the developer wants to call their theme Theme S, they should rename .ui-btn-up-c to .ui-btn-up-z, .ui-body-c to .ui-body-s.

  • Alter the styles and colors of the custom theme

  • To apply the customized theme named z to any other element, developers need to set the data-theme feature to z. eg:

<div data-role="page" data-theme="z">http://eisabainyo.net/weblog/2011/01/31/

jQuery makes it easy for web developers to create good mobile websites which users find convenient to use, interesting, and beneficial. Incorporating these tips will go a long way to help web developers come up with exemplary websites targeted at mobile devices. Did we miss anything? Let us know in the comments below!

Subscribe Now For Weekly Updates

Stay up to date with the best articles on the Freelancer Community. Subscribe now for the best Design, Development, and Freelancing content each week.

Posted 1 August, 2017

Ruchi Bhargava

Content Writer

Hi! I work on providing content for individuals and businesses all across the globe. As of now, I've delivered more than 6,500 articles, 6,000 blog posts, 20 eBooks, 3 novels and many more to my clients. I have also worked on providing content for more than 20 websites, flyers, brochures and many more. More than 100 reviews with an average of 5 stars out of 5 itself speaks of the quality of work...

Next Article

Here Are 8 Very Important PHP Security Tips You Should Follow