PageSourceSearch

https://alloyui.com/examples/

html alloyui.com collected 2026-10-03 23:03:07 UTC 23,906 bytes, 864 lines download raw bytes

1<!doctype html>
2<html>
3<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
4
5  <title>Examples | AlloyUI</title>
6
7  <meta charset="utf-8">
8  <meta name="author" content="Eduardo Lundgren, Nate Cavanaugh">
9  <meta name="description" content="AlloyUI is a framework built on top of YUI3 (JavaScript) that uses Bootstrap (HTML/CSS) to provide a simple API for building high scalable applications.">
10
11  <!-- Facebook Tags -->
12  <meta property="fb:app_id" content="176947299114210">
13  <meta property="og:type" content="website">
14  <meta property="og:url" content="https://alloyui.com">
15  <meta property="og:image" content="https://alloyui.com/website/img/facebook-share.jpg">
16  <meta property="og:title" content="Examples | AlloyUI">
17  <meta property="og:description" content="AlloyUI is a framework built on top of YUI3 (JavaScript) that uses Bootstrap (HTML/CSS) to provide a simple API for building high scalable applications.">
18
19  <!-- Favicon -->
20  <link rel="shortcut icon" type="image/x-icon" href="https://alloyui.com/website/img/favicon.ico">
21
22  <!-- CSS: Alloy Bootstrap -->
23  <link href="https://alloyui.com/alloy-ui/aui-css/css/bootstrap.min.css" rel="stylesheet">
24
25  <!-- CSS: Website style -->
26  <link href="https://alloyui.com/website/css/main.css" rel="stylesheet">
27
28  <!-- Fonts -->
29  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,700" rel="stylesheet">
30
31  <!-- JS -->
32  
32<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
32
33
34</head>
35<body class="yui3-skin-sam">
36  <div id="wrap">
37
38    <a class="github-ribbon" href="https://github.com/liferay/alloy-ui/">
39      <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
40    </a>
41
42    <nav class="navbar navbar-inverse navbar-fixed-top" id="siteNavigation">
43      <div class="alert alert-warning" style="border-radius:0;">
44          ⚠️ <b>AlloyUI</b> is deprecated and only critical patches will be released in the future. <a href="https://liferay.dev/blogs/-/blogs/the-status-and-direction-of-the-frontend-infrastructure-in-liferay-7-dxp" target="_blank" rel="noreferrer noopener">See blog for more</a>
45      </div>
46      <div class="container">
47        <div class="navbar-header">
48          <a class="navbar-brand" href="https://alloyui.com">
49            <img src="https://alloyui.com/website/img/logo.png" alt="AlloyUI Logo" width="149" height="34">
50          </a>
51          <!--
52          <a href="#" id="version">
53            v3.0.x
54            <span class="caret"></span>
55          </a>
56          <ul id="version-dropdown" class="dropdown-menu" role="menu" aria-labelledby="drop">
57            <li><a tabindex="-1" href="/versions/2.5.x">v2.5.x</a></li>
58            <li><a tabindex="-1" href="/versions/2.0.x">v2.0.x</a></li>
59            <li><a tabindex="-1" href="/versions/1.5.x">v1.5.x</a></li>
60            <li><a tabindex="-1" href="/versions/1.0.x">v1.0.x</a></li>
61          </ul>
62          -->
63        </div>
64
65        <ul class="nav navbar-nav navbar-right">
66          <li><a href="https://alloyui.com/examples/">Examples</a></li>
67          <li><a href="https://alloyui.com/tutorials/">Tutorials</a></li>
68          <li><a href="https://alloyui.com/api/" target="_blank">API Docs</a></li>
69          <li><a href="https://alloyui.com/rosetta-stone/" target="_blank">Rosetta Stone</a></li>
70          <li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></li>
71          <li><a href="https://alloyui.com/contributing/">Contributing</a></li>
72          <li><a href="https://alloyui.com/about/">About</a></li>
73        </ul>
74      </div>
75    </nav>
76
77    <div id="content">
78      <div class="banner page-banner">
79  <div class="container">
80    <div class="presentation">
81      <h2>Examples</h2>
82    </div>
83  </div>
84</div>
85
86<div id="page-example">
87  <div class="container">
88
89    <div class="row">
90      <div class="title col-xs-12">
91        <h3>featuring...</h3>
92      </div>
93    </div>
94
95    <div class="row">
96      
97        
98          <div class="col-xs-4 example">
99            <h2><a href="https://alloyui.com/examples/affix/index.html">Affix</a></h2>
100            <a href="https://alloyui.com/examples/affix/index.html">
101              <img src="https://alloyui.com/website/img/example-affix.jpg" alt="Affix" />
102            </a>
103            <p>Enables the creation of fixed navigation bars.</p>
104          </div>
105        
106      
107        
108          <div class="col-xs-4 example">
109            <h2><a href="https://alloyui.com/examples/alert/index.html">Alert</a></h2>
110            <a href="https://alloyui.com/examples/alert/index.html">
111              <img src="https://alloyui.com/website/img/example-alert.jpg" alt="Alert" />
112            </a>
113            <p>Creates a highly visible message to alert the user.</p>
114          </div>
115        
116      
117        
118          <div class="col-xs-4 example">
119            <h2><a href="https://alloyui.com/examples/color-picker/index.html">Color Picker</a></h2>
120            <a href="https://alloyui.com/examples/color-picker/index.html">
121              <img src="https://alloyui.com/website/img/example-color-picker.jpg" alt="Color Picker" />
122            </a>
123            <p>Create a dynamic color picker that allows users to select a specific color in many ways.</p>
124          </div>
125        
126      
127        
128          <div class="col-xs-4 example">
129            <h2><a href="https://alloyui.com/examples/dropdown/index.html">Dropdown</a></h2>
130            <a href="https://alloyui.com/examples/dropdown/index.html">
131              <img src="https://alloyui.com/website/img/example-dropdown.jpg" alt="Dropdown" />
132            </a>
133            <p>Enables the creation of dropdown menus.</p>
134          </div>
135        
136      
137        
138          <div class="col-xs-4 example">
139            <h2><a href="https://alloyui.com/examples/scrollspy/index.html">Scrollspy</a></h2>
140            <a href="https://alloyui.com/examples/scrollspy/index.html">
141              <img src="https://alloyui.com/website/img/example-scrollspy.jpg" alt="Scrollspy" />
142            </a>
143            <p>Allows updating of navigation targets based on scroll position.</p>
144          </div>
145        
146      
147    </div>
148
149    <div class="row">
150      <div class="title col-xs-12">
151        <h3>and more!</h3>
152      </div>
153    </div>
154
155    <div class="row">
156      
157        
158      
159        
160          <div class="col-xs-4 example">
161            <h2><a href="https://alloyui.com/examples/ace-editor/index.html">Ace Editor</a></h2>
162            <a href="https://alloyui.com/examples/ace-editor/index.html">
163              <img src="https://alloyui.com/website/img/example-ace-editor.jpg" alt="Ace Editor" />
164            </a>
165            <p>An embeddable code editor that matches the features of native editors.</p>
166          </div>
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        
284      
285        
286      
287        
288      
289        
290      
291        
292      
293        
294      
295        
296      
297        
298      
299        
300      
301        
302      
303        
304      
305        
306      
307        
308      
309        
310      
311        
312      
313        
314      
315        
316      
317        
318      
319        
320      
321        
322      
323        
324      
325        
326      
327        
328      
329        
330      
331        
332      
333        
334      
335        
336      
337        
338      
339        
340      
341        
342      
343        
344      
345        
346      
347        
348      
349        
350      
351        
352      
353        
354      
355        
356      
357        
358      
359        
360      
361        
362      
363        
364      
365        
366      
367        
368      
369        
370      
371        
372      
373        
374      
375        
376      
377        
378      
379        
380      
381        
382      
383        
384      
385        
386      
387        
388      
389        
390      
391        
392      
393        
394      
395        
396      
397        
398      
399        
400      
401        
402      
403        
404      
405        
406      
407        
408      
409        
410      
411        
412      
413        
414      
415        
416      
417        
418      
419        
420      
421        
422      
423        
424      
425        
426      
427        
428      
429        
430      
431        
432      
433        
434      
435        
436      
437        
438      
439        
440      
441        
442      
443        
444      
445        
446      
447        
448      
449        
450      
451        
452      
453        
454      
455        
456          <div class="col-xs-4 example">
457            <h2><a href="https://alloyui.com/examples/audio/index.html">Audio</a></h2>
458            <a href="https://alloyui.com/examples/audio/index.html">
459              <img src="https://alloyui.com/website/img/example-audio.jpg" alt="Audio" />
460            </a>
461            <p>Creates an interactive audio player in HTML5 with fallback for old browsers.</p>
462          </div>
463        
464      
465        
466          <div class="col-xs-4 example">
467            <h2><a href="https://alloyui.com/examples/button/index.html">Button</a></h2>
468            <a href="https://alloyui.com/examples/button/index.html">
469              <img src="https://alloyui.com/website/img/example-button.jpg" alt="Button" />
470            </a>
471            <p>Enables the creation of rich buttons different from traditional HTML form buttons.</p>
472          </div>
473        
474      
475        
476      
477        
478          <div class="col-xs-4 example">
479            <h2><a href="https://alloyui.com/examples/carousel/index.html">Carousel</a></h2>
480            <a href="https://alloyui.com/examples/carousel/index.html">
481              <img src="https://alloyui.com/website/img/example-carou
481sel.jpg" alt="Carousel" />
482            </a>
483            <p>Provides an interactive way of cycling through elements.</p>
484          </div>
485        
486      
487        
488          <div class="col-xs-4 example">
489            <h2><a href="https://alloyui.com/examples/char-counter/index.html">Char Counter</a></h2>
490            <a href="https://alloyui.com/examples/char-counter/index.html">
491              <img src="https://alloyui.com/website/img/example-char-counter.jpg" alt="Char Counter" />
492            </a>
493            <p>Provides a character counter that limits the amount of text in a field.</p>
494          </div>
495        
496      
497        
498      
499        
500          <div class="col-xs-4 example">
501            <h2><a href="https://alloyui.com/examples/datatable/index.html">Data Table</a></h2>
502            <a href="https://alloyui.com/examples/datatable/index.html">
503              <img src="https://alloyui.com/website/img/example-datatable.jpg" alt="Data Table" />
504            </a>
505            <p>Provides the user with a method of organizing, arranging, and editing tables of information.</p>
506          </div>
507        
508      
509        
510          <div class="col-xs-4 example">
511            <h2><a href="https://alloyui.com/examples/datepicker/index.html">Datepicker</a></h2>
512            <a href="https://alloyui.com/examples/datepicker/index.html">
513              <img src="https://alloyui.com/website/img/example-datepicker.jpg" alt="Datepicker" />
514            </a>
515            <p>Create a dynamic datepicker that allows users to select the date with a calendar.</p>
516          </div>
517        
518      
519        
520          <div class="col-xs-4 example">
521            <h2><a href="https://alloyui.com/examples/diagram-builder/index.html">Diagram Builder</a></h2>
522            <a href="https://alloyui.com/examples/diagram-builder/index.html">
523              <img src="https://alloyui.com/website/img/example-diagram-builder.jpg" alt="Diagram Builder" />
524            </a>
525            <p>Drag and drop diagram elements, create new tasks, draw connectors from node to node.</p>
526          </div>
527        
528      
529        
530      
531        
532          <div class="col-xs-4 example">
533            <h2><a href="https://alloyui.com/examples/form-builder/index.html">Form Builder</a></h2>
534            <a href="https://alloyui.com/examples/form-builder/index.html">
535              <img src="https://alloyui.com/website/img/example-form-builder.jpg" alt="Form Builder" />
536            </a>
537            <p>Provides a graphic user interface method for contructing forms.</p>
538          </div>
539        
540      
541        
542          <div class="col-xs-4 example">
543            <h2><a href="https://alloyui.com/examples/form-validator/index.html">Form Validator</a></h2>
544            <a href="https://alloyui.com/examples/form-validator/index.html">
545              <img src="https://alloyui.com/website/img/example-form-validator.jpg" alt="Form Validator" />
546            </a>
547            <p>Provides a method of ensuring the validity of form entries.</p>
548          </div>
549        
550      
551        
552          <div class="col-xs-4 example">
553            <h2><a href="https://alloyui.com/examples/io/index.html">I/O</a></h2>
554            <a href="https://alloyui.com/examples/io/index.html">
555              <img src="https://alloyui.com/website/img/example-io.jpg" alt="I/O" />
556            </a>
557            <p>Allows you to make asynchronous HTTP (Ajax) requests.</p>
558          </div>
559        
560      
561        
562          <div class="col-xs-4 example">
563            <h2><a href="https://alloyui.com/examples/image-cropper/index.html">Image Cropper</a></h2>
564            <a href="https://alloyui.com/examples/image-cropper/index.html">
565              <img src="https://alloyui.com/website/img/example-image-cropper.jpg" alt="Image Cropper" />
566            </a>
567            <p>Provides a draggable/resizable cropper widget to crop image sizes.</p>
568          </div>
569        
570      
571        
572          <div class="col-xs-4 example">
573            <h2><a href="https://alloyui.com/examples/image-viewer/index.html">Image Viewer</a></h2>
574            <a href="https://alloyui.com/examples/image-viewer/index.html">
575              <img src="https://alloyui.com/website/img/example-image-viewer.jpg" alt="Image Viewer" />
576            </a>
577            <p>Allows users to view and navigate through a collection of images.</p>
578          </div>
579        
580      
581        
582          <div class="col-xs-4 example">
583            <h2><a href="https://alloyui.com/examples/modal/index.html">Modal</a></h2>
584            <a href="https://alloyui.com/examples/modal/index.html">
585              <img src="https://alloyui.com/website/img/example-modal.jpg" alt="Mod
585al" />
586            </a>
587            <p>Provides a resizable, drag and drop window with toolbar functionality.</p>
588          </div>
589        
590      
591        
592          <div class="col-xs-4 example">
593            <h2><a href="https://alloyui.com/examples/node/index.html">Node</a></h2>
594            <a href="https://alloyui.com/examples/node/index.html">
595              <img src="https://alloyui.com/website/img/example-node.jpg" alt="Node" />
596            </a>
597            <p>Allows for interaction with the DOM through a set of utility methods.</p>
598          </div>
599        
600      
601        
602          <div class="col-xs-4 example">
603            <h2><a href="https://alloyui.com/examples/pagination/index.html">Pagination</a></h2>
604            <a href="https://alloyui.com/examples/pagination/index.html">
605              <img src="https://alloyui.com/website/img/example-pagination.jpg" alt="Pagination" />
606            </a>
607            <p>Provides a set of controls to navigate through paged data.</p>
608          </div>
609        
610      
611        
612          <div class="col-xs-4 example">
613            <h2><a href="https://alloyui.com/examples/popover/index.html">Popover</a></h2>
614            <a href="https://alloyui.com/examples/popover/index.html">
615              <img src="https://alloyui.com/website/img/example-popover.jpg" alt="Popover" />
616            </a>
617            <p>Provides a positionable pop up box with toggle capabilities.</p>
618          </div>
619        
620      
621        
622          <div class="col-xs-4 example">
623            <h2><a href="https://alloyui.com/examples/progress-bar/index.html">Progress Bar</a></h2>
624            <a href="https://alloyui.com/examples/progress-bar/index.html">
625              <img src="https://alloyui.com/website/img/example-progress-bar.jpg" alt="Progress Bar" />
626            </a>
627            <p>Allows users to view loading progress in real time.</p>
628          </div>
629        
630      
631        
632          <div class="col-xs-4 example">
633            <h2><a href="https://alloyui.com/examples/rating/index.html">Rating</a></h2>
634            <a href="https://alloyui.com/examples/rating/index.html">
635              <img src="https://alloyui.com/website/img/example-rating.jpg" alt="Rating" />
636            </a>
637            <p>Allows users to set ratings for content.</p>
638          </div>
639        
640      
641        
642          <div class="col-xs-4 example">
643            <h2><a href="https://alloyui.com/examples/scheduler/index.html">Scheduler</a></h2>
644            <a href="https://alloyui.com/examples/scheduler/index.html">
645              <img src="https://alloyui.com/website/img/example-scheduler.jpg" alt="Scheduler" />
646            </a>
647            <p>Allows user to access scheduler widget with built-in calendar.</p>
648          </div>
649        
650      
651        
652      
653        
654          <div class="col-xs-4 example">
655            <h2><a href="https://alloyui.com/examples/sortable-layout/index.html">Sortable Layout</a></h2>
656            <a href="https://alloyui.com/examples/sortable-layout/index.html">
657              <img src="https://alloyui.com/website/img/example-sortable-layout.jpg" alt="Sortable Layout" />
658            </a>
659            <p>Enables a layout with draggable/droppable functionality.</p>
660          </div>
661        
662      
663        
664          <div class="col-xs-4 example">
665            <h2><a href="https://alloyui.com/examples/sortable-list/index.html">Sortable List</a></h2>
666            <a href="https://alloyui.com/examples/sortable-list/index.html">
667              <img src="https://alloyui.com/website/img/example-sortable-list.jpg" alt="Sortable List" />
668            </a>
669            <p>Gives the user the ability to interact with a list element.</p>
670          </div>
671        
672      
673        
674          <div class="col-xs-4 example">
675            <h2><a href="https://alloyui.com/examples/tabview/index.html">Tabview</a></h2>
676            <a href="https://alloyui.com/examples/tabview/index.html">
677              <img src="https://alloyui.com/website/img/example-tabview.jpg" alt="Tabview" />
678            </a>
679            <p>Allows user to swap content between different sections.</p>
680          </div>
681        
682      
683        
684          <div class="col-xs-4 example">
685            <h2><a href="https://alloyui.com/examples/timepicker/index.html">Timepicker</a></h2>
686            <a href="https://alloyui.com/examples/timepicker/index.html">
687              <img src="https://alloyui.com/website/img/example-timepicker.jpg" alt="Timepicker" />
688            </a>
689            <p>Create a dynamic timepicker that allows users to select the time with a popover.</p>
690          </div>
691        
692      
693        
694          <div class="col-xs-4 example">
695            <h2><a href="https://alloyui.com/examples/toggler/index.html">Toggler</a></h2>
696            <a href="https://alloyui.com/examples/toggler/index.html">
697              <img src="https://alloyui.com/website/img/example-toggler.jpg" alt="Toggler" />
698            </a>
699            <p>Allows users to toggle content on and off.</p>
700          </div>
701        
702      
703        
704          <div class="col-xs-4 example">
705            <h2><a href="https://alloyui.com/examples/toolbar/index.html">Toolbar</a></h2>
706            <a href="https://alloyui.com/examples/toolbar/index.html">
707              <img src="https://alloyui.com/website/img/example-toolbar.jpg" alt="Toolbar" />
708            </a>
709            <p>A collection of buttons that offer the ability of managed user interaction states.</p>
710          </div>
711        
712      
713        
714          <div class="col-xs-4 example">
715            <h2><a href="https://alloyui.com/examples/tooltip/index.html">Tooltip</a></h2>
716            <a href="https://alloyui.com/examples/tooltip/index.html">
717              <img src="https://alloyui.com/website/img/example-tooltip.jpg" alt="Tooltip" />
718            </a>
719            <p>Gives users contextual information or content.</p>
720          </div>
721        
722      
723        
724      
725        
726          <div class="col-xs-4 example">
727            <h2><a href="https://alloyui.com/examples/tree/index.html">TreeView</a></h2>
728            <a href="https://alloyui.com/examples/tree/index.html">
729              <img src="https://alloyui.com/website/img/example-tree.jpg" alt="TreeView" />
730            </a>
731            <p>Allows users to view file/folder structure in expandable tree view.</p>
732          </div>
733        
734      
735        
736          <div class="col-xs-4 example">
737            <h2><a href="https://alloyui.com/examples/video/index.html">Video</a></h2>
738            <a href="https://alloyui.com/examples/video/index.html">
739              <img src="https://alloyui.com/website/img/example-video.jpg" alt="Video" />
740            </a>
741            <p>Creates an interactive HTML5 video player with fallback Flash video player.</p>
742          </div>
743        
744      
745        
746          <div class="col-xs-4 example">
747            <h2><a href="https://alloyui.com/examples/viewport/index.html">
747Viewport</a></h2>
748            <a href="https://alloyui.com/examples/viewport/index.html">
749              <img src="https://alloyui.com/website/img/example-viewport.jpg" alt="Viewport" />
750            </a>
751            <p>Provides a cross-browser method of adapting web design to display size.</p>
752          </div>
753        
754      
755        
756      
757        
758      
759        
760      
761        
762      
763        
764      
765        
766      
767        
768      
769        
770      
771        
772      
773        
774      
775        
776      
777        
778      
779        
780      
781        
782      
783        
784      
785        
786      
787        
788      
789        
790      
791        
792      
793        
794      
795        
796      
797        
798      
799        
800      
801        
802      
803        
804      
805        
806      
807        
808      
809        
810      
811        
812      
813        
814      
815        
816      
817        
818      
819        
820      
821        
822      
823        
824      
825        
826      
827    </div>
828
829  </div>
830</div>
831    </div>
832
833    <div id="push"></div>
834
835  </div>
836
837
838  <div class="footer">
839    <div class="container">
840      <p class="col-xs-6">
841        <a href="http://liferay.com/">
842          <img src="https://alloyui.com/website/img/liferay-logo.png" alt="Liferay Logo" id="liferay-logo">
843        </a>
844      </p>
845      <p class="copyright col-xs-6"><a href="https://github.com/liferay/alloy-ui/blob/master/LICENSE.md">BSD</a> License.</p>
846    </div>
847  </div>
848
849  
849<script src="https://alloyui.com/website/js/version-dropdown.js"></script>
849
850
851  
851<script type="text/javascript">
852  var _gaq = _gaq || [];
853  _gaq.push(['_setAccount', 'UA-37033501-1']);
854  _gaq.push(['_trackPageview']);
855
856  (function() {
857    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
858    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
859    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
860  })();
861  </script>
861
862
863</body>
864</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.