Tuesday, March 19, 2024

How to Use jQuery Mobile in Dreamweaver CS6

JQuery Mobile has gone through some important changes in this version of Dreamweaver. One of the things that was cumbersome in the previous version was how to change colors in a layout. There was no simple way to do it until now.

To get started, go to File: New. In the New Document dialog box, choose Page from Sample, Mobile Starters. I In the previous verson of Dreamweaver (5.5) under the Sample Page column in Dreamweaver 5.5 you would have seen an option for PhoneGap. That’s been removed and replaced with JQuery Mobile with Theme (local). The default DOCTYPE is HTML 5.

When you click on Create, Dreamweaver creates a layout that looks much the same as that in Dreamweaver CS5.5.

Before we go further, we need to save the file. When you save the file, the Copy Dependent Files dialog box will appear. These are external resource files and are necessary for your layouts to work. You’ll also notice two CSS files at the top, theme and structure. These allow you to keep your layouts consistent.

The next step is to activate the jQuery Mobile Swatches. To do so, go to Window: jQuery Mobile Swatches, which brings up the panel above. Note that there’s nothing in the panel because we haven’t made any selections yet. Also note that because we chose the default layout in the new dialog box we’ll be working with the themes in the jquery.mobile.theme-1.0.css.

To see how the theme options can work, I’ve highlighted a section of code and you can see the color options come up in the jQuery Mobile Swatches panel. At the moment, no theming has been applied and this is indicated by the red box at the far left.

Stepping through the different colors, I’ve applied the blue theme.

Note that each theme is coded by a letter and this is indicated in the code. You’ll also notice that theme “b” has been applied to the entire selection. If you want to do some tweaking to the individual elements, here’s an example.

Let’s say I want to change the color of the footer. I click on the name and this brings up the theme options for the footer. In this case I choose gray “d” and note how it changes the footer to the new color. You can apply theming to individual pages and other elements. Again, it doesn’t end here.

In this case, I’ve selected page 4 in the code which is part of a list. The jQuery Mobile Swatches panel is contextually sensitive and as a result it brings up the LIST SPLIT ICON section.

To use this option, I’m going to click on list item two and work with the content. In the code panel, I click on the word “Content” under page two. You’ll note that the theme color options have changed, though that’s not much of an issue here because we’re going to insert an object.

To do so, you have two options, to activate the jQuery Mobile tab and click on the icons there, or go to Insert: jQuery Mobile and choose an item from the popup list.

In this case, I’m going to apply a button. The first thing to do is to erase the word “content.” Next, I click on the jQuery Mobile button.

This brings up the jQuery Mobile Button dialog box, which allows you to set various aspects of the button, such as how many you want, the button type, icon type, etc. I chose:

Buttons: 1
Button Type: Button
Icon: Check

This is the result.

And from there you can change the icon position, the theme colors and the icon in the button itself. As you can see, the theme color has been changed and the icon is now a caution sign.

And there’s still more to offer, One of the things you notice at the bottom of the jQuery Mobile Swatches panel is the link: Get More Themes. When you click on it, it brings up the following page (you can view it here: http://jquerymobile.com/themeroller/).

The screen shot doesn’t do this page justice, but this page allows you to build custom themes for your jQuery mobile layouts.

You can use the elements on this page and choose colors to create your own themes or click on the Adobe Kuler Swatches link.

This brings up four pages worth of swatches which you can use as is, or you can select colors from these layouts and use them to build your own themes.

As a case in point, I like the California Web swatches. I’ve dragged a couple of those onto the layout in the “A” column. Doing this will give you good idea of what a layout will look like before you build it. As you can imagine, the ThemeRoller would be a fun place to hang out and experiment with designs. Once you’re done, you can save this as a ZIP file which you can then open in Dreamweaver for use in your layouts. That’s it.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured