jQuery Mobile Quick Start

by on September 24, 2012 12:57 pm

jQuery Mobile is a HTML5-based UI system built on the jQuery Javascript library and jQuery UI. It is lightweight, flexible, and easy to use with all mobile device platforms. 

Depending on which particular report you read, you probably have less than two years before mobile visits will outnumber typical desktop visits. Can your website meet the demands of your mobile visitors by next year? Does your website have the capabilities you need to begin working with a mobile website today?  Let’s take a look at the basics of jQuery Mobile so that you can be ready.

Index Page:

I’m not one to put together an example that doesn’t really do anything, so let’s start with a simplified index page that I put together for the Ozarktrail.com website as a demo: http://Ozarktrail.com/mobile.

Do keep in mind that what you put on your mobile site will not be quite the same as what displays on your desktop website, but I will not go into that today.


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Ozark Trail - Home
      		<link href="themes/theme.min.css" rel="stylesheet" />
      		<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" rel="stylesheet" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script></pre>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>The Ozark Trail</h1>
</div>
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-filter="true">
	<li><a href="trail.php">Trail Sections</a></li>
	<li><a href="maps.php">Detailed Maps</a></li>
	<li><a href="conditions.php">Trail Conditions</a></li>
</ul>
</div>
</div>
<pre>

In the <head> section, a meta “viewport” tag sets the screen width to the pixel width of the device. I used ThemeRoller for Mobile to build a custom mobile-themed stylesheet.  And script tags for jQuery and jQuery Mobile references are added (jQuery Mobile 1.1 works with both 1.6.4 and 1.7.1 versions of jQuery core).

In the body, a <div> with data-role=”page” is used to define the page, and the header bar (data-role=”header”) and content region (data-role=”content”) are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes and used throughout jQuery Mobile to turn basic markup into an “enhanced and styled widget”.

Next I added a listview within the data-role=”content” <div>. jQuery Mobile includes many options for listviews  and you can add a dynamic search filter using data-filter=”true”.

Here is a screen-shot of the first page:

Ozark Trail

 

Details Page:

Next let’s look at a simplified version of a details page (conditions.php), which has some dynamic content:

<!--?php    require_once('dbconn.php');    mysql_select_db($database_name, $link_identifier);    $query = "select * from trailconditions ";    $results = mysql_query($query, $link_identifier) or die(mysql_error());    ?-->

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Ozark Trail - Trail Conditions
      	<link href="themes/ot-theme.min.css" rel="stylesheet" />
      	<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" rel="stylesheet" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

