-
Notifications
You must be signed in to change notification settings - Fork 68
/
index.htm
283 lines (269 loc) · 12.7 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Circle Menu</title>
<style type="text/css">
body {
font-family: Helvetica, Arial, FreeSans, sans-serif;
}
code {
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
background:#eee;
border:1px solid #ccc;
padding:0 5px;
color:#444;
}
code.block {
padding:5px;
display:block;
white-space:pre;
margin:1em;
overflow:auto;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
details {
padding:1em 1em 1em 2em;
background:#E0E0E0;
margin-bottom:1em;
}
summary {
margin-left: -1em;
}
summary h3{
margin:0;
display:inline-block;
}
h2 {
border-top: 4px solid #eee;
}
h1 + p {
margin-right: 3em;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27581645-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<a href="https://github.com/Zikes/circle-menu">
<img
style="position: absolute; top: 0; right: 0; border: 0;"
src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
alt="Fork me on GitHub"
/>
</a>
<h1>Circle Menu</h1>
<p>A customizable jQuery plugin that emulates the menu in the
<a href="http://path.com">Path</a> application. Includes a selection animation and various
animation options for opening and closing the menu.</p>
<p><strong>
<a href="http://zikes.github.com/circle-menu/examples/">See it in action.</a>
</strong></p>
<h2>Author</h2>
<p>Jason Hutchinson (<a href="mailto:[email protected]">[email protected]</a>)</p>
<h2>How to Use</h2>
<p><a href="https://raw.github.com/Zikes/circle-menu/master/jQuery.circleMenu.js">Download</a> and
include the JS file in your page.</p>
<p>Create a list, with the first list item representing the icon at the center of the
menu.</p>
<code class="block"><ul>
<li><a href="#">+</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</code>
<p>The Javascript:</p>
<code class="block">$('ul').circleMenu({
item_diameter: 40,
circle_radius: 100,
direction: 'bottom-right'
});
</code>
<h2>Options</h2>
<details>
<summary><h3>angle</h3></summary>
<p>Default: <code>{start: 0, end: 90}</code></p>
<p>An object specifying the position of the items in relation to the center, measured in
degrees where 0/360 are on the right and angle travels in a clockwise direction. An
alternative to the <code>direction</code> option, if you want more control.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({angle:{start:260, end:280}});</code>
</details>
<details>
<summary><h3>circle_radius</h3></summary>
<p>Default: <code>80</code></p>
<p>The radius of the circle that determines the distance of the items from the
center.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({circle_radius:80});</code>
</details>
<details>
<summary><h3>delay</h3></summary>
<p>Default: <code>1000</code></p>
<p>When the menu is triggered on hover, the delay is the amount of time before the items
will move back in to the center, meaured in milliseconds.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({delay:500}); // a short delay</code>
</details>
<details>
<summary><h3>direction</h3></summary>
<p><strong>Options:</strong> <code>top</code> | <code>right</code> | <code>bottom</code>
| <code>left</code> | <code>top-right</code> | <code>top-left</code> |
<code>bottom-right</code> | <code>bottom-left</code> | <code>top-half</code> |
<code>right-half</code> | <code>bottom-half</code> | <code>left-half</code> |
<code>full</code></p>
<p>Default: <em>none</em></p>
<p>The direction of the items in relation to the center. <code>top</code> will place
the items above the center, in a 90 degree semicircle centered upwards.
<code>top-half</code> will create a full 180 degree semicircle. <code>full</code> will
create a full 360 degree circle, with the first item appearing at the top.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({direction:'bottom-right'});</code>
</details>
<details>
<summary><h3>item_diameter</h3></summary>
<p>Default: <code>30</code></p>
<p>The diameter of each item, in pixels. Used to set the CSS properties of each item
including width, height, and border-radius.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({item_diameter:30});</code>
</details>
<details>
<summary><h3>speed</h3></summary>
<p>Default: <code>500</code></p>
<p>The animation speed, in milliseconds. The number given is the total amount of time
it will take for the items to move in or out from the center.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({speed:1000});</code>
</details>
<details>
<summary><h3>step_in</h3></summary>
<p>Default: <code>-20</code></p>
<p>The number of milliseconds between each item moving in to the center when the menu
closes. A negative value will cause the menu to close in reverse, starting with the
last item.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({step_in:60});</code>
</details>
<details>
<summary><h3>step_out</h3></summary>
<p>Default: <code>20</code></p>
<p>The number of milliseconds between each item moving out from the center when the menu
opens. A negative value will cause the menu to open in reverse, starting with the last
item.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({step_out:60});</code>
</details>
<details>
<summary><h3>transition_function</h3></summary>
<p><strong>Options:</strong> <code>ease</code> | <code>linear</code> |
<code>ease-in</code> | <code>ease-out</code> | <code>ease-in-out</code> |
<code>cubic-bezier(n,n,n,n)</code></p>
<p>Default: <code>ease</code></p>
<p>The CSS timing function used to control the open/close animation.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({'transition_function':'linear'});</code>
</details>
<details>
<summary><h3>trigger</h3></summary>
<p><strong>Options:</strong> <code>hover</code> | <code>click</code> |
<code>none</code></p>
<p>Default: <code>hover</code></p>
<p>How the menu is triggered to open and close, whether by hovering over the center item
or clicking on it.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu({trigger:'click'});</code>
</details>
<h2>Events</h2>
<p>The following are events triggered by the menu.</p>
<details>
<summary><h3>close</h3></summary>
<p>Trigged when the menu closes.</p>
<p><strong>Examples:</strong></p>
<code class="block">$('ul').circleMenu({close:function(){}});</code>
<code class="block">$('ul').on('circleMenu-close',function(){});</code>
</details>
<details>
<summary><h3>init</h3></summary>
<p>Triggered when the menu is initialized.</p>
<p><strong>Examples:</strong></p>
<code class="block">$('ul').circleMenu({init:function(){}});</code>
<code class="block">$('ul').on('circleMenu-init',function(){});</code>
</details>
<details>
<summary><h3>open</h3></summary>
<p>Triggered when the menu opens.</p>
<p><strong>Examples:</strong></p>
<code class="block">$('ul').circleMenu({open:function(){}});</code>
<code class="block">$('ul').on('circleMenu-open',function(){});</code>
</details>
<details>
<summary><h3>select</h3></summary>
<p>Triggered when an item is selected. Passes the jQuery-wrapped item element as the
second argument to the function provided, after the jQuery event object.</p>
<p><strong>Examples:</strong></p>
<code class="block">$('ul').circleMenu({select:function(evt,item){}});</code>
<code class="block">$('ul').on('circleMenu-select',function(evt,item){});</code>
</details>
<h2>Commands</h2>
<p>The following commands may be used to manipulate the menu once it has been initialized.</p>
<details>
<summary><h3>close</h3></summary>
<p>Closes the menu</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu('close');</code>
</details>
<details>
<summary><h3>init</h3></summary>
<p>Re-intializes the menu. Handy for use after a new item has been added.</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').append($('<li><a href="#">New</a></li>')).circleMenu('init');</code>
</details>
<details>
<summary><h3>open</h3></summary>
<p>Opens the menu</p>
<p><strong>Example:</strong></p>
<code class="block">$('ul').circleMenu('open');</code>
</details>
<h2>Styling</h2>
<p>Classes are applied and removed as appropriate to represent the current state of the menu.</p>
<details>
<summary><h3>ul.circleMenu-closed</h3></summary>
<p>The menu is currently closed.</p>
<p><strong>Example:</strong></p>
<code class="block">ul.circleMenu-closed {background-color: red;}</code>
</details>
<details>
<summary><h3>ul.circleMenu-open</h3></summary>
<p>The menu is currently open.</p>
<p><strong>Example:</strong></p>
<code class="block">ul.circleMenu-open {background-color: green;}</code>
</details>
<h2>License</h2>
<p>DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE</p>
<p>Version 2, December 2004</p>
<p>Everyone is permitted to copy and distribute verbatim or modified copies of this license
document, and changing it is allowed as long as the name is changed.</p>
<p>DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION</p>
<ol start="0"><li>You just DO WHAT THE FUCK YOU WANT TO.</li></ol>
</body>
</html>