Response title
This is preview!
action sheet
in jQuery Mobile
•
12 years ago
Hi all!
We have developed a jQuery Mobile Widget inspired by the iOS action sheet used on iPhone or iPad. Our action sheet slides in from the bottom of the screen, just as the original from Apple. It will be triggered by clicking a button in the header or content of a jqm page. The action sheet is a popover positioned in the middle of the screen. It's not using full-screen view as a jqm dialog. The sheet contains a set of buttons. A Cancel-Button to close and slide out the action sheet is optional. It can also be closed by clicking outside the sheet area.
The button to activate the sheet has to be tagged with data-role="actionsheet". The div-container next to the actionsheet-button is used as content for the sheet. You can put some buttons with <a data-role="button"> in this div-container. The sliding effect is done with CSS transforms.
Have a look at jquery.mobile.actionsheet
You can open index.html in your browser to test the action sheet.
Have fun,
tobias
We have developed a jQuery Mobile Widget inspired by the iOS action sheet used on iPhone or iPad. Our action sheet slides in from the bottom of the screen, just as the original from Apple. It will be triggered by clicking a button in the header or content of a jqm page. The action sheet is a popover positioned in the middle of the screen. It's not using full-screen view as a jqm dialog. The sheet contains a set of buttons. A Cancel-Button to close and slide out the action sheet is optional. It can also be closed by clicking outside the sheet area.
The button to activate the sheet has to be tagged with data-role="actionsheet". The div-container next to the actionsheet-button is used as content for the sheet. You can put some buttons with <a data-role="button"> in this div-container. The sliding effect is done with CSS transforms.
Have a look at jquery.mobile.actionsheet
You can open index.html in your browser to test the action sheet.
Have fun,
tobias
6
