Creating Modal-Dialogs Grids and Collapsible Blocks

by Andy Matthews Raymond Camden | May 2012 | Web Services Open Source Web Development

In this article, we will:

  • Discuss how to link to and create dialogs – also how to handle leaving them
  • Demonstrate grids and how you can add them to your pages
  • Show how collapsible blocks allow you to pack a lot of information in a small amount of space

In this article by Raymond Camden, co-author of jQuery Mobile Development Essentials, we will look at dialogs, grids, and collapsible blocks.

Creating Dialogs

Dialogs: at least under the jQuery Mobile framework: are small windows that cover an existing page. They typically provide a short message or question for the user. They will also typically include a button that allows the user to dismiss the dialog and return back to the site. Creating a dialog in jQuery Mobile is done by simply adding a simple attribute to a link: data-rel="dialog". The following listing demonstrates an example:

Listing 7-1: test1.html <!DOCTYPE html> <html> <head> <title>Dialog Test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/ latest/jquery.mobile.min.css" /> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/mobile/latest/ jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="first"> <div data-role="header"> <h1>Dialog Test</h1> </div> <div data-role="content"> <p> <a href="#page2">Another Page (normal)</a> </p> <p> <a href="#page3" data-rel="dialog">A Dialog (dialog)</a> </p> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>The Second</h1> </div> <div data-role="content"> <p> This is the Second </p> </div> </div> <div data-role="page" id="page3"> <div data-role="header"> <h1>The Third</h1> </div> <div data-role="content"> <p> This is the Third </p> </div> </div> </body> </html>

This is a simple, multi-page jQuery Mobile site. Notice how we link to the second and third page. The first link is typical. The second link, though, includes the data-rel attribute mentioned earlier. Notice that both the second and third page are defined in the usual manner. So the only change we have here is in the link. When that second link is clicked, the page is rendered completely differently:

Remember, that page wasn't defined differently. The change you see in the previous screenshot is driven by the change to the link itself. That's it! Clicking the little X button will hide the dialog and return the user back to the original page.

Any link within the page will handle closing the dialog as well. If you wish to add a cancel type button, or link, you can do so using data-rel="back" in the link. The target of the link should be to the page that launched the dialog. Listing 7-2 shows a modified version of the earlier template. In this one, we've simply added two buttons to the dialog. The first button will launch the second page, while the second one will act as a Cancel action.

Listing 7-2: test2.html <!DOCTYPE html> <html> <head> <title>Dialog Test (2)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/ latest/jquery.mobile.min.css" /> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/mobile/ latest/jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="first"> <div data-role="header"> <h1>Dialog Test</h1> </div> <div data-role="content"> <p> <a href="#page2">Another Page (normal)</a> </p> <p> <a href="#page3" data-rel="dialog">A Dialog (dialog)</a> </p> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>The Second</h1> </div> <div data-role="content"> <p> This is the Second </p> </div> </div> <div data-role="page" id="page3"> <div data-role="header"> <h1>The Third</h1> </div> <div data-role="content"> <p> This is the Third </p> <a href="#page2" data-role="button">Page 2</a> <a href="#first" data-role="button" data-rel="back">Cancel</a> </div> </div> </body> </html>

The major change in this template is the addition of the buttons in the dialog, contained within page3 div. Notice the first link is turned into a button, but outside of that is a simple link. The second button includes the addition of the data-rel="back" attribute. This will handle simply dismissing the dialog. The following screenshot shows how the dialog looks with the buttons added:

Laying out content with grids

Grids are one of the few features of jQuery Mobile that do not make use of particular data attributes. Instead, you work with grids simply by specifying CSS classes for your content.

Grids come in four flavors: Two column, Three column, Four column, and Five column. (You will probably not want to use the five column on a phone device. Save that for a tablet instead.)

You begin a grid with a divblockthat makes use of the class ui-grid-X, where X will be either a, b, c, or d. ui-grid-arepresents a two column grid. ui-grid-bis a three column grid. You can probably guess what cand dcreate.

So to begin a two column grid, you would wrap your content with the following:

<div class="ui-grid-a"> Content </div>

