Step-by-Step Collapsible Panels
With your defined site in place, start building a custom mobile page with jQuery Mobile the same way you create any new page in Dreamweaver CS5.5 (see Figure 4):
- Choose File > New to open the New Document dialog.
- In the Category column, choose Blank Page.
- In the Page Type column, choose HTML.
- In the Layout column, choose <none>.
- In the DocType pop-up, choose HTML 5.
- Click Create.
- Save your file, and enter a title in the Title box on the Document toolbar at the top of the page. It will also be helpful to resize the document window to the 480 x 800 pixel mobile phone viewport size (see Figure 5).
Figure 4 Creating a new page to use as a jQuery Mobile site.
Figure 5 Configuring Dreamweaver CS5.5 to design jQuery Mobile pages.
The local files are accessible without an Internet connection. The remote files will be updated with the latest and greatest jQuery Mobile improvements. Now that you know the difference, you make the call by clicking one button or the other. Either option works well in most situations.
After you click OK, the jQuery Mobile Page dialog opens. The default settings create a page with an appropriately named data-page called "page" as well as header and footer elements, as shown in Figure 7.
Figure 7 Defining data-page properties and elements.
Click OK in the jQuery Mobile Page dialog to create the rest of the basic framework for your jQuery Mobilebased site.
Phase 1 is now complete. Toggle into Live View to see how the page will look in a mobile browser. Notice that the basic jQuery Mobile page has a content area between header and footer.
Toggle out of Live View to edit page content in the Design view. Customize the header and footer content as you like. Next, select the "content" placeholder, and choose Insert > jQuery Mobile > Collapsible Block.
That's it! You just created a set of three collapsible (and expandable) blocks. Try them in Live Viewclick a block to expand or collapse it.
At this point, before you fine-tune the display and other options, it might be opportune to customize the content of the collapsible pages. Do that with Live View offand then see how the content looks with Live View on, testing each expandable block (see Figure 8).
Figure 8 Previewing jQuery Mobile content in Live View.