annotate src/DML/VendorAssetsBundle/Resources/assets/jquery.ui/1.11.0-src/index.html @ 0:493bcb69166c

added public content
author Daniel Wolff
date Tue, 09 Feb 2016 20:54:02 +0100
parents
children
rev   line source
Daniel@0 1 <!doctype html>
Daniel@0 2 <html lang="us">
Daniel@0 3 <head>
Daniel@0 4 <meta charset="utf-8">
Daniel@0 5 <title>jQuery UI Example Page</title>
Daniel@0 6 <link href="jquery-ui.css" rel="stylesheet">
Daniel@0 7 <style>
Daniel@0 8 body{
Daniel@0 9 font: 62.5% "Trebuchet MS", sans-serif;
Daniel@0 10 margin: 50px;
Daniel@0 11 }
Daniel@0 12 .demoHeaders {
Daniel@0 13 margin-top: 2em;
Daniel@0 14 }
Daniel@0 15 #dialog-link {
Daniel@0 16 padding: .4em 1em .4em 20px;
Daniel@0 17 text-decoration: none;
Daniel@0 18 position: relative;
Daniel@0 19 }
Daniel@0 20 #dialog-link span.ui-icon {
Daniel@0 21 margin: 0 5px 0 0;
Daniel@0 22 position: absolute;
Daniel@0 23 left: .2em;
Daniel@0 24 top: 50%;
Daniel@0 25 margin-top: -8px;
Daniel@0 26 }
Daniel@0 27 #icons {
Daniel@0 28 margin: 0;
Daniel@0 29 padding: 0;
Daniel@0 30 }
Daniel@0 31 #icons li {
Daniel@0 32 margin: 2px;
Daniel@0 33 position: relative;
Daniel@0 34 padding: 4px 0;
Daniel@0 35 cursor: pointer;
Daniel@0 36 float: left;
Daniel@0 37 list-style: none;
Daniel@0 38 }
Daniel@0 39 #icons span.ui-icon {
Daniel@0 40 float: left;
Daniel@0 41 margin: 0 4px;
Daniel@0 42 }
Daniel@0 43 .fakewindowcontain .ui-widget-overlay {
Daniel@0 44 position: absolute;
Daniel@0 45 }
Daniel@0 46 select {
Daniel@0 47 width: 200px;
Daniel@0 48 }
Daniel@0 49 </style>
Daniel@0 50 </head>
Daniel@0 51 <body>
Daniel@0 52
Daniel@0 53 <h1>Welcome to jQuery UI!</h1>
Daniel@0 54
Daniel@0 55 <div class="ui-widget">
Daniel@0 56 <p>This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to a version of <a href="jquery.js">jQuery (jquery.js)</a>, your personalized <a href="jquery-ui.js">jQuery UI (jquery-ui.js)</a>, and the entire <a href="jquery-ui.css">jQuery UI CSS Framework (jquery-ui.css)</a>.</p>
Daniel@0 57 <p>You've downloaded components and a theme that are compatible with jQuery 1.6+. Please make sure you are using jQuery 1.6+ in your production environment.</p>
Daniel@0 58 </div>
Daniel@0 59
Daniel@0 60 <h1>YOUR COMPONENTS:</h1>
Daniel@0 61
Daniel@0 62
Daniel@0 63 <!-- Accordion -->
Daniel@0 64 <h2 class="demoHeaders">Accordion</h2>
Daniel@0 65 <div id="accordion">
Daniel@0 66 <h3>First</h3>
Daniel@0 67 <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
Daniel@0 68 <h3>Second</h3>
Daniel@0 69 <div>Phasellus mattis tincidunt nibh.</div>
Daniel@0 70 <h3>Third</h3>
Daniel@0 71 <div>Nam dui erat, auctor a, dignissim quis.</div>
Daniel@0 72 </div>
Daniel@0 73
Daniel@0 74
Daniel@0 75
Daniel@0 76 <!-- Autocomplete -->
Daniel@0 77 <h2 class="demoHeaders">Autocomplete</h2>
Daniel@0 78 <div>
Daniel@0 79 <input id="autocomplete" title="type &quot;a&quot;">
Daniel@0 80 </div>
Daniel@0 81
Daniel@0 82
Daniel@0 83
Daniel@0 84 <!-- Button -->
Daniel@0 85 <h2 class="demoHeaders">Button</h2>
Daniel@0 86 <button id="button">A button element</button>
Daniel@0 87 <form style="margin-top: 1em;">
Daniel@0 88 <div id="radioset">
Daniel@0 89 <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
Daniel@0 90 <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
Daniel@0 91 <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
Daniel@0 92 </div>
Daniel@0 93 </form>
Daniel@0 94
Daniel@0 95
Daniel@0 96
Daniel@0 97 <!-- Tabs -->
Daniel@0 98 <h2 class="demoHeaders">Tabs</h2>
Daniel@0 99 <div id="tabs">
Daniel@0 100 <ul>
Daniel@0 101 <li><a href="#tabs-1">First</a></li>
Daniel@0 102 <li><a href="#tabs-2">Second</a></li>
Daniel@0 103 <li><a href="#tabs-3">Third</a></li>
Daniel@0 104 </ul>
Daniel@0 105 <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
Daniel@0 106 <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
Daniel@0 107 <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
Daniel@0 108 </div>
Daniel@0 109
Daniel@0 110
Daniel@0 111
Daniel@0 112 <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
Daniel@0 113 <h2 class="demoHeaders">Dialog</h2>
Daniel@0 114 <p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
Daniel@0 115
Daniel@0 116 <h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
Daniel@0 117 <div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
Daniel@0 118 <p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
Daniel@0 119
Daniel@0 120 <!-- ui-dialog -->
Daniel@0 121 <div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div></div>
Daniel@0 122 <div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
Daniel@0 123 <div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
Daniel@0 124 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Daniel@0 125 </div>
Daniel@0 126 </div>
Daniel@0 127
Daniel@0 128 </div>
Daniel@0 129
Daniel@0 130 <!-- ui-dialog -->
Daniel@0 131 <div id="dialog" title="Dialog Title">
Daniel@0 132 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Daniel@0 133 </div>
Daniel@0 134
Daniel@0 135
Daniel@0 136
Daniel@0 137 <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
Daniel@0 138 <ul id="icons" class="ui-widget ui-helper-clearfix">
Daniel@0 139 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
Daniel@0 140 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
Daniel@0 141 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
Daniel@0 142 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
Daniel@0 143 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
Daniel@0 144 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
Daniel@0 145 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
Daniel@0 146 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
Daniel@0 147 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
Daniel@0 148 <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
Daniel@0 149 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
Daniel@0 150 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
Daniel@0 151 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
Daniel@0 152 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
Daniel@0 153 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
Daniel@0 154 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
Daniel@0 155 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
Daniel@0 156 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
Daniel@0 157 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
Daniel@0 158 <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
Daniel@0 159 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
Daniel@0 160 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
Daniel@0 161 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
Daniel@0 162 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
Daniel@0 163 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
Daniel@0 164 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
Daniel@0 165 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
Daniel@0 166 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
Daniel@0 167 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
Daniel@0 168 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
Daniel@0 169 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
Daniel@0 170 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
Daniel@0 171 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
Daniel@0 172 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
Daniel@0 173 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
Daniel@0 174 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
Daniel@0 175 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
Daniel@0 176 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
Daniel@0 177 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
Daniel@0 178 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
Daniel@0 179 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
Daniel@0 180 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
Daniel@0 181 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
Daniel@0 182 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
Daniel@0 183 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
Daniel@0 184 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
Daniel@0 185 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
Daniel@0 186 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
Daniel@0 187 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
Daniel@0 188 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
Daniel@0 189 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
Daniel@0 190 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
Daniel@0 191 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
Daniel@0 192 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
Daniel@0 193 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
Daniel@0 194 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
Daniel@0 195 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
Daniel@0 196 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
Daniel@0 197 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
Daniel@0 198 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
Daniel@0 199 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
Daniel@0 200 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
Daniel@0 201 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
Daniel@0 202 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
Daniel@0 203 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
Daniel@0 204 <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
Daniel@0 205 <li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
Daniel@0 206 <li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
Daniel@0 207 <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
Daniel@0 208 <li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
Daniel@0 209 <li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
Daniel@0 210 <li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
Daniel@0 211 <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
Daniel@0 212 <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
Daniel@0 213 <li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
Daniel@0 214 <li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
Daniel@0 215 <li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
Daniel@0 216 <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
Daniel@0 217 <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
Daniel@0 218 <li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
Daniel@0 219 <li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
Daniel@0 220 <li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
Daniel@0 221 <li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
Daniel@0 222 <li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
Daniel@0 223 <li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
Daniel@0 224 <li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
Daniel@0 225 <li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
Daniel@0 226 <li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
Daniel@0 227 <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
Daniel@0 228 <li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
Daniel@0 229 <li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
Daniel@0 230 <li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
Daniel@0 231 <li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
Daniel@0 232 <li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
Daniel@0 233 <li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
Daniel@0 234 <li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
Daniel@0 235 <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
Daniel@0 236 <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
Daniel@0 237 <li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
Daniel@0 238 <li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
Daniel@0 239 <li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
Daniel@0 240 <li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
Daniel@0 241 <li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
Daniel@0 242 <li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
Daniel@0 243 <li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
Daniel@0 244 <li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
Daniel@0 245 <li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
Daniel@0 246 <li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
Daniel@0 247 <li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
Daniel@0 248 <li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
Daniel@0 249 <li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
Daniel@0 250 <li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
Daniel@0 251 <li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
Daniel@0 252 <li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
Daniel@0 253 <li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
Daniel@0 254 <li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
Daniel@0 255 <li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
Daniel@0 256 <li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
Daniel@0 257 <li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
Daniel@0 258 <li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
Daniel@0 259 <li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
Daniel@0 260 <li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
Daniel@0 261 <li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
Daniel@0 262 <li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
Daniel@0 263 <li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
Daniel@0 264 <li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
Daniel@0 265 <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
Daniel@0 266 <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
Daniel@0 267 <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
Daniel@0 268 <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
Daniel@0 269 <li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
Daniel@0 270 <li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
Daniel@0 271 <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
Daniel@0 272 <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
Daniel@0 273 <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
Daniel@0 274 <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
Daniel@0 275 <li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
Daniel@0 276 <li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
Daniel@0 277 <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
Daniel@0 278 <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
Daniel@0 279 <li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
Daniel@0 280 <li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
Daniel@0 281 <li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
Daniel@0 282 <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
Daniel@0 283 <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
Daniel@0 284 <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
Daniel@0 285 <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
Daniel@0 286 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
Daniel@0 287 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
Daniel@0 288 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
Daniel@0 289 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
Daniel@0 290 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
Daniel@0 291 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
Daniel@0 292 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
Daniel@0 293 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
Daniel@0 294 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
Daniel@0 295 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
Daniel@0 296 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
Daniel@0 297 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
Daniel@0 298 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
Daniel@0 299 <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
Daniel@0 300 <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
Daniel@0 301 <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
Daniel@0 302 <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
Daniel@0 303 <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
Daniel@0 304 <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
Daniel@0 305 <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
Daniel@0 306 <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
Daniel@0 307 <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
Daniel@0 308 <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
Daniel@0 309 <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
Daniel@0 310 <li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
Daniel@0 311 <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
Daniel@0 312 </ul>
Daniel@0 313
Daniel@0 314
Daniel@0 315 <!-- Slider -->
Daniel@0 316 <h2 class="demoHeaders">Slider</h2>
Daniel@0 317 <div id="slider"></div>
Daniel@0 318
Daniel@0 319
Daniel@0 320
Daniel@0 321 <!-- Datepicker -->
Daniel@0 322 <h2 class="demoHeaders">Datepicker</h2>
Daniel@0 323 <div id="datepicker"></div>
Daniel@0 324
Daniel@0 325
Daniel@0 326
Daniel@0 327 <!-- Progressbar -->
Daniel@0 328 <h2 class="demoHeaders">Progressbar</h2>
Daniel@0 329 <div id="progressbar"></div>
Daniel@0 330
Daniel@0 331
Daniel@0 332
Daniel@0 333 <!-- Progressbar -->
Daniel@0 334 <h2 class="demoHeaders">Selectmenu</h2>
Daniel@0 335 <select id="selectmenu">
Daniel@0 336 <option>Slower</option>
Daniel@0 337 <option>Slow</option>
Daniel@0 338 <option selected="selected">Medium</option>
Daniel@0 339 <option>Fast</option>
Daniel@0 340 <option>Faster</option>
Daniel@0 341 </select>
Daniel@0 342
Daniel@0 343
Daniel@0 344 <!-- Highlight / Error -->
Daniel@0 345 <h2 class="demoHeaders">Highlight / Error</h2>
Daniel@0 346 <div class="ui-widget">
Daniel@0 347 <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
Daniel@0 348 <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
Daniel@0 349 <strong>Hey!</strong> Sample ui-state-highlight style.</p>
Daniel@0 350 </div>
Daniel@0 351 </div>
Daniel@0 352 <br>
Daniel@0 353 <div class="ui-widget">
Daniel@0 354 <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
Daniel@0 355 <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
Daniel@0 356 <strong>Alert:</strong> Sample ui-state-error style.</p>
Daniel@0 357 </div>
Daniel@0 358 </div>
Daniel@0 359
Daniel@0 360 <script src="external/jquery/jquery.js"></script>
Daniel@0 361 <script src="jquery-ui.js"></script>
Daniel@0 362 <script>
Daniel@0 363
Daniel@0 364 $( "#accordion" ).accordion();
Daniel@0 365
Daniel@0 366
Daniel@0 367
Daniel@0 368 var availableTags = [
Daniel@0 369 "ActionScript",
Daniel@0 370 "AppleScript",
Daniel@0 371 "Asp",
Daniel@0 372 "BASIC",
Daniel@0 373 "C",
Daniel@0 374 "C++",
Daniel@0 375 "Clojure",
Daniel@0 376 "COBOL",
Daniel@0 377 "ColdFusion",
Daniel@0 378 "Erlang",
Daniel@0 379 "Fortran",
Daniel@0 380 "Groovy",
Daniel@0 381 "Haskell",
Daniel@0 382 "Java",
Daniel@0 383 "JavaScript",
Daniel@0 384 "Lisp",
Daniel@0 385 "Perl",
Daniel@0 386 "PHP",
Daniel@0 387 "Python",
Daniel@0 388 "Ruby",
Daniel@0 389 "Scala",
Daniel@0 390 "Scheme"
Daniel@0 391 ];
Daniel@0 392 $( "#autocomplete" ).autocomplete({
Daniel@0 393 source: availableTags
Daniel@0 394 });
Daniel@0 395
Daniel@0 396
Daniel@0 397
Daniel@0 398 $( "#button" ).button();
Daniel@0 399 $( "#radioset" ).buttonset();
Daniel@0 400
Daniel@0 401
Daniel@0 402
Daniel@0 403 $( "#tabs" ).tabs();
Daniel@0 404
Daniel@0 405
Daniel@0 406
Daniel@0 407 $( "#dialog" ).dialog({
Daniel@0 408 autoOpen: false,
Daniel@0 409 width: 400,
Daniel@0 410 buttons: [
Daniel@0 411 {
Daniel@0 412 text: "Ok",
Daniel@0 413 click: function() {
Daniel@0 414 $( this ).dialog( "close" );
Daniel@0 415 }
Daniel@0 416 },
Daniel@0 417 {
Daniel@0 418 text: "Cancel",
Daniel@0 419 click: function() {
Daniel@0 420 $( this ).dialog( "close" );
Daniel@0 421 }
Daniel@0 422 }
Daniel@0 423 ]
Daniel@0 424 });
Daniel@0 425
Daniel@0 426 // Link to open the dialog
Daniel@0 427 $( "#dialog-link" ).click(function( event ) {
Daniel@0 428 $( "#dialog" ).dialog( "open" );
Daniel@0 429 event.preventDefault();
Daniel@0 430 });
Daniel@0 431
Daniel@0 432
Daniel@0 433
Daniel@0 434 $( "#datepicker" ).datepicker({
Daniel@0 435 inline: true
Daniel@0 436 });
Daniel@0 437
Daniel@0 438
Daniel@0 439
Daniel@0 440 $( "#slider" ).slider({
Daniel@0 441 range: true,
Daniel@0 442 values: [ 17, 67 ]
Daniel@0 443 });
Daniel@0 444
Daniel@0 445
Daniel@0 446
Daniel@0 447 $( "#progressbar" ).progressbar({
Daniel@0 448 value: 20
Daniel@0 449 });
Daniel@0 450
Daniel@0 451
Daniel@0 452
Daniel@0 453 $( "#selectmenu" ).selectmenu();
Daniel@0 454
Daniel@0 455
Daniel@0 456 // Hover states on the static widgets
Daniel@0 457 $( "#dialog-link, #icons li" ).hover(
Daniel@0 458 function() {
Daniel@0 459 $( this ).addClass( "ui-state-hover" );
Daniel@0 460 },
Daniel@0 461 function() {
Daniel@0 462 $( this ).removeClass( "ui-state-hover" );
Daniel@0 463 }
Daniel@0 464 );
Daniel@0 465 </script>
Daniel@0 466 </body>
Daniel@0 467 </html>