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
  • Reddit's ExplainLikeImFive has good discussion brewing - "How does a coding language get 'coded' in the first place?" http://t.co/tXj3dISHCi
    September 30, 2014 at 11:10 AM
  • Each dev language has its own way of working with random number generation. See how #JavaScript & #Java stack up: http://t.co/QENl4kGVIs
    September 30, 2014 at 10:43 AM
  • .@TheGrisExplores: there's a new comment on your Dependency Injection Options for Java blog post - http://t.co/vs897t7bHd (Just FYI :-) )
    September 29, 2014 at 1:48 PM
  • Don't miss Vince Pendergrass' first post on the Keyhole blog - Don’t just randomize, truly randomize! http://t.co/QENl4kGVIs #cryptography
    September 29, 2014 at 9:57 AM
  • .@manohart Thank you for reading! Post author Alok Pandey has answered your question here - http://t.co/Uhn9Bv9L1a
    September 26, 2014 at 11:33 AM
  • Tech Night is now! @zachagardner & @lukewpatterson are presenting to the team on #Docker Code-Along style. Great discussions to be had!
    September 25, 2014 at 5:15 PM
  • Neat - A #JavaScript promise is an I.O.U. to return a value in the future. Here's a quick overview of promises: http://t.co/6wCz9aP4Qn
    September 25, 2014 at 11:35 AM
  • A huge welcome to Matthew Brown who joins the Keyhole team today!
    September 24, 2014 at 4:30 PM
  • RT @darrellpratt: A Journey From Require.js to Browserify http://t.co/t6N7Db1I4A
    September 24, 2014 at 11:54 AM
  • Creating a UI Designer for Quick Development - http://t.co/pNrayNFs5T http://t.co/hvqOaD6Wfq
    September 24, 2014 at 10:40 AM
  • We are under construction! Knocking down walls & expanding our offices in Leawood, KS this week. http://t.co/ph6JElh8lr
    September 23, 2014 at 9:46 AM
  • Did you know? Today in 1986 it was ruled that computer code is protected under copyright law - http://t.co/mCmWPvKOBE
    September 22, 2014 at 4:30 PM
  • Don't miss Alok Pandey's very first post on the Keyhole blog - Creating a UI Designer for Quick Development http://t.co/dWYMCOO3rf
    September 22, 2014 at 2:43 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/mf1F3eIDY3
    September 21, 2014 at 5:15 PM
  • Check out a quick intro to Functional Reactive Programing and #JavaScript - http://t.co/4LSt6aPJvG
    September 20, 2014 at 11:15 AM
  • In Part 2 of our series on creating your own #Java annotations, learn about processing them with the Reflection API - http://t.co/E1lr3RmjI7
    September 19, 2014 at 12:15 PM
  • The life of a Keyhole consultant - A Delicate Balance: It’s What We Do http://t.co/ToRpWY3aix Blog as true today as the day it was written.
    September 19, 2014 at 9:50 AM
  • 7 Things You Can Do to Become a Better Developer - http://t.co/llPNMUN8nQ
    September 19, 2014 at 8:43 AM
  • .@jessitron Good luck, you'll do great! Our team really enjoyed your KCDC14 talks.
    September 18, 2014 at 10:19 AM
  • RT @woodwardjd: 7 deadly sins of programming. I think I did all of this last week. #strangeloop http://t.co/f7QFq1SpqW
    September 18, 2014 at 10:03 AM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2014 Keyhole Software, LLC. All rights reserved.