- Building a Custom jQuery Mobile Page from Scratch
- Design Constraints for Mobile Devices
- How jQuery Mobile Works
- Other Tools
- Step-by-Step Collapsible Panels
- Additional Options
- From Here
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Step-by-Step Collapsible Panels
Of course, you start this process by defining and working within a Dreamweaver site. In every article I write, I emphasize how critical that step is, but it's particularly important here since our page will require uncorrupted communication between an HTML page, JavaScript files, and CSS files. If you don't have a Dreamweaver site ready for this purpose, choose Site > New Site from the main Dreamweaver menu and define the local version of the site with a site name and root folder.
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.
I mentioned earlier in this article—and discussed in more detail in the previous article in this series—that all jQuery Mobile content is enclosed in a data-page element. So the next step in designing a custom jQuery Mobile page is to insert a data-page. To do that, choose Insert > jQuery Mobile > Page. This action launches the jQuery Mobile Files dialog, which defines links to essential JavaScript and CSS files required for the jQuery Mobile objects. Your basic choice here is local or remote (see Figure 6). If you select the Remote (CDN) option, the necessary JavaScript and CSS files will be created as remote files at the jquery.com site. If you choose the local option, Dreamweaver will use versions of those files that are included in your local installation of Dreamweaver CS5.5.
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.
){kind=small}
Figure 6 Defining links to required JavaScript and CSS files.
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 Mobile–based 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 View—click 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 off—and 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.