Within the divtag, you then use a divfor each "cell" of the content. The class for grid calls begins with ui-block-X, where Xgoes from a to d. ui-block-a would be used for the first cell, ui-block-b for the next, and so on. This works much like HTML tables.

Putting it together, the following code snippet demonstrates a simple two column grid with two cells of content:

<div class="ui-grid-a"> <div class="ui-block-a">Left</div> <div class="ui-block-b">Right</div> </div>

Text within a cell will automatically wrap. Listing 7-3 demonstrates a simple grid with a large amount of text in one of the columns:

Listing 7-3: test3.html <!DOCTYPE html> <html> <head> <title>Grid Test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/ latest/jquery.mobile.min.css" /> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/mobile/ latest/jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="first"> <div data-role="header"> <h1>Grid Test</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"> <p> This is my left hand content. There won't be a lot of it. </p> </div> <div class="ui-block-b"> <p> This is my right hand content. I'm going to fill it with some dummy text. </p> <p> Bacon ipsum dolor sit amet andouille capicola spare ribs, short loin venison sausage prosciutto turducken turkey flank frankfurter pork belly short ribs. Venison frankfurter filet mignon, jowl meatball hamburger pastrami pork chop drumstick. Fatback pancetta boudin, ribeye shoulder capicola cow leberkäse bresaola spare ribs prosciutto venison ball tip jowl andouille. Beef ribs t-bone swine, tail capicola turkey pork belly leberkäse frankfurter jowl. Shankle ball tip sirloin frankfurter bacon beef ribs. Tenderloin beef ribs pork chop, pancetta turkey bacon short ribs ham flank chuck pork belly. Tongue strip steak short ribs tail swine. </p> </div> </div> </div> </div> </body> </html>

In the mobile browser, you can clearly see the two columns:

Working with other types of grids then is simply a matter of switching to the other classes. For example, a four column grid would be set up similar to the following code snippet:

<div class="ui-grid-c"> <div class="ui-block-a">1st cell</div> <div class="ui-block-b">2nd cell</div> <div class="ui-block-c">3rd cell</div> </div>

Again, keep in mind your target audience. Anything over two columns may be too thin on a mobile phone.

To create multiple rows in a grid, you simply repeat blocks. The following code snippet demonstrates a simple example of a grid with two rows of cells:

<div class="ui-grid-a"> <div class="ui-block-a">Left Top</div> <div class="ui-block-b">Right Top</div> <div class="ui-block-a">Left Bottom</div> <div class="ui-block-b">Right Bottom</div> </div>

Notice that there isn't any concept of a row. jQuery Mobile handles knowing that it should create a new row when the block starts over with the one marked ui-block-a. The following code snippet, Listing 7-4 is a simple example:

Listing 7-4:test4.html <!DOCTYPE html> <html> <head> <title>Grid Test (2)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/ latest/jquery.mobile.min.css" /> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/mobile/latest/ jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="first"> <div data-role="header"> <h1>Grid Test</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"> <p> <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="ray.png"> </p> </div> <div class="ui-block-b"> <p> This is Raymond Camden. Here is some text about him. It may wrap or it may not but jQuery Mobile will make it look good. Unlike Ray! </p> </div> <div class="ui-block-a"> <p> This is Scott Stroz. Scott Stroz is a guy who plays golf and is really good at FPS video games. </p> </div> <div class="ui-block-b"> <p> <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="scott.png"> </p> </div> </div> </div> </div> </body> </html>

The following screenshot shows the result:

(For more resources on jQuery Mobile, see here.)

Working with collapsible content

The final widget we will look at in this article supports collapsible content. This is simply content that can be collapsed and expanded. Creating a collapsible content widget is as simple as wrapping it in a div, adding data-role="collapsible", and including a title for the content. Consider the following simple example:

<div data-role="collapsible"> <h1>My News</h1> <p>This is the latest news about me… </div>

Upon rendering, jQuery Mobile will turn the title into a clickable banner that can expand and collapse the content within. Let's look at a real example. Imagine you want to share the location of your company's primary address. You also want to include satellite offices. Since most people won't care about the other offices, we can use a simple collapsible content widget to hide the content by default. The following code snippet, Listing 7-5demonstrates an example of this:

