“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.