Implementing the ActionSheet Plugin - Exercise

Contact Us or call 1-877-932-8228
Implementing the ActionSheet Plugin - Exercise

Implementing the ActionSheet Plugin

Duration: 10 to 15 minutes.

In this exercise, you will download the ActionSheet plugin and use it to produce a simple modal dialog.

  1. Visit Stefan Gebhardt's ActionSheet page on Github for details on the plugin - we've downloaded the plugin's JavaScript and CSS files for you.
  2. Open Plugins/Exercises/actionsheet/index.html in a file editor.
  3. Link the CSS and JavaScript files from the index.html page.
  4. Use the plugin documentation to add some sample content. Note that you won't need to write any JavaScript - the plugin relies solely on data attributes in the markup.
  5. Test your work in a mobile browser.

Solution:

<a class="ui-btn ui-icon-plus ui-btn-icon-left" data-role="actionsheet">Open Dialog</a>
	<div>
		<a class="ui-btn" href="#page1">Page 1</a>
		<a class="ui-btn" href="#page2">Page 2</a>
		<br/>
		<a class="ui-btn ui-icon-delete ui-btn-icon-left" data-rel="close" href="#">Cancel</a>
	</div>

Code Explanation:

After downloading and linking the JavaScript and CSS files, using the plugin is quite simple. We add a button - a standard a tag - with attribute data-role="actionsheet". This becomes the toggle that opens the dialog.

The content for the opened dialog comes from the HTML element immediately following the data-role="actionsheet" toggle. Alternately, as the documentation states, we could have connected the toggle and dialog content with an attribute data-sheet on the toggle and an id on the dialog content. We add an optional "cancel" button (with attribute data-rel="close") in the dialog content.

Check out the JavaScript code for the plugin, too: open up Plugins/Solutions/actionsheet/jquery.mobile.actionsheet.js. You'll note that the plugin adopts the UI Widget Factory paradigm. Also note that, at the bottom, the plugin calls itself:

$( ":jqmData(role='page')" ).live( "pagecreate", function() { 
$( ":jqmData(role='actionsheet')", this ).each(function() {
$(this).actionsheet();
});
});

This code says: "When the page has finished loading, check each page to find all elements with attribute data-role="actionsheet" and call the actionsheet() plugin upon them."