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
  • Did you know today is Clean Your Virtual Desktop Day? It really is: https://t.co/TCRpWgTmxg Celebrate by organizing your desktop files.
    October 20, 2014 at 4:50 PM
  • Don't miss the newest post from @bricemciver: Make Me a Promise - http://t.co/obK811q48q #JavaScript
    October 20, 2014 at 10:43 AM
  • RT @DZone: #Docker 1.3 Releases with Security, Signed Images, and Process Injection by @bendzone #devops http://t.co/uytIwFPgO6
    October 17, 2014 at 10:04 AM
  • If you have 15+ years #Java exp, you don't expect to be puzzled debugging a null pointer exception. See an exception: http://t.co/m2iDgNEleK
    October 17, 2014 at 9:51 AM
  • Many on our team attended the #Royals victory last night & @cdesalvo even got a selfie with the Gov. Go #KansasCity! http://t.co/N1Psooe2CE
    October 16, 2014 at 3:39 PM
  • Interesting ExplainLikeI'm5 talk: Why do companies develop iOS first when Android holds 70% of the 'Smart' Market? http://t.co/fxgjIBmqBi
    October 16, 2014 at 12:26 PM
  • We're looking for a top-notch #Java developer to join our team. Learn more about our company culture & the role - http://t.co/0fKsFmN0Ql
    October 16, 2014 at 9:08 AM
  • Want to learn to create custom #Java annotations & process them using the Reflection API? @jhackett01's tutorials - http://t.co/mf1F3eIDY3
    October 15, 2014 at 11:43 AM
  • Happy Ada Lovelace Day! It's a celebration of the achievements of women in STEM - if there's a woman in tech that you admire, tell her today
    October 15, 2014 at 9:13 AM
  • .@fpmoles We absolutely agree - thanks for reading!
    October 15, 2014 at 8:13 AM
  • With 15 yrs exp, @bmongar didn't expect surprise when debugging a null pointer exception. Why it puzzled him - http://t.co/m2iDgNEleK #Java
    October 14, 2014 at 11:20 AM
  • #Royals fans with tickets to tonight's canceled game, here's what you need to know - http://t.co/EErHht3zoN
    October 13, 2014 at 4:23 PM
  • RT @UzilitySoftware: Watch as Wayne explains to the boss, Marvin, what an agile board is about. #scrumalliance #scrum http://t.co/5MzB1bNw…
    October 13, 2014 at 12:01 PM
  • Getting started with #MongoDB? (Flexible #NoSQL for Humongous Data) Here's a free cheat sheet from the folks @Dzone - http://t.co/oBMvICzfcL
    October 13, 2014 at 11:10 AM
  • Brad Mongar's newest post is live on the Keyhole blog - #Java and the Sweet Science http://t.co/m2iDgNEleK
    October 13, 2014 at 8:59 AM
  • RT @housecor: If users have share links to your web app like this: "Go to here. Then click here. Then here." You're doing it wrong. #de
    October 10, 2014 at 2:18 PM
  • CSS is 20 years old today! Happy birthday, #CSS - web design would not be the same without you. http://t.co/8tEMoUjorI
    October 10, 2014 at 9:55 AM
  • Expansion update: remodel, electrical & mudding done; painting in process; carpet to go. We can't wait for our bigger team rooms!
    October 10, 2014 at 8:42 AM
  • Want an easy way to get all of our development blog posts sent straight into your email? Try this new IFTTT Recipe: http://t.co/b9RgUqGU4v
    October 9, 2014 at 10:55 AM
  • #JavaScript & #Java handle secure random number generation differently. Here's how they stack up - http://t.co/QENl4kGVIs #cryptography
    October 8, 2014 at 12:27 PM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2014 Keyhole Software, LLC. All rights reserved.