A Drupal jQuery Mobile theme (tutorial)

By Alvin Alexander. Last updated: June 4, 2016

Drupal jQuery Mobile FAQ: How do I get started developing a mobile Drupal app using the jQuery Mobile project?

In an attempt to create a mobile Drupal iPhone app, I'm currently writing a Drupal mobile app using jQuery Mobile, and although I still have a few kinks to work out, the basics are now working.

One of the hard things about working with jQuery Mobile in general -- and jQuery Mobile with Drupal in particular -- is that there isn't a lot of good jQuery Mobile documentation available yet. If you're thinking about going down the "Drupal jQuery Mobile" road, I hope I can help save you some time. I'll start with this Drupal jQuery Mobile tutorial about what you need in a Drupal mobile theme.

A Drupal jQuery Mobile theme

One of the first things you'll need is a simple Drupal jQuery Mobile theme. I'm starting to create one, using the famous Zen theme as my base. The important thing I've learned is that the theme needs to be incredibly stripped down. My current Drupal page.tpl.php page currently looks like the source code shown below:

<!DOCTYPE html>

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>

  <!-- include the jQuery Mobile code -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

  <!-- app icon -->
  <link rel="apple-touch-icon" href="/sites/all/themes/diphone/apple-touch-icon.png" />
</head>

<body>
<div data-role="page">

  <div data-role="header">
    <h1><?php print $title; ?></h1>
  </div>

  <div data-role="content">	
    <?php print $content_top; ?>
    <?php print $content; ?>
    <?php print $content_bottom; ?>
  </div>

  <div data-role="footer">
    <h4><?php print $footer; ?></h4>
  </div>

</div>
</body>
</html>

A smaller Drupal jQuery Mobile app theme page

I haven't looked into all of this yet, but I believe even more code can be removed from here, and I can probably trim this down even smaller, like this:

<!DOCTYPE html>

<head>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>

  <!-- include the jQuery Mobile code -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

  <!-- app icon -->
  <link rel="apple-touch-icon" href="/sites/all/themes/diphone/apple-touch-icon.png" />
</head>

<body>
<div data-role="page">

  <div data-role="header">
    <h1><?php print $title; ?></h1>
  </div>

  <div data-role="content">	
    <?php print $content; ?>
  </div>

</div>
</body>
</html>

It may also be possible to remove the $head, $styles, and $scripts variables from that page, but I haven't tried that yet. If you strip too much out of the theme it may not work well when you try to manage the blocks in your theme at the "admin/build/block" URL, so I haven't removed all those elements just yet.

To be clear, all I've done to create this jQuery Mobile Drupal theme is:

Start with the Drupal Zen theme
Strip away everything you don't need (which is actually an awful lot)
Include the jQuery Mobile lines in the <head> section, as shown above
Add the special jQuery Mobile tags

The Drupal theme header and content regions

So far I've only needed the Drupal theme header and content regions. The header region is where you put the title for your current page, and other buttons like "Back", "Cancel", or "Add". The content region is where your forms, lists, and other body content is printed out, just like a normal Drupal website app.

jQuery Mobile includes - The link and script tags

The jQuery Mobile link and script tags shown above are all you need to activate jQuery Mobile. Once you've included those resources into your web page, or in this case into your Drupal theme, you just need to add those special "data-role" tags to your DIV tags, and a few other tags to your other form elements. I'll write more about those tags in future Drupal jQuery Mobile tutorials.

jQuery Mobile tutorials and documentation

There are a couple of jQuery Mobile documentation resources that were extremely helpful in getting my Drupal jQuery Mobile app running, and they are:

Beyond those two pages I just kept working between various jQuery Mobile documentation pages to find what I needed, mostly the "form" and "list" documentation pages.

A Drupal jQuery Mobile theme - Summary

As you can see, to get Drupal and jQuery Mobile working together you just need to begin with a very small Drupal page.tpl.php template file. After that you need to conform your Drupal module programming practices to what jQuery Mobile expects, and again, I'll cover that in future tutorials.

drupal