Dialogs

Dialogs are simply modal pages which have a close button of some form. <a href="./mydialog.html" data-rel="dialog" data-transition="pop">Pop up</a>    

Read More

Navigation Between Pages

Linking between jQuery Mobile pages creates a transition animation between pages on compatible devices (e.g. iOS & Android). If running on a browserthe browser’s back button (which may be a hardware back button on some devices such as android) will go back to the first page.   Back Button In Header Use this in the […]

Read More

.Page General

A typical page will be divided as: header, content, and footer. <div data-role="page"> <div data-role="header"> </div> <div data-role="content"> </div> <div data-role="footer"> </div> </div> The header and footer are optional.  All code inside a page must be within one of the 3 sections. Hiding The Browsers Address Bar On compatible devices, such as Android-, webOS- and […]

Read More

Colour Swatches

Every theme includes a set of color swatches that can be changed anywhere in a webapp. A color swatch is defined by a letter, from a to z. The default theme includes swatches from a to e with the ability to add more letters of your own. a – Highest level of visual priority (default […]

Read More

Creating A New Theme

Using Theme Roller Use Theme Roller at http://jquerymobile.com/themeroller to define your own theme without coding CSS directly. Even if you want to manually custimize the theme, this will give you are css file to use as the starting point. Using the theme on your page Include the theme css file after the default jquery mobile […]

Read More

.Roles General

Main roles in jQuery Mobile page – A page, the unit that jQuery Mobile uses to show content header – Header of a page content – Content of a page footer – Footer of a page navbar – A navigation bar, typically inside a header button – A visual button controlgroup – A component collapsible […]

Read More

2 – Create The HTML5 Template

Create A New HTML5 File You can create a new HTML 5 document in Dreamweaver (Page Type: HTML, DocType: HTML5) and set it up as follows: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <!—– SETUP JQUERY —–> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" > </script> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" > </head> […]

Read More

Licence

Licence   jQuery Mobile’s License Usage of jQuery Mobile and jQuery, the core is free of charge and they are open source with dual license, MIT or GPL version 2. The MIT license is recommended for most projects as it does not require anything o be provided. You must ensure you donot delete or change the copyright information at the top of the […]

Read More

1 – jQuery Mobile Framework Files

Decide on Host or link to the jQuery framework files Hosting The Files With Your Webapp Download the following: The jQuery Mobile package from http://jquerymobile.com/download/ Get the latest ZIP package. The jQuery core from http://jquery.com The production version is recommended. Inside the package there are two types of JavaScript / CSS files: one with the min suffix […]

Read More

Timers General

Simple Heartbeat Timer //—– HEARTBEAT TIMER —– function heartbeat_timer_tick() { } setInterval('heartbeat_timer_tick()', 1000 ); //Time in mS Note that if the web browser tab is put in the background values of setInterval < 1000 will be changed to 1000 by browsers such as chrome to improve performance for the active tab. A Timer You Can Stop //—– […]

Read More