Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 629 lines (535 sloc) 20.506 kb
eceb7fc @tj docs
authored
1 <!DOCTYPE html>
afadbfa @tj Initial commit
authored
2 <html>
3 <head>
d8012d1 @tj title
authored
4 <title>UIKit - Modern UI components for a modern web</title>
29f1e24 @tj close
authored
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
afadbfa @tj Initial commit
authored
6 <script src="jquery.js"></script>
7 <script src="../build/ui.js"></script>
b40cc02 @tj highlight
authored
8 <script src="highlight.js"></script>
afadbfa @tj Initial commit
authored
9 <link rel="stylesheet" href="../build/ui.css">
680f507 @tj quick n dirty styling
authored
10 <link rel="stylesheet" href="style.css">
afadbfa @tj Initial commit
authored
11 <script>
12 $(function(){
772aaff @tj Added ContextMenut. Closes #3
authored
13 var menu = ui.menu()
ac7a56e @tj Added optional callback support to Menu items
authored
14 .add('Add item')
772aaff @tj Added ContextMenut. Closes #3
authored
15 .add('Edit item', function(){ console.log('edit'); })
16 .add('Remove item', function(){ console.log('remove'); })
17 .add('Remove "Add item"', function(){
18 menu
19 .remove('Add item')
20 .remove('Remove "Add item"');
ac7a56e @tj Added optional callback support to Menu items
authored
21 });
22
23 menu.on('Add item', function(){
24 console.log('added an item');
25 });
772aaff @tj Added ContextMenut. Closes #3
authored
26
27 oncontextmenu = function(e){
28 e.preventDefault();
29 menu
30 .moveTo(e.pageX, e.pageY)
31 .show();
32 };
33
97400b8 @tj docs
authored
34 $('#simple-dialog').click(function(){
eceb7fc @tj docs
authored
35 new ui.Dialog({ title: 'Title', message: "I'm a simple dialog" })
36 .show()
37 .hide(2000);
38 return false;
39 });
40
97400b8 @tj docs
authored
41 $('#closable-dialog').click(function(){
42 new ui.Dialog({ title: 'Title', message: "I'm a dialog that wont auto-close" })
eceb7fc @tj docs
authored
43 .show()
97400b8 @tj docs
authored
44 .closable();
eceb7fc @tj docs
authored
45 return false;
46 });
6bc70b4 @tj docs
authored
47
48 $('#ui-dialog-1').click(function(){
49 ui.dialog('Just another dialog')
50 .closable()
51 .show();
52 return false;
53 });
54
55 $('#ui-dialog-2').click(function(){
56 ui.dialog('Title', 'Just another dialog')
57 .closable()
58 .show();
59 return false;
60 });
61
62 $('#dialog-effect-slide').click(function(){
63 ui.dialog('Hello!')
64 .effect('slide')
65 .show()
66 .hide(1500);
67 return false;
68 })
69
70 $('.effect-slide').click(function(){
71 ui.dialog('Hello!')
72 .effect('slide')
73 .show()
74 .hide(1500);
75 return false;
76 })
77
78 $('.effect-scale').click(function(){
79 ui.dialog('Hello!')
80 .effect('scale')
81 .show()
82 .hide(1500);
83 return false;
84 })
85
86 $('.effect-fade').click(function(){
87 ui.dialog('Hello!')
88 .effect('fade')
89 .show()
90 .hide(1500);
91 return false;
92 })
93
94 $('#dialog-hide').click(function(){
95 var dialog = ui.dialog("I'll close in 2 seconds").show();
96 setTimeout(function(){
97 dialog.hide();
98 }, 2000);
99 return false;
100 })
101
102 $('#simple-confirmation').click(function(){
103 new ui.Confirmation({ title: 'Remove user', message: 'are you sure?' })
104 .show(function(ok){
105 if (ok) ui.dialog('user removed!').show().hide(1500);
106 });
107 return false;
108 })
109
110 $('#ui-confirm').click(function(){
111 ui.confirm('Remove user', 'are you sure?')
112 .ok('Remove')
113 .cancel('No dont!')
114 .show(function(ok){
115 if (ok) ui.dialog('user removed!').show().hide(1500);
116 });
117 return false;
118 });
119
120 $('#ui-confirm-2').click(function(){
121 ui.confirm('are you sure?')
c287b79 @tj Fixed Confirmation on .close, invoke the callback
authored
122 .closable()
6bc70b4 @tj docs
authored
123 .show(function(ok){
124 if (ok) ui.dialog('done!').show().hide(1500);
c287b79 @tj Fixed Confirmation on .close, invoke the callback
authored
125 else ui.dialog('never-mind').show().hide(1500);
6bc70b4 @tj docs
authored
126 });
127 return false;
128 });
47da2dd @tj docs
authored
129
130 $('#dialog-overlay').click(function(){
131 ui.dialog('Overlay time')
132 .closable()
133 .overlay()
134 .show();
135 return false;
136 })
137
138 $('#modal-overlay').click(function(){
139 ui.dialog('Overlay time')
140 .closable()
141 .modal()
142 .show();
143 return false;
144 })
6c15acb @tj color-picker docs
authored
145
c011790 @tj color picker in dialog example
authored
146 $('#dialog-picker').click(function(){
147 ui.dialog('Select a color', new ui.ColorPicker)
148 .effect('slide')
149 .closable()
150 .show();
151 return false;
152 })
153
6c15acb @tj color-picker docs
authored
154 var picker = new ui.ColorPicker;
155 picker.el.appendTo('#default-color-picker');
156 picker.on('change', function(color){
157 $('.r').text(color.r)
158 $('.g').text(color.g)
159 $('.b').text(color.b)
160 $('.rgb').text(color.toString()).css('background', color)
161 });
c3ea6dc @tj colorpicker size docs
authored
162
163 var picker = new ui.ColorPicker;
164 picker.size(100);
165 picker.el.appendTo('#color-picker-size');
aaecc64 @tj more color-picker docs
authored
166
167 var picker = new ui.ColorPicker;
168 picker.width(80);
169 picker.el.appendTo('#color-picker-width');
cdd7b4d @tj setting up card example
authored
170
171 var picker = new ui.ColorPicker;
172 var card = ui.card('<p>Click to show a color picker</p>', picker);
173 card.el.appendTo('#card');
204e8a5 @tj docs
authored
174
175 $('#flip').click(function(){
176 card.flip();
177 return false;
178 })
30e7103 @tj toggle display
authored
179
696402b @tj styling lame docs
authored
180 $('#wrapper section section').hide();
e106e7d @tj misc
authored
181 $('h2 a').click(function(e){
182 e.preventDefault();
183
30e7103 @tj toggle display
authored
184 $(this)
185 .parents('section')
186 .find('section')
187 .slideToggle();
188 });
9c70552 @tj Added notification docs
authored
189
190 $('#notify').click(function(e){
191 e.preventDefault();
192 ui.notify('Email', 'you have 3 new messages')
193 .effect('slide');
194
195 setTimeout(function(){
196 ui.warn('Warning', 'something happened')
197 .effect('slide');
198
199 setTimeout(function(){
200 ui.error('Error', 'something failed')
201 .closable()
202 .hide(8000)
203 .effect('slide');
204
205 setTimeout(function(){
206 ui.notify('Stick notification')
207 .sticky()
208 .effect('slide');
209 }, 200);
210 }, 200);
211 }, 200);
212 });
ff0d53a @tj Added split button (needs docs/examples)
authored
213
afadbfa @tj Initial commit
authored
214 });
215 </script>
216 </head>
217 <body>
de10076 @tj Added github ribbon. Closes #32
authored
218 <a href="http://github.com/visionmedia/uikit"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/4c7dc970b89fd04b81c8e221ba88ff99a06c6b61/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub"></a>
696402b @tj styling lame docs
authored
219 <div id="wrapper">
220 <div id="logo">
221 <h1>UI<strong>kit</strong></h1>
222 <span>Modern UI components for the modern web</span>
223 </div>
eceb7fc @tj docs
authored
224
ff0d53a @tj Added split button (needs docs/examples)
authored
225 <p>UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling it's easy to style UIKit to match your application, no preprocessor variables, just raw CSS structure! As a result most of the styling you see in this document is for demonstration only.</p>
1f2ebfd @tj misc
authored
226
d03c420 @tj nesting sections
authored
227 <section>
1119ccb @tj Added quick docs for `ui.Emitter`
authored
228 <h2 id="emitter-section"><a href="#">Emitter</a></h2>
229 <p>The event Emitter is used by many of the components to emit events like "hide" and "show" among others, but it's public API! so you're free to use it in your projects.</p>
230
231 <section>
232 <h3>API</h3>
233 <p>Currently the Emitter API is defined as following:</p>
234 <pre><code>var emitter = new ui.Emitter;
235 emitter.on('event', callback);
236 emitter.once('event', callback);
237 emitter.off('event', callback);
238 emitter.off('event');
239 emitter.emit('event', foo, bar, baz);</code></pre>
240 </section>
241 </section>
242
243 <section>
696402b @tj styling lame docs
authored
244 <h2 id="dialog-section"><a href="#">Dialog</a></h2>
245 <p>The Dialog component is the basis of more specific components
246 such the Confirmation Dialog.</p>
247
248 <section>
249 <h3>Example</h3>
250 <p>Click <a href="#" id="simple-dialog">here</a> to
251 open a simple dialog that closes after 2 seconds.</p>
252 <pre>
253 <code>
254 new ui.Dialog({ title: 'Title', message: "I'm a simple dialog" })
255 .show()
256 .hide(2000);
257 </code>
258 </pre>
259
260 <h3>.closable()</h3>
261 <p>By default dialogs do not have a close button, but it's
262 easy to add one! Click <a href="#" id="closable-dialog">here</a> to try it.</p>
263 <pre>
264 <code>
265 new ui.Dialog({ title: 'Title', message: "I'm a dialog that wont auto-close" })
266 .closable()
267 .show();
268 </code>
269 </pre>
270
271 <h3>ui.dialog(msg)</h3>
272 <p><code>ui.dialog(msg)</code> is a nice shortcut, try it <a href="#" id="ui-dialog-1">here</a>.</p>
273 <pre>
274 <code>
275 ui.dialog('Just another dialog')
276 .closable()
277 .show();
278 </code>
279 </pre>
280
281 <h3>ui.dialog(title, msg)</h3>
282 <p>How about a title this time? <a href="#" id="ui-dialog-2">try it</a>.</p>
283 <pre>
284 <code>
285 ui.dialog('Title', 'Just another dialog')
286 .closable()
287 .show();
288 </code>
289 </pre>
290
291 <h3>.hide([ms])</h3>
292 <p>Dialogs will remain open until you .close() them, optionally providing a delay in milliseconds. <a href="#" id="dialog-hide">Try it</a>.</p>
293 <pre>
294 <code>
295 var dialog = ui.dialog("I'll close in 2 seconds").show();
296 setTimeout(function(){
297 dialog.hide();
298 }, 2000);
299 </code>
300 </pre>
301
302 <h3>.overlay()</h3>
303 <p>This method adds an overlay, which may be clicked (by default) to close the dialog. <a href="#" id="dialog-overlay">Test it out</a>.</p>
304 <pre>
305 <code>
306 ui.dialog('Overlay time')
307 .closable()
308 .overlay()
309 .show();
310 </code>
311 </pre>
312
313 <h3>.modal()</h3>
314 <p>This method adds an overlay which is not clickable, the user must interact with the dialog. <a href="#" id="modal-overlay">Test it out</a>.</p>
315 <pre>
316 <code>
317 ui.dialog('Overlay time')
318 .closable()
319 .modal()
320 .show();
321 </code>
322 </pre>
323
324 <h3>.effect(name)</h3>
325 <p>Effects are simply applied via CSS classes, no JavaScript animations, so they're nice and fast! Try out the <a href="#" id="dialog-effect-slide">slide</a> effect.</p>
326 <pre>
327 <code>
328 ui.dialog('Hello!')
329 .effect('slide')
330 .show()
331 .hide(1500);
332 </code>
333 </pre>
334
335 <p>Try a few more, and remember, they're just classes! create your own.</p>
336 <ul>
337 <li><a href="#" class="effect-slide">slide</a></li>
338 <li><a href="#" class="effect-fade">fade</a></li>
339 <li><a href="#" class="effect-scale">scale</a></li>
340 </ul>
341
342 <h3>Auto-closing</h3>
343 <p>Dialog is aware of the "active" dialog, and when shown will hide the other. Test it out! click one of the links below and then quickly click another.</p>
344 <ul>
345 <li><a href="#" class="effect-slide">slide</a></li>
346 <li><a href="#" class="effect-fade">fade</a></li>
347 <li><a href="#" class="effect-scale">scale</a></li>
348 </ul>
4d720c5 @tj Added docs for rich content in Dialogs
authored
349
350 <h3>Rich content</h3>
5351b06 @tj fixed docs
authored
351 <p>Dialogs are of course not limited to the textual content mentioned so far, jQuery objects and other UIKit components may also be passed.</p>
4d720c5 @tj Added docs for rich content in Dialogs
authored
352
353 <script>
354 $(function(){
355 $('#dialog-jquery').click(function(e){
356 e.preventDefault();
357 ui.dialog('jQuery object', $('Just a <strong>string</strong> of <em>HTML</em>.'))
358 .closable()
359 .show();
360 });
361
362 $('#dialog-colorpicker').click(function(e){
363 e.preventDefault();
364 var picker = new ui.ColorPicker;
365 ui.dialog('UIKit component', picker)
366 .closable()
367 .show();
368 });
369 });
370 </script>
371
372 <ul>
373 <li><a href="#" id="dialog-jquery">jQuery object</a></li>
374 <li><a href="#" id="dialog-colorpicker">ColorPicker</a></li>
375 </ul>
696402b @tj styling lame docs
authored
376 </section>
377 </section>
d03c420 @tj nesting sections
authored
378
379
696402b @tj styling lame docs
authored
380 <section>
381 <h2 id="confirmation-section"><a href="#">Confirmation</a></h2>
382 <p>The Confirmation extends Dialog to provide a confirmation dialog.</p>
383
384 <section>
385 <h3>Example</h3>
386 <p>Click <a href="#" id="simple-confirmation">here</a> to
387 confirm removal of a user.</p>
388 <pre>
389 <code>
390 new ui.Confirmation({ title: 'Remove user', message: 'are you sure?' })
391 .show(function(ok){
392 if (ok) ui.dialog('user removed!').show().hide(1500);
393 });
394 </code>
395 </pre>
396
397 <h3>ui.confirm(title, msg)</h3>
398 <p>Much like ui.dialog() there's a shortcut, try it <a href="#" id="ui-confirm">here</a>. We can tweak the button text with .ok() and .cancel().</p>
399 <pre>
400 <code>
401 ui.confirm('Remove user', 'are you sure?')
402 .ok('Remove')
403 .cancel('No dont!')
404 .show(function(ok){
405 if (ok) ui.dialog('user removed!').show().hide(1500);
406 });
407 </code>
408 </pre>
409
410 <h3>ui.confirm(msg)</h3>
411 <p>You may omit the title as well, try it <a href="#" id="ui-confirm-2">here</a>. Clicking cancel or close will invoke the callback with false.</p>
412 <pre>
413 <code>
414 ui.confirm('are you sure?')
415 .closable()
416 .show(function(ok){
417 if (ok) ui.dialog('done!').show().hide(1500);
418 else ui.dialog('never-mind').show().hide(1500);
419 });
420 </code>
421 </pre>
422 </section>
423 </section>
d03c420 @tj nesting sections
authored
424
696402b @tj styling lame docs
authored
425 <section>
426 <h2 id="colorpicker-section"><a href="#">ColorPicker</a></h2>
427 <p>A simple, small, elegant color picker component.</p>
d03c420 @tj nesting sections
authored
428
696402b @tj styling lame docs
authored
429 <section>
430 <h3>Example</h3>
431 <p>With default dimensions of 180x180. On change rgb(<em class="r">0</em>,<em class="g">0</em>,<em class="b">0</em>) will update channels individually, or <em class="rgb">rgb(0,0,0)</em> with toString().</p>
d03c420 @tj nesting sections
authored
432
696402b @tj styling lame docs
authored
433 <div id="default-color-picker"></div>
d03c420 @tj nesting sections
authored
434
435 <pre>
436 <code>
696402b @tj styling lame docs
authored
437 var picker = new ui.ColorPicker;
438 picker.el.appendTo('#default-color-picker');
439 picker.on('change', function(color){
440 $('.r').text(color.r)
441 $('.g').text(color.g)
442 $('.b').text(color.b)
443 $('.rgb').text(color.toString()).css('background', color)
444 });
d03c420 @tj nesting sections
authored
445 </code>
446 </pre>
447
696402b @tj styling lame docs
authored
448 <h3>.size(n)</h3>
449 <p>Adjust both width and height.</p>
450
451 <div id="color-picker-size"></div>
452
d03c420 @tj nesting sections
authored
453 <pre>
454 <code>
696402b @tj styling lame docs
authored
455 var picker = new ui.ColorPicker;
456 picker.size(100);
457 picker.el.appendTo('#color-picker-size');
d03c420 @tj nesting sections
authored
458 </code>
459 </pre>
460
696402b @tj styling lame docs
authored
461 <h3>.width(n) / .height(n)</h3>
462 <p>Either the width or height may be adjusted individually.</p>
eceb7fc @tj docs
authored
463
696402b @tj styling lame docs
authored
464 <div id="color-picker-width"></div>
6bc70b4 @tj docs
authored
465
d03c420 @tj nesting sections
authored
466 <pre>
467 <code>
696402b @tj styling lame docs
authored
468 var picker = new ui.ColorPicker;
469 picker.width(80);
470 picker.el.appendTo('#color-picker-width');
d03c420 @tj nesting sections
authored
471 </code>
472 </pre>
473
696402b @tj styling lame docs
authored
474 <h3>ColorPicker in a Dialog</h3>
475 <p>Tight uikit integration means that components can interact, providing you with a simple API, simply add the picker as the message. Click to <a href="#" id="dialog-picker">try</a> it.</p>
d03c420 @tj nesting sections
authored
476
477 <pre>
478 <code>
696402b @tj styling lame docs
authored
479 ui.dialog('Select a color', new ui.ColorPicker)
480 .effect('slide')
d03c420 @tj nesting sections
authored
481 .closable()
696402b @tj styling lame docs
authored
482 .show();
d03c420 @tj nesting sections
authored
483 </code>
484 </pre>
696402b @tj styling lame docs
authored
485 </section>
486
d03c420 @tj nesting sections
authored
487 </section>
6c15acb @tj color-picker docs
authored
488
d03c420 @tj nesting sections
authored
489 <section>
696402b @tj styling lame docs
authored
490 <h2 id="card-section"><a href="#">Card</a></h2>
491 <p>A simple double-sided card component.</p>
c011790 @tj color picker in dialog example
authored
492
696402b @tj styling lame docs
authored
493 <section>
494 <h3>Example</h3>
495 <p>The following example displays a ColorPicker on the back face
496 and a simple paragraph on the front. Any component or jQuery()-able value may be used. You may also programmatically <a href="#" id="flip"> flip</a> the card.</p>
6c15acb @tj color-picker docs
authored
497
696402b @tj styling lame docs
authored
498 <div id="card"></div>
cdd7b4d @tj setting up card example
authored
499
696402b @tj styling lame docs
authored
500 <pre>
501 <code>
502 var picker = new ui.ColorPicker;
503 var card = ui.card('&lt;p&gt;Click to show a color picker&lt;/p&gt;', picker);
504 card.el.appendTo('#card');
505
506 $('#flip').click(function(){
507 card.flip();
508 })
509 </code>
510 </pre>
511 </section>
512 </section>
9c70552 @tj Added notification docs
authored
513
514
515 <section>
696402b @tj styling lame docs
authored
516 <h2 id="notification-section"><a href="#">Notification</a></h2>
517 <p>Unobtrusive growl-style notifications.</p>
9c70552 @tj Added notification docs
authored
518
696402b @tj styling lame docs
authored
519 <section>
520 <h3>Example</h3>
521 <p>Notifications come in three flavours, <code>ui.notify()</code> for general "info" messages, <code>ui.warn()</code> for warnings, and <code>ui.error()</code> for errors. These are identical except for the additional CSS class added to the list element. The notifications API is much like Dialog, titles are optional, and you can do things like <code>.hide()</code> the notification after a given duration defaulting to 4 seconds, they are <code>.closable()</code>, and may also be <code>.sticky()</code>. Click <a href="#" id="notify">here</a> to give it a try!</p>
9c70552 @tj Added notification docs
authored
522
696402b @tj styling lame docs
authored
523 <pre><code>$('#notify').click(function(e){
524 e.preventDefault();
525 ui.notify('Email', 'you have 3 new messages')
9c70552 @tj Added notification docs
authored
526 .effect('slide');
527
528 setTimeout(function(){
696402b @tj styling lame docs
authored
529 ui.warn('Warning', 'something happened')
9c70552 @tj Added notification docs
authored
530 .effect('slide');
531
532 setTimeout(function(){
696402b @tj styling lame docs
authored
533 ui.error('Error', 'something failed')
534 .closable()
535 .hide(8000)
9c70552 @tj Added notification docs
authored
536 .effect('slide');
696402b @tj styling lame docs
authored
537
538 setTimeout(function(){
539 ui.notify('Stick notification')
540 .sticky()
541 .effect('slide');
542 }, 200);
9c70552 @tj Added notification docs
authored
543 }, 200);
544 }, 200);
696402b @tj styling lame docs
authored
545 });</code>
546 </pre>
547 </section>
9c70552 @tj Added notification docs
authored
548 </section>
6ac0ddc @tj docs for ContextMenu
authored
549
550 <section>
a7fb1b4 @tj fixed Menu docs
authored
551 <h2 id="menu-section"><a href="#">Menu</a></h2>
552 <p>Simple menu component.</p>
696402b @tj styling lame docs
authored
553
554 <section>
555 <h3>Example</h3>
a7fb1b4 @tj fixed Menu docs
authored
556 <p>A <code>Menu</code> is comprised of textual menu items and optional arbitrary callback functions. To add an item invoke <code>Menu#add()</code>, and to remove pass the same text to <code>Menu#remove()</code>. Give it a try! right click on this page.</p>
696402b @tj styling lame docs
authored
557
558 <pre><code>var menu = ui.menu()
ac7a56e @tj Added optional callback support to Menu items
authored
559 .add('Add item')
d506b24 @tj Changed `ContextMenu` to `Menu`
authored
560 .add('Edit item', function(){ console.log('edit'); })
561 .add('Remove item', function(){ console.log('remove'); })
562 .add('Remove "Add item"', function(){
563 menu
564 .remove('Add item')
565 .remove('Remove "Add item"');
566 });
567
ac7a56e @tj Added optional callback support to Menu items
authored
568 menu.on('Add item', function(){
569 console.log('item added');
570 });
571
d506b24 @tj Changed `ContextMenu` to `Menu`
authored
572 oncontextmenu = function(e){
573 e.preventDefault();
574 menu.moveTo(e.pageX, e.pageY).show();
575 };</code>
696402b @tj styling lame docs
authored
576 </pre>
577 </section>
6ac0ddc @tj docs for ContextMenu
authored
578 </section>
ab1e8d3 @tj Added quick docs
authored
579
580 <section>
581 <h2 id="split-button-section"><a href="#">SplitButton</a></h2>
582 <p>The split button component </p>
583
584 <section>
585 <h3>Example</h3>
75e6cf9 @tj docs
authored
586 <p>The <code>SplitButton</code> component emits three events, "click" when the button itself is clicked, "show" and "hide" for when the contents display is toggled. This component is abstract, it is not bound to a <code>Menu</code> or <code>ColorPicker</code> etc. One should inherit from this component to display content.</p>
ab1e8d3 @tj Added quick docs
authored
587
588 <script>
589 $(function(){
590 var button = new ui.SplitButton('Action');
591
592 button.on('click', function(){
593 ui.notify('Button clicked');
594 });
595
596 button.on('show', function(){
597 ui.notify('Show dropdown');
598 });
599
600 button.on('hide', function(){
601 ui.notify('Hide dropdown');
602 });
603
604 button.el.appendTo('.example-split-button');
605 })
606 </script>
607 <p class="example-split-button"></p>
608
609 <pre><code>var button = new ui.SplitButton('Action');
610
611 button.on('click', function(){
612 ui.notify('Button clicked');
613 });
614
615 button.on('show', function(){
616 ui.notify('Show dropdown');
617 });
618
619 button.on('hide', function(){
620 ui.notify('Hide dropdown');
621 });
622
623 button.el.appendTo('.example-split-button');</code>
624 </pre>
625 </section>
626 </section>
696402b @tj styling lame docs
authored
627 </div>
afadbfa @tj Initial commit
authored
628 </body>
629 </html>
Something went wrong with that request. Please try again.