September 2, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

jQTouch: Mobile Web Development with a Shallow Learning Curve

  • September 1, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

While the iOS and Android browsing experiences are pretty spectacular compared to other mobile devices, many Web developers have felt left out in the cold. Traditional Web development interfaces generally do not fare too well when used in conjunction with touch-based interfaces and cramped screens. For many, the idea of setting years of Web development experience aside in order to devote the time and resources necessary to learn how to develop iOS and Android applications isn't particularly appealing.

But simply trying to ignore this exploding new market isn't exactly realistic, so what's a Web developer to do? One possibility is to build a mobile Web application which embraces rather than shuns the unique challenges presented by the mobile environment. If you find this idea appealing, the jQTouch jQuery plugin can give you exactly the helping hand you're looking for.

Installing jQTouch for Mobile Web Development

jQTouch is a jQuery plugin, meaning installation simply involves loading the jQTouch plugin into a Web page after having loaded jQuery:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>

<script src="/js/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">@import "/js/jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "/js/themes/apple/theme.css";</style>

You can obtain jQTouch from its GitHub repository. Incidentally, the themes directory referenced in the above snippet is also found in the jQTouch download. Incidentally, the apple theme is an iPhone-optimized theme bundled in the download. Be sure to view your mobile Web application using each of the available themes to determine which one you find most suitable. Finally, note the use of jQuery 1.4.2. At the time of this writing, using a newer version of jQuery will break jQTouch! Be sure to consult the jQTouch documentation to determine the officially supported version of jQuery.

With the references in place, all that remains to begin using jQTouch is to initialize it, done using this snippet of code:

<script type="text/javascript">
  var jQT = $.jQTouch({ });
</script>

Keep in mind this is the simplest possible initialization, as there are actually quite a few initialization options at your disposal. See the jQTouch wiki for more information about what's available.

With these two steps completed, you can go about building your mobile Web application.

Creating the Mobile Web Application Pages

Believe it or not, all of your jQTouch application pages will reside within a single HTML document. jQTouch treats every top-level div element as a page, with the first one it finds taking precedence as the home page. The home page seems like a good place to start, so let's create one:

<div id="home" target="_blank">
  <div class="toolbar" target="_blank">
   <h1>GameNomad</h1>
    <a class="button leftButton flip" href="#home" target="_blank">Home</a>
    <a class="button rightButton flip" href="#login" target="_blank">Login</a>
  </div>
  <ul>
  <li class="arrow" target="_blank"><a href="#popular" target="_blank">Popular Games</a>
  </li><li class="arrow" target="_blank"><a href="#playing" target="_blank">Currently Playing</a>
  </li><li class="arrow" target="_blank"><a href="#news" target="_blank">Gaming News</a>
  </li><li class="arrow" target="_blank"><a href="#contact" target="_blank">Contact Us</a>
  </li></ul>
</div>

Loading this page into an iPhone browser produces the screen found in Figure 1.


The Sample Mobile Web Application Home Page
Click here for larger image

Figure 1. The Sample Mobile Web Application Home Page

As you can see from Figure 1, jQTouch renders each page using a series of styles optimized to present the HTML in a format suitable for mobile devices. For instance, the toolbar is rendered by creating a DIV assigned the class toolbar. Text found within an embedded h1 element defines the title. Additionally, you can create buttons using hyperlinks which have been assigned the button class, with the button position (left or right) defined by leftButton and rightButton, respectively. When a user clicks on a hyperlink, the animation effect which transitions the page can be identified using one of eight supported animations: cube, dissolve, fade, flip, pop, slide, slideup, and swap. Be sure to experiment with each in order to understand their unique behavior.

Lists are rendered using the standard ul and li tags. jQTouch will automatically stylize the lists as presented in Figure 1, however you can optionally embellish these lists in a variety of ways. For instance, the arrows situated to the right of each list item are added when the arrow class is added to li.


Tags: mobile web development, JQuery Mobile

Originally published on http://www.developer.com.

Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel