Join GitHub today
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
|Failed to load latest commit information.|
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