Skip to content
This repository
Newer
Older
100644 57 lines (46 sloc) 2.03 kb
10107829 »
2011-12-07 readme
1 An iOS like action sheet for jQuery Mobile
2 ==========================================
3
4 What is it
5 ----------
6 A very easy to use and fully markup-driven action sheet
7
8 How To Use
9 ----------
10 * Clone this repository or download a tagged version. I suggest to use the
11 master branch but jqm 1.alpha and 1.beta may work better with v1.
12 * If you prefer "learning by doing" play around with pages contained in the
13 examples folder.
14 * If not;
15 Include actionsheet css and js to the first page of your application.
5eeff50e »
2011-05-11 Added little more documentation. Added a screenshot.
16 Then simply place a HTML Element on the page you like to open the popup.
10107829 »
2011-12-07 readme
17 A link tag for example. Add the data-role "actionsheet" to it. You can place it within
5eeff50e »
2011-05-11 Added little more documentation. Added a screenshot.
18 the header as well as within the content. Both should work.
19 Now add a div directly following this link. Wrap all content you like to show in the popup
f68dbe7a »
2011-12-07 Update README.md
20 into this div. Ready. See the following HTML
21
641bedd0 »
2011-12-07 Update README.md
22 ~~~
7240430f »
2011-12-07 readme
23 <a data-icon="plus" data-role="actionsheet">Open</a>
24 <div>
cf92b9b2 »
2011-12-07 Update README.md
25 <a data-role="button" href="#">Action 1</a>
26 <a data-role="button" href="#">Action 2</a>
27 <a data-role="button" href="#">Action 3</a>
28 <br/>
29 <!-- This close button is optional. The widget also closes if you click or touch outside of the popup -->
30 <a data-role="button" data-rel="close" href="#">Cancel</a>
7240430f »
2011-12-07 readme
31 </div>
641bedd0 »
2011-12-07 Update README.md
32 ~~~
f68dbe7a »
2011-12-07 Update README.md
33
d8a88fc9 » stefan
2011-06-18 #4, toggle sheet assoication via html id
34 Also you can use html ids to associate toggle and sheet. This way the sheet must not directly follow the toggle.
cf92b9b2 »
2011-12-07 Update README.md
35
7240430f »
2011-12-07 readme
36 <a data-role="actionsheet" data-sheet='sheet0'>Open</a>
d8a88fc9 » stefan
2011-06-18 #4, toggle sheet assoication via html id
37
7240430f »
2011-12-07 readme
38 .... A lot a lot a lot markup in between ....
d8a88fc9 » stefan
2011-06-18 #4, toggle sheet assoication via html id
39
7240430f »
2011-12-07 readme
40 <div id='sheet0'>
41 <h1>This is sheet0 speaking</h1>
42 </div>
cf92b9b2 »
2011-12-07 Update README.md
43
10107829 »
2011-12-07 readme
44 * If you like to change the in -out Animation you can do that by editing the keyframes in jquery.mobile.actionsheet.css
88a54367 »
2011-05-17 Feature lit
45
d8a88fc9 » stefan
2011-06-18 #4, toggle sheet assoication via html id
46
88a54367 »
2011-05-17 Feature lit
47 Features
48 --------
49 * Easy to configure CSS3 based keyframe animations
50 * Popup content can be any HTML
51 * No js coding needed.
52 * Nice default look
10107829 »
2011-12-07 readme
53
54 Hint
55 ----
56 * If you are looking for a programmatic javascript approach take a look at this
57 usefull plugin: https://github.com/jtsage/jquery-mobile-simpledialog
58
Something went wrong with that request. Please try again.