</pre>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Trail Conditions</h1>
</div>
<div data-role="content" data-theme="a">
<a href="index.php" data-role="button" data-icon="home">Home</a>
<div style="color: #ecd487;">
 <!--?php while ($row = mysql_fetch_assoc($results)) { ?-->
<strong><!--?php echo $row['trailsection']; ?--> - <!--?php echo $row['trailstatus']; ?--></strong>

 <!--?php echo $row['conditiondesc']; ?-->
</div>
</div>
</div>
<pre>

Starting with the template from the index.php, add some simple php to connect to your database and get some data.

In the body section data-role=”content” <div> I added a Home button data-role=”button” to link back to the index.php page, and added a basic loop to display the trail section, status, and trail conditions description.

I have kept this example as simplified as possible to concentrate on the jQuery Mobile aspects, but I would suggest a Model-View-Controller (MVC) approach so the model and controller for your current website can be reused with a new mobile view page. A nice two part example for using PHP, MySQL, and jQuery Mobile with the MVC pattern can be found at tutorialzine.com.
Part 1 link: http://tutorialzine.com/2011/08/jquery-mobile-product-website/
Part 2 link: http://tutorialzine.com/2011/08/jquery-mobile-mvc-website-part-2/

Here is a screen-shot of the second page:

Ozark Trail 2

 

Hopefully this gives you just a hint of what jQuery Mobile has to offer and what can be done with just a little effort.  Check out jquerymobile.com for much, much more and take a look at jquerymobile.com/demos for documentation, demos, and to get started.

– Todd Horn, asktheteam@keyholesoftware.com

  • Share:

Leave a Reply

Things Twitter is Talking About
  • Never used JAXB? Check out a simple usage pattern that pairs #JAXB’s data binding capabilities with JPA - http://t.co/Ki9G04HV5e
    July 24, 2014 at 9:53 AM
  • Guess what today is? Tell An Old Joke Day - http://t.co/835ORWMX6N! So, why do programmers always confuse Halloween & Xmas? 31 Oct = 25 Dec
    July 24, 2014 at 8:45 AM
  • MT @midwestio: Posted another #midwestio talk recording to our YouTube channel: @MinaMarkham on modular CSS. Watch: http://t.co/aU3LpfUoi4
    July 24, 2014 at 8:25 AM
  • We just posted pictures from our National Hot Dog Day Lunch Cookout. Check them out - http://t.co/To06plaw1C
    July 23, 2014 at 4:14 PM
  • Good free cheat sheet - #Java Performance Optimization Refcard from @DZone: http://t.co/7vBgsmqy08
    July 23, 2014 at 10:48 AM
  • Did you know today is a holiday? It's National Hot Dog Day! We're gearing up for our team lunch hot dog cookout & can't wait to celebrate.
    July 23, 2014 at 9:43 AM
  • Check out our newest blog: #JAXB – A Newcomer’s Perspective, Part 1 http://t.co/Ki9G04HV5e
    July 22, 2014 at 1:22 PM
  • New post on the Keyhole blog by Mark Adelsberger: #JAXB – A Newcomer’s Perspective, Part 1 http://t.co/Ki9G04HV5e
    July 21, 2014 at 2:27 PM
  • If you're a Java dev, you're likely familiar with Annotations. But have you created your own #Java Annotations? Ex - http://t.co/BgCsYjxZKF
    July 18, 2014 at 12:10 PM
  • RT @gamasutra: Don't Miss: Unconventional Tips for Improving your Programming Skills http://t.co/6TFox7CKHU
    July 16, 2014 at 3:20 PM
  • We're about to send out our free monthly tech newsletter. Dev tips/articles via email. Not on the list yet? Sign up - http://t.co/F8h0NSiicZ
    July 15, 2014 at 11:57 AM
  • Have you ever tried creating your own #Java annotations? See a situation where it was beneficial - http://t.co/BgCsYjxZKF
    July 15, 2014 at 8:36 AM
  • There's a new post on the Keyhole blog by @jhackett01: Creating Your Own #Java Annotations - http://t.co/BgCsYjxZKF
    July 14, 2014 at 1:43 PM
  • We love development! Have you seen our weekly team blog? We show how to be successful with the tech we use. See it - http://t.co/nlRtb1XNQH
    July 12, 2014 at 2:35 PM
  • Rapid appdev has a bad rep, but there are ways to bring development time down the right way. Don't Fear the Rapid - http://t.co/aTPcAKOj0r
    July 11, 2014 at 3:10 PM
  • Automated Testing is great for dev, but does bring a set of challenges (especially for #agile teams). Success tips: http://t.co/1acl1ngO7i
    July 11, 2014 at 12:16 PM
  • This is fantastic - One small step for Google, one giant leap for empowering girls to code: http://t.co/R90V5DBkv1
    July 10, 2014 at 2:52 PM
  • #RabbitMQ: messaging software built on AMQP protocol. Learn relevant concepts & how to avoid common "gotchas" here: http://t.co/ZwMXlhKyX8
    July 10, 2014 at 9:31 AM
  • A huge welcome to Brian Wetzel who joins the Keyhole team today!
    July 10, 2014 at 8:50 AM
  • Seen our newest blog? @joshuarob01 talks the challenges #Agile teams face in automated testing & how to solve them: http://t.co/1acl1ngO7i
    July 9, 2014 at 3:51 PM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2014 Keyhole Software, LLC. All rights reserved.