Listing 7-5: test5.html <!DOCTYPE html> <html> <head> <title>Collapsible Content</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/ latest/jquery.mobile.min.css" /> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/mobile/latest/ jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="first"> <div data-role="header"> <h1>Our Offices</h1> </div> <div data-role="content"> <p> <strong>Main Office:</strong><br/> 400 Elm Street<br/> New York, NY<br/> 90210 </p> <div data-role="collapsible"> <h3>Satellite Offices</h3> <p> <strong>Asia:</strong> Another Address Here </p> <p> <strong>Europe:</strong> Another Address Here </p> <p> <strong>Mars:</strong> Another Address Here </p> </div> </div> </div> </body> </html>

You can see that the other offices are all wrapped in the div tag using the new collapsible content role. When viewed, notice that they are hidden:

Clicking the + next to the title opens it, and can be clicked again to reclose it:

By default, jQuery Mobile will collapse and hide the content. You can, of course, tell jQuery Mobile to initialize the block open instead of closed. To do so, simply add data-collapsed="false" to the initial div tag. For example:

<div data-role="collapsible" data-collapsed="false"> <h1>My News</h1> <p>This is the latest news about me… </div>

This region will still have the ability to collapse and open, but will simply default to being opened initially.

Another option for collapsible content blocks is the ability to theme the content of the area that is collapsed. By providing a data-content-themeattribute, you can specify a background color that makes the region a bit more cohesive. In the following screenshot, the first region does not make use of the feature, while the second one does:

In listing 7-6, we simply wrap four collapsible blocks with a divtag that makes use of a collapsible set. Once done, jQuery Mobile will group them together and automatically close one once another is open:

Notice that the icon is also shifted to the right. This demonstrates another option, data-iconpos. The following code snippet, found in the code folder as test5-2.html, demonstrates these options:

<div data-role="collapsible"> <h3>First</h3> <p> Hello World... </p> </div> <div data-role="collapsible" data-content-theme="c" data-iconpos="right"> <h3>First</h3> <p> Hello World again... </p> </div>

Finally, you can take multiple collapsible regions and combine them into one called an accordion. This is done by simply taking multiple collapsible blocks and wrapping them in a new div tag. This div tag makes use of data-role="collapsible-set" to make the inner blocks as one unit. Listing 7-6 demonstrates an example of this. It takes the earlier office address example and uses a collapsible set for each unique address

Listing 7-6: test6.html <!DOCTYPE html> <html> <head> <title>Collapsible Content</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/ latest/jquery.mobile.min.css" /> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/mobile/ latest/jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="first"> <div data-role="header"> <h1>Our Offices</h1> </div> <div data-role="content"> <div data-role="collapsible-set"> <div data-role="collapsible"> <h3>Main Office</h3> <p> 400 Elm Street<br/> New York, NY<br/> 90210 </p> </div> <div data-role="collapsible"> <h3>Asia</h3> <p> Another Address Here </p> </div> <div data-role="collapsible"> <h3>Europe</h3> <p> Another Address Here </p> </div> <div data-role="collapsible"> <h3>Mars</h3> <p> Another Address Here </p> </div> </div> </div> </div> </body> </html>

In listing 7-6, we simply wrap four collapsible blocks with a divtag that makes use of a collapsible set. Once done, jQuery Mobile will group them together and automatically close one once another is open:

Summary

In this article, we learned more about how jQuery Mobile enhances basic HTML to provide additional layout controls to our mobile pages. With dialogs, we learned how to provide a basic, quick, modal message to users. With grids, we learned a new way to easily layout content in columns. Finally, with the collapsible content blocks, we learned a cool way to share additional content without taking up as much screen space.

Resources for Article :




Books From Packt


jQuery Mobile First Look
jQuery Mobile First Look

jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery for Designers: Beginner’s Guide
jQuery for Designers: Beginner’s Guide

jQuery Tools UI Library
jQuery Tools UI Library

Adobe Edge Quickstart Guide
Adobe Edge Quickstart Guide

Facebook Application Development with Graph API Cookbook
Facebook Application Development with Graph API Cookbook

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

PhoneGap Beginner's Guide
PhoneGap Beginner's Guide


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1
e
B
P
B
X
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software