forked from hiroprotagonist/jquery.mobile.actionsheet
-
Notifications
You must be signed in to change notification settings - Fork 0
nbenitez/jquery.mobile.actionsheet
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
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 ANDROID MODE ------------ There are some new features to make jquery.mobile.actionsheet look more like an android action sheet, see the motivation in hiroprotagonist#9 New attributes: data-sheethidden="true" --> that will hide the anchor link, for cases you don't need any ui to open the sheet cause you'll do it programatically through $('#idsheet').actionsheet('open') data-sheetstyle="android" --> that will make an android-like action sheet, that means the sheet will be positioned at footer of page, with background taking all the width of the screen. data-sheetuseslide="true" --> that will use the jquery-ui slide effect to animate the sheet, which better mimics an android action sheet, instead of using the default css transition. PROGRAMATICALLY OPEN/CLOSE THE SHEET ------------------------------------ Also, a new method 'is_opened' has been added to check if the sheet is opened or closed, so, as an example, the code for a phone/tablet button handler to open/close the sheet could be: function onButtonPressed() { if ($('#mysheet').actionsheet('is_opened')) { $('#mysheet').actionsheet('close'); } else { $('#mysheet').actionsheet('open'); } }
About
An actionsheet for jquerymobile
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published
Languages
- JavaScript 100.0%