An actionsheet for jquerymobile
Switch branches/tags
Nothing to show
Pull request Compare This branch is 34 commits behind hiroprotagonist:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README
actionsheet-screenshot.png
index.html
jquery.mobile.actionsheet.css
jquery.mobile.actionsheet.js

README

This is an iOS like action sheet

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.
A link tag for example. Add the data-role "actionsheet" to it. U can place it within
the header as well as within the content. Both should work.
Now add a div directly following this link. Wrap all content you like to show in the popup
into this div. Ready. See the following HTML code for details.

<a data-icon="plus" data-role="actionsheet">Open</a>
<div>
      <a data-role="button" href="#">Action 1</a>
      <a data-role="button" href="#">Action 2</a>
      <a data-role="button" href="#">Action 3</a>
      <br/>
      <!-- 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>
</div>

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>
</div>


If you like to change the in -out Animation you can do that by editing the keyframes in jquery.mobile.actionsheet.css


Features
--------
* Easy to configure CSS3 based keyframe animations
* Popup content can be any HTML
* No js coding needed.
* Nice default look