An Introduction to jQuery Mobile

ByWalter Wimberly

“Installing” jQuery Mobile

jQuery Mobile requires that you include several external files. This is the “Install” process. You will need to include your jQuery and jQuery Mobile external script files. You  will also need to include an external CSS file for the theme.

Your HTML pages will need to be formatted in a specific manner, however, it is all standard HTML5, so no special tools are needed.

Using the Builder

However, jQuery does have an external builder by Codiqa you can use. It makes a drag and drop interface that you can build a page from.

From the home page, you can access the free builder which allows you to create a single page. However, you can sign up for the service, and then you can build multipage sites from the build automatically.

To build your page, simply drag the elements to the screen that you want to use. Normally you will want to include a header, footer, and navigation. Set the properties as you would need – for each element.

Once you are done, you can download the zip file, and work from there.

Adding Custom Content

Open the HTML document in your favorite web editor. You will notice that divs are used, with the data- attribute.  For example:

<div data-role="page" id="page1">

Shows div for a page, (data-role=”page”). Only one page shows at a time, so the id will determine which page is currently being displayed. The links to a navigation should point to those ids. For example:

<div data-role="navbar" data-iconpos="top">
<ul>
  <li>
    <a href="#home" data-transition="fade" data-theme="" data-icon="home">
      home
    </a>
  </li>
  <li>
    <a href="#info" data-transition="fade" data-icon="info">
      my info
    </a>
  </li>
  <li>
    <a href="#search" data-transition="fade" data-icon="search">
      search
    </a>
  </li>
</ul>
</div>

 

Creating a Theme

You may have noticed the use of the attribute data-theme=”a”.  “a”  can be any letter, as long as that theme is defined in the stylesheet.

By default, there are 5 themes that come with jQuery Mobile – however, each style in the stylesheet can be changed. You must have at least one, and you may have up to 26 – however, you will probably only need 2 or 3 in most cases.

You can hand code your themes, or you can use the theme roller to help you build a theme.

The 3D effect doesn’t seem to be editable, without hand coding changed, but the colors, sizes, and size of the corners are all editable.

An Introduction to jQuery Mobile was originally found on Access 2 Learn

Assistant Professor

Walter Wimberly is an Assistant Professor at a regional college in Tennessee, teaching Computer Science in the Software Engineering track. He works as a student advisor, oversees curriculum changes, develops new courses, and manages the advisory panel.
Walter taught full time for about 7 years, before going back into “industry” as a full stack Software Developer for a dozen years. There he focused on web based projects coding in JavaScript/jQuery and utilizing the Bootstrap CSS Framework on the front-end, and coding in PHP, ASP/ASP.Net, SQL on the back-end.

Since he loves teaching, he taught as an adjunct web and digital media classes for eight (8) years, while working in industry, and has since returned to teaching full time.

He has been married for over 25 years, and is father to several special needs boys. As such, he is working on some projects to help others who have special needs to be self-sufficient, and support the care givers of those with special needs. Check out his Autism blog for more info.

Similar Posts