Company Blog

jQuery Mobile Page Structure

January 23, 2012
jQuery Mobile is pretty rockin' if you're looking to create a web-based phone application. This is still somewhat new to me, but I hope this helps you develop your basic application structure.

First, you need to create your html and head tags:

<!DOCTYPE html>
<html>

<head>
    <title>My First Phone Application</title>
    <script name="viewport" content="width=device-width, initial-scale=1">

    <link type="text/css" href="/assets/css/plugins/jQuery.mobile-1.0.min.css" rel="stylesheet">
    <link type="text/css" href="/assets/css/plugins/jQuery.mobile.structure-1.0.min.css" rel="stylesheet">
    <script type="text/javascript" src="/assets/js/plugins/jQuery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/plugins/jQuery.mobile-1.0.min.js"></script>
</head>

<body>

</body>
</html>

If you've coded HTML before, this structure should look familiar. The items that you need to focus on are the <script> tag and the stylesheet and javascript includes in the <head> tag. The "viewport" <script> tag instructs jQuery Mobile to determine the device's screen width so everything is scaled accordingly. The <link> and <script> tags are you jQuery and jQuery Mobile CSS and JavaScript include files, which are required to get everything to look and work right. The files I have included here are the latest as of this writing and are available on the jQuery Mobile website for free download.

Inside your <body> tag, we'll create your page and insert a page header, content area, and footer:

<div data-role="page">
    <div data-role="header">
        header content here...
    </div>

    <div data-role="content">
        page content here...
    </div>

    <div data-role="footer">
        footer content here...
    </div>
</div>

Pretty self-explanatory and very quick! Lets expand on this by adding a caption, logout button, and lets change the header color to blue:

<div data-role="header" data-theme="b">
    <h1>Phone App</h1>

    <a href="/index.cfm?action=logout" data-icon="forward" class="ui-btn-right">Logout</a>
</div>

Again, very simple. Our caption is placed within the <h1> and </h1> tags and the logout button is created using an anchor tag. You can choose between the different icons in your buttons if you want. Class "ui-btn-right" was chosen to align our button to the right of the screen so it doesn't overlap our caption.

One thing you want to make sure of when using data icons in your buttons, etc. is to place jQuery Mobile's images directory into the same directory as your .css include, otherwise the images won't display.

For more information, view jQuery Mobile's website and documentation at http://jquerymobile.com/

Add A Comment

Tweets

Played around with the mail server a bit tonight. Things are working much better now!
4 months ago

Happy holidays, everyone! :)
4 months ago

ColdFusion: News, Initiatives, and updates from Adobe http://t.co/v3XfUZSp
5 months ago

Recent Articles

Server Side Includes for HTML in IIS 7
I found myself wondering if there was any way to create server-side includes with HTML today, so I d...

ColdFusion Roadmap
It's nice to hear, after the on-going rumors, that Adobe has released a public facing roadmap for Co...

Is It HTML5?

Multiple Skype Sessions
Here's a cool little trick I found out about Skype: You can run two separate sessions of Skype at t...

ColdFusion 10 Beta
ColdFusion 10 beta and ColdFusion Builder 2.0.1 beta are now available to the public at http://labs....