Using jQuery Mobile in Dreamweaver CS 5.5

Dreamweaver CS 5.5 has some built-in jQuery mobile functions that can help you design a mobile site. Going this route means one of two things:

  • You begin with the mobile site, enhanced with prebuilt jQuery Mobile functionality, and progressively enhance to create a site that will work on all devices.
  • You create a site just for mobile that is a separate design from your other site.

I’ll show you the basics of how to get started and what Dreamweaver is doing for you.

Open a new blank page using the DOCTYPE of your choice. Choose the jQuery Mobile category in the Insert panel. Choose the icon for jQuery Mobile Page, the first icon on the left in this view. (I like the Classic Workspace. Your view of the Insert panel may be different from this if you don’t use that Workspace, but the jQuery Mobile category will contain the same icons.)

jQuery New Page icon

Two dialog boxes appear. The first wants you to indicate whether you want to use the remote jQuery Mobile scripts and stylesheet, or install them locally. For this exercise, I’ll leave them as remote, but that might not be the best choice for actual use.

jquery mobile files dialog

The second asks you to assign an ID to the new mobile page. Dreamweaver suggest ‘page’ by default, which will be okay for this demo. You also choose whether or not to have a header and footer here.

jquery mobile page dialog

Clicking OK brings you back to the Dreamweaver document window. Let take a look at what your choices on the previous two dialog windows inserted into the document. The Design View doesn’t look like much.

jquery mobile basic page

What you Got Code-Wise

When you look at the Code View, you realize there’s a lot of work already done for you here.

jquery mobile basic code

  1. You see the links to the scripts and stylesheet. The styles show up in your Style panel and appear to be editable, but I would want to recopy them into a local CSS file myself just to be sure.
  2. You see that data-roles are assigned. This is how jQuery Mobile identifies what you are creating. One of the benefits of data-roles is that there are styling options associated with them.
When you look at the basic beginning page in Live View, you can see what the jQuery Mobile scripts and styles are doing for you in terms of presentation.

jquery basic live view

It needs work, but you have a start.

What else can you do?

Next, take a look at the rest of the options in the jQuery Mobile Category of the Insert panel.

jquery mobile insert menu

The first one on the left is the JQuery Mobile Page icon, already mentioned. From left to right, the others are:

  • JQuery Mobile List View
  • JQuery Mobile Layout Grid
  • JQuery Mobile Collapsible Block
  • JQuery Mobile Text Input
  • JQuery Mobile Password Input
  • JQuery Mobile Text Area
  • JQuery Mobile Select Menu
  • JQuery Mobile Checkbox
  • JQuery Mobile Radio Button
  • JQuery Mobile Button
  • JQuery Mobile Slider
  • JQuery Mobile Toggle Switch

I’ll walk through inserting one of these to give you an idea of what Dreamweaver does with it. How about the List View? I’ll create a space for it after the generic Header text and click the JQuery Mobile List View icon.

jquery mobile list view dialog

A dialog window opens. You choose the type of list, the number of items in the list, and several other choices including some pre-styled options if you want to use a split button. I’ll pick “Star” from the split button icons.

You see this in Design View.

jquery list in design view

You see this is Live View.

jquery list view in live view

This is what happened in Code View.

jquery mobile list view code

The other jQuery mobile icons work in a similar way. While this is just a beginning for you, it does get you off to an fast (and easy) start in designing a site specifically for mobile using jQuery Mobile scripts.

Going Responsive

If you are interested in taking a different approach with Dreamweaver CS 5.5 to create a site designed to be responsive and work in all device sizes, see my e-book How to Create a Responsive Web Design in Dreamweaver CS 5.5. Explaining how Dreamweaver helps you do that is a long story, so I packaged it as an e-book and am charging a small fee to download it.

4 thoughts on “Using jQuery Mobile in Dreamweaver CS 5.5”

    1. Dreamweaver has a way to write media queries but I think what you are talking about in terms of apps would be easiest to address in Dreamweaver using the jQuery Mobile tools. I think CS6 has updated what DW does with mobile sites and app design by quite a bit, but I haven’t actually seen CS 6 yet. Have you looked on the Dreamweaver Exchange for helpful extensions?

  1. It is beyond my reach to purchase CS6 right now. I guess developing apps for Android and IPhone is a different ball game all together. Building apps for mobile phone browsers was easy with DW with newer platforms it is back to learning newer thongs again.

Leave a Reply