Browse files

#4, toggle sheet assoication via html id

  • Loading branch information...
1 parent 5ed396f commit d8a88fc990ad1cf23563747010bf1092d4cbeaea stefan committed Jun 18, 2011
Showing with 23 additions and 5 deletions.
  1. +13 −3 README
  2. +6 −1 index.html
  3. +4 −1
@@ -1,6 +1,6 @@
This is an iOS like action sheet
-See index.html more for doku.
+See index.html for full example.
Its not a page its a popup you can use on a page. To do so, first, include actionsheet css and js to the first page of your application.
Then simply place a HTML Element on the page you like to open the popup.
@@ -15,13 +15,23 @@ into this div. Ready. See the following HTML code for details.
<a data-role="button" href="#"/>Action 2</a>
<a data-role="button" href="#"/>Action 3</a>
+ <!-- This close button is optional. The widget also closes if you click or touch outside of the popup -->
<a data-role="button" data-rel="close" href="#"/>Cancel</a>
-The example above contains the optional close button to close the widget. It also closes if
-you click or touch outside of the popup.
+Also you can use html ids to associate toggle and sheet. This way the sheet must not directly follow the toggle.
+<a data-role="actionsheet" data-sheet='sheet0'>Open</a>
+.... A lot a lot a lot markup in between ....
+<div id='sheet0'>
+ <h1>This is sheet0 speaking</h1>
If you like to change the in -out Animation you can do that by editing the keyframes in
* Easy to configure CSS3 based keyframe animations
@@ -24,7 +24,9 @@ <h1>A.S. Test-Site</h1>
</div><!-- /header -->
- <div data-role="content">
+ <div data-role="content">
+ <!-- It is possible to associate toggle and sheet via html id -->
+ <a data-role='actionsheet' data-sheet='sheet0' id='a0'>Open Sheet 0</a>
<p>There are two action sheets on this page. One as part of the header and one as part of the content</p>
<p>The one in the header uses an optional close button. See the markup for details</p>
<p>Primary animation is done using CSS3 use a webkit browser to view this site.</p>
@@ -34,6 +36,9 @@ <h1>A.S. Test-Site</h1>
<a data-role="button" href="#">Update 2</a>
<a data-role="button" href="#">Update 3</a>
+ <div id='sheet0'>
+ <h1>This is sheet 0</h1>
+ </div>
</div><!-- /content -->
</div><!-- /page -->
@@ -13,7 +13,10 @@
content: undefined,
_init: function() {
var self = this;
- this.content='div').addClass('ui-actionsheet-content');
+ this.content = ((typeof this.element.jqmData('sheet') !== 'undefined')
+ ? $('#' + this.element.jqmData('sheet'))
+ :'div'))
+ .addClass('ui-actionsheet-content');
if( this.content.parents( ':jqmData(role="content")' ).length === 0 ) {
// sheet-content is not part of the page-content,
// maybe it's part of the page-header: move it to page-content!

0 comments on commit d8a88fc

Please sign in to comment.