Startsida Utforska Hjälp
Logga in
hualimotor
/
eps
2
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Träd: 331bf1fad4
Grenar Taggar
eps
/
lib
/
jquery
/
jquery-ui
/
index.html

index.html 34 KB
Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665 
  1. <!doctype html>
    2. 

  2. <html lang="us">
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <title>jQuery UI Example Page</title>
    6. 

  6.     <link href="jquery-ui.css" rel="stylesheet">
    7. 

  7.     <style>
    8. 

  8.         body {
    9. 

  9.             font: 62.5% "Trebuchet MS", sans-serif;
    10. 

  10.             margin: 50px;
    11. 

  11.         }
    12. 

  12. 

  13.         .demoHeaders {
    14. 

  14.             margin-top: 2em;
    15. 

  15.         }
    16. 

  16. 

  17.         #dialog-link {
    18. 

  18.             padding: .4em 1em .4em 20px;
    19. 

  19.             text-decoration: none;
    20. 

  20.             position: relative;
    21. 

  21.         }
    22. 

  22. 

  23.         #dialog-link span.ui-icon {
    24. 

  24.             margin: 0 5px 0 0;
    25. 

  25.             position: absolute;
    26. 

  26.             left: .2em;
    27. 

  27.             top: 50%;
    28. 

  28.             margin-top: -8px;
    29. 

  29.         }
    30. 

  30. 

  31.         #icons {
    32. 

  32.             margin: 0;
    33. 

  33.             padding: 0;
    34. 

  34.         }
    35. 

  35. 

  36.         #icons li {
    37. 

  37.             margin: 2px;
    38. 

  38.             position: relative;
    39. 

  39.             padding: 4px 0;
    40. 

  40.             cursor: pointer;
    41. 

  41.             float: left;
    42. 

  42.             list-style: none;
    43. 

  43.         }
    44. 

  44. 

  45.         #icons span.ui-icon {
    46. 

  46.             float: left;
    47. 

  47.             margin: 0 4px;
    48. 

  48.         }
    49. 

  49. 

  50.         .fakewindowcontain .ui-widget-overlay {
    51. 

  51.             position: absolute;
    52. 

  52.         }
    53. 

  53. 

  54.         select {
    55. 

  55.             width: 200px;
    56. 

  56.         }
    57. 

  57.     </style>
    58. 

  58. </head>
    59. 

  59. <body>
    60. 

  60. 

  61. <h1>Welcome to jQuery UI!</h1>
    62. 

  62. 

  63. <div class="ui-widget">
    64. 

  64.     <p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using
    65. 

  65.         them with a compatible jQuery version.</p>
    66. 

  66. </div>
    67. 

  67. 

  68. <h1>YOUR COMPONENTS:</h1>
    69. 

  69. 

  70. 

  71. <!-- Accordion -->
    72. 

  72. <h2 class="demoHeaders">Accordion</h2>
    73. 

  73. <div id="accordion">
    74. 

  74.     <h3>First</h3>
    75. 

  75.     <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    76. 

  76.     <h3>Second</h3>
    77. 

  77.     <div>Phasellus mattis tincidunt nibh.</div>
    78. 

  78.     <h3>Third</h3>
    79. 

  79.     <div>Nam dui erat, auctor a, dignissim quis.</div>
    80. 

  80. </div>
    81. 

  81. 

  82. 

  83. <!-- Autocomplete -->
    84. 

  84. <h2 class="demoHeaders">Autocomplete</h2>
    85. 

  85. <div>
    86. 

  86.     <input id="autocomplete" title="type &quot;a&quot;">
    87. 

  87. </div>
    88. 

  88. 

  89. 

  90. <!-- Button -->
    91. 

  91. <h2 class="demoHeaders">Button</h2>
    92. 

  92. <button id="button">A button element</button>
    93. 

  93. <form style="margin-top: 1em;">
    94. 

  94.     <div id="radioset">
    95. 

  95.         <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    96. 

  96.         <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    97. 

  97.         <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
    98. 

  98.     </div>
    99. 

  99. </form>
    100. 

  100. 

  101. 

  102. <!-- Tabs -->
    103. 

  103. <h2 class="demoHeaders">Tabs</h2>
    104. 

  104. <div id="tabs">
    105. 

  105.     <ul>
    106. 

  106.         <li><a href="#tabs-1">First</a></li>
    107. 

  107.         <li><a href="#tabs-2">Second</a></li>
    108. 

  108.         <li><a href="#tabs-3">Third</a></li>
    109. 

  109.     </ul>
    110. 

  110.     <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
    111. 

  111.         labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    112. 

  112.         aliquip ex ea commodo consequat.
    113. 

  113.     </div>
    114. 

  114.     <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis.
    115. 

  115.         Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
    116. 

  116.     </div>
    117. 

  117.     <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum
    118. 

  118.         eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
    119. 

  119.     </div>
    120. 

  120. </div>
    121. 

  121. 

  122. 

  123. <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
    124. 

  124. <h2 class="demoHeaders">Dialog</h2>
    125. 

  125. <p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open
    126. 

  126.     Dialog</a></p>
    127. 

  127. 

  128. <h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
    129. 

  129. <div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
    130. 

  130.     <p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p>
    131. 

  131.     <p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.
    132. 

  132.         Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi
    133. 

  133.         in orci. </p>
    134. 

  134.     <p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat
    135. 

  135.         cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra
    136. 

  136.         mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p>
    137. 

  137.     <p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.
    138. 

  138.         Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi
    139. 

  139.         in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p>
    140. 

  140.     <p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo
    141. 

  141.         vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam
    142. 

  142.         congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p>
    143. 

  143.     <p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi
    144. 

  144.         in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam
    145. 

  145.         feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae,
    146. 

  146.         pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue
    147. 

  147.         semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
    148. 

  148. 

  149.     <!-- ui-dialog -->
    150. 

  150.     <div class="ui-overlay">
    151. 

  151.         <div class="ui-widget-overlay"></div>
    152. 

  152.         <div class="ui-widget-shadow ui-corner-all"
    153. 

  153.              style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div>
    154. 

  154.     </div>
    155. 

  155.     <div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;"
    156. 

  156.          class="ui-widget ui-widget-content ui-corner-all">
    157. 

  157.         <div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
    158. 

  158.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    159. 

  159.                 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    160. 

  160.                 ex ea commodo consequat.</p>
    161. 

  161.         </div>
    162. 

  162.     </div>
    163. 

  163. 

  164. </div>
    165. 

  165. 

  166. <!-- ui-dialog -->
    167. 

  167. <div id="dialog" title="Dialog Title">
    168. 

  168.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    169. 

  169.         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    170. 

  170.         consequat.</p>
    171. 

  171. </div>
    172. 

  172. 

  173. 

  174. <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
    175. 

  175. <ul id="icons" class="ui-widget ui-helper-clearfix">
    176. 

  176.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span
    177. 

  177.             class="ui-icon ui-icon-carat-1-n"></span></li>
    178. 

  178.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span
    179. 

  179.             class="ui-icon ui-icon-carat-1-ne"></span></li>
    180. 

  180.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span
    181. 

  181.             class="ui-icon ui-icon-carat-1-e"></span></li>
    182. 

  182.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span
    183. 

  183.             class="ui-icon ui-icon-carat-1-se"></span></li>
    184. 

  184.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span
    185. 

  185.             class="ui-icon ui-icon-carat-1-s"></span></li>
    186. 

  186.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span
    187. 

  187.             class="ui-icon ui-icon-carat-1-sw"></span></li>
    188. 

  188.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span
    189. 

  189.             class="ui-icon ui-icon-carat-1-w"></span></li>
    190. 

  190.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span
    191. 

  191.             class="ui-icon ui-icon-carat-1-nw"></span></li>
    192. 

  192.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span
    193. 

  193.             class="ui-icon ui-icon-carat-2-n-s"></span></li>
    194. 

  194.     <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span
    195. 

  195.             class="ui-icon ui-icon-carat-2-e-w"></span></li>
    196. 

  196.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span
    197. 

  197.             class="ui-icon ui-icon-triangle-1-n"></span></li>
    198. 

  198.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span
    199. 

  199.             class="ui-icon ui-icon-triangle-1-ne"></span></li>
    200. 

  200.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span
    201. 

  201.             class="ui-icon ui-icon-triangle-1-e"></span></li>
    202. 

  202.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span
    203. 

  203.             class="ui-icon ui-icon-triangle-1-se"></span></li>
    204. 

  204.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span
    205. 

  205.             class="ui-icon ui-icon-triangle-1-s"></span></li>
    206. 

  206.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span
    207. 

  207.             class="ui-icon ui-icon-triangle-1-sw"></span></li>
    208. 

  208.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span
    209. 

  209.             class="ui-icon ui-icon-triangle-1-w"></span></li>
    210. 

  210.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span
    211. 

  211.             class="ui-icon ui-icon-triangle-1-nw"></span></li>
    212. 

  212.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span
    213. 

  213.             class="ui-icon ui-icon-triangle-2-n-s"></span></li>
    214. 

  214.     <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span
    215. 

  215.             class="ui-icon ui-icon-triangle-2-e-w"></span></li>
    216. 

  216.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span
    217. 

  217.             class="ui-icon ui-icon-arrow-1-n"></span></li>
    218. 

  218.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span
    219. 

  219.             class="ui-icon ui-icon-arrow-1-ne"></span></li>
    220. 

  220.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span
    221. 

  221.             class="ui-icon ui-icon-arrow-1-e"></span></li>
    222. 

  222.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span
    223. 

  223.             class="ui-icon ui-icon-arrow-1-se"></span></li>
    224. 

  224.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span
    225. 

  225.             class="ui-icon ui-icon-arrow-1-s"></span></li>
    226. 

  226.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span
    227. 

  227.             class="ui-icon ui-icon-arrow-1-sw"></span></li>
    228. 

  228.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span
    229. 

  229.             class="ui-icon ui-icon-arrow-1-w"></span></li>
    230. 

  230.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span
    231. 

  231.             class="ui-icon ui-icon-arrow-1-nw"></span></li>
    232. 

  232.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span
    233. 

  233.             class="ui-icon ui-icon-arrow-2-n-s"></span></li>
    234. 

  234.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span
    235. 

  235.             class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
    236. 

  236.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span
    237. 

  237.             class="ui-icon ui-icon-arrow-2-e-w"></span></li>
    238. 

  238.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span
    239. 

  239.             class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
    240. 

  240.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span
    241. 

  241.             class="ui-icon ui-icon-arrowstop-1-n"></span></li>
    242. 

  242.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span
    243. 

  243.             class="ui-icon ui-icon-arrowstop-1-e"></span></li>
    244. 

  244.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span
    245. 

  245.             class="ui-icon ui-icon-arrowstop-1-s"></span></li>
    246. 

  246.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span
    247. 

  247.             class="ui-icon ui-icon-arrowstop-1-w"></span></li>
    248. 

  248.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span
    249. 

  249.             class="ui-icon ui-icon-arrowthick-1-n"></span></li>
    250. 

  250.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span
    251. 

  251.             class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
    252. 

  252.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span
    253. 

  253.             class="ui-icon ui-icon-arrowthick-1-e"></span></li>
    254. 

  254.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span
    255. 

  255.             class="ui-icon ui-icon-arrowthick-1-se"></span></li>
    256. 

  256.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span
    257. 

  257.             class="ui-icon ui-icon-arrowthick-1-s"></span></li>
    258. 

  258.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span
    259. 

  259.             class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
    260. 

  260.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span
    261. 

  261.             class="ui-icon ui-icon-arrowthick-1-w"></span></li>
    262. 

  262.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span
    263. 

  263.             class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
    264. 

  264.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span
    265. 

  265.             class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
    266. 

  266.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span
    267. 

  267.             class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
    268. 

  268.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span
    269. 

  269.             class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
    270. 

  270.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span
    271. 

  271.             class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
    272. 

  272.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span
    273. 

  273.             class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
    274. 

  274.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span
    275. 

  275.             class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
    276. 

  276.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span
    277. 

  277.             class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
    278. 

  278.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span
    279. 

  279.             class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
    280. 

  280.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span
    281. 

  281.             class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
    282. 

  282.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span
    283. 

  283.             class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
    284. 

  284.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span
    285. 

  285.             class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
    286. 

  286.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span
    287. 

  287.             class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
    288. 

  288.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span
    289. 

  289.             class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
    290. 

  290.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span
    291. 

  291.             class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
    292. 

  292.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span
    293. 

  293.             class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
    294. 

  294.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span
    295. 

  295.             class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
    296. 

  296.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span
    297. 

  297.             class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
    298. 

  298.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span
    299. 

  299.             class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
    300. 

  300.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span
    301. 

  301.             class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
    302. 

  302.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span
    303. 

  303.             class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
    304. 

  304.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span>
    305. 

  305.     </li>
    306. 

  306.     <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span
    307. 

  307.             class="ui-icon ui-icon-arrow-4-diag"></span></li>
    308. 

  308.     <li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span>
    309. 

  309.     </li>
    310. 

  310.     <li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
    311. 

  311.     <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span>
    312. 

  312.     </li>
    313. 

  313.     <li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span>
    314. 

  314.     </li>
    315. 

  315.     <li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span
    316. 

  316.             class="ui-icon ui-icon-transfer-e-w"></span></li>
    317. 

  317.     <li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span
    318. 

  318.             class="ui-icon ui-icon-transferthick-e-w"></span></li>
    319. 

  319.     <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span
    320. 

  320.             class="ui-icon ui-icon-folder-collapsed"></span></li>
    321. 

  321.     <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span
    322. 

  322.             class="ui-icon ui-icon-folder-open"></span></li>
    323. 

  323.     <li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span>
    324. 

  324.     </li>
    325. 

  325.     <li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span
    326. 

  326.             class="ui-icon ui-icon-document-b"></span></li>
    327. 

  327.     <li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
    328. 

  328.     <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span
    329. 

  329.             class="ui-icon ui-icon-mail-closed"></span></li>
    330. 

  330.     <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span
    331. 

  331.             class="ui-icon ui-icon-mail-open"></span></li>
    332. 

  332.     <li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span>
    333. 

  333.     </li>
    334. 

  334.     <li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span>
    335. 

  335.     </li>
    336. 

  336.     <li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
    337. 

  337.     <li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
    338. 

  338.     <li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
    339. 

  339.     <li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
    340. 

  340.     <li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span>
    341. 

  341.     </li>
    342. 

  342.     <li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span>
    343. 

  343.     </li>
    344. 

  344.     <li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
    345. 

  345.     <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
    346. 

  346.     <li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
    347. 

  347.     <li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span
    348. 

  348.             class="ui-icon ui-icon-calculator"></span></li>
    349. 

  349.     <li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
    350. 

  350.     <li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
    351. 

  351.     <li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
    352. 

  352.     <li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
    353. 

  353.     <li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span>
    354. 

  354.     </li>
    355. 

  355.     <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
    356. 

  356.     <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span>
    357. 

  357.     </li>
    358. 

  358.     <li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
    359. 

  359.     <li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
    360. 

  360.     <li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
    361. 

  361.     <li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
    362. 

  362.     <li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
    363. 

  363.     <li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
    364. 

  364.     <li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
    365. 

  365.     <li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
    366. 

  366.     <li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span
    367. 

  367.             class="ui-icon ui-icon-plusthick"></span></li>
    368. 

  368.     <li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
    369. 

  369.     <li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span
    370. 

  370.             class="ui-icon ui-icon-minusthick"></span></li>
    371. 

  371.     <li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
    372. 

  372.     <li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span
    373. 

  373.             class="ui-icon ui-icon-closethick"></span></li>
    374. 

  374.     <li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
    375. 

  375.     <li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span
    376. 

  376.             class="ui-icon ui-icon-lightbulb"></span></li>
    377. 

  377.     <li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span>
    378. 

  378.     </li>
    379. 

  379.     <li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span
    380. 

  380.             class="ui-icon ui-icon-clipboard"></span></li>
    381. 

  381.     <li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
    382. 

  382.     <li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span>
    383. 

  383.     </li>
    384. 

  384.     <li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
    385. 

  385.     <li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
    386. 

  386.     <li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
    387. 

  387.     <li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
    388. 

  388.     <li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
    389. 

  389.     <li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
    390. 

  390.     <li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
    391. 

  391.     <li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
    392. 

  392.     <li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
    393. 

  393.     <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span
    394. 

  394.             class="ui-icon ui-icon-radio-off"></span></li>
    395. 

  395.     <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span>
    396. 

  396.     </li>
    397. 

  397.     <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
    398. 

  398.     <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
    399. 

  399.     <li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
    400. 

  400.     <li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
    401. 

  401.     <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span
    402. 

  402.             class="ui-icon ui-icon-seek-next"></span></li>
    403. 

  403.     <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span
    404. 

  404.             class="ui-icon ui-icon-seek-prev"></span></li>
    405. 

  405.     <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span>
    406. 

  406.     </li>
    407. 

  407.     <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span
    408. 

  408.             class="ui-icon ui-icon-seek-first"></span></li>
    409. 

  409.     <li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
    410. 

  410.     <li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
    411. 

  411.     <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span
    412. 

  412.             class="ui-icon ui-icon-volume-off"></span></li>
    413. 

  413.     <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span
    414. 

  414.             class="ui-icon ui-icon-volume-on"></span></li>
    415. 

  415.     <li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
    416. 

  416.     <li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span
    417. 

  417.             class="ui-icon ui-icon-signal-diag"></span></li>
    418. 

  418.     <li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
    419. 

  419.     <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span
    420. 

  420.             class="ui-icon ui-icon-battery-0"></span></li>
    421. 

  421.     <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span
    422. 

  422.             class="ui-icon ui-icon-battery-1"></span></li>
    423. 

  423.     <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span
    424. 

  424.             class="ui-icon ui-icon-battery-2"></span></li>
    425. 

  425.     <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span
    426. 

  426.             class="ui-icon ui-icon-battery-3"></span></li>
    427. 

  427.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span
    428. 

  428.             class="ui-icon ui-icon-circle-plus"></span></li>
    429. 

  429.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span
    430. 

  430.             class="ui-icon ui-icon-circle-minus"></span></li>
    431. 

  431.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span
    432. 

  432.             class="ui-icon ui-icon-circle-close"></span></li>
    433. 

  433.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span
    434. 

  434.             class="ui-icon ui-icon-circle-triangle-e"></span></li>
    435. 

  435.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span
    436. 

  436.             class="ui-icon ui-icon-circle-triangle-s"></span></li>
    437. 

  437.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span
    438. 

  438.             class="ui-icon ui-icon-circle-triangle-w"></span></li>
    439. 

  439.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span
    440. 

  440.             class="ui-icon ui-icon-circle-triangle-n"></span></li>
    441. 

  441.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span
    442. 

  442.             class="ui-icon ui-icon-circle-arrow-e"></span></li>
    443. 

  443.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span
    444. 

  444.             class="ui-icon ui-icon-circle-arrow-s"></span></li>
    445. 

  445.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span
    446. 

  446.             class="ui-icon ui-icon-circle-arrow-w"></span></li>
    447. 

  447.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span
    448. 

  448.             class="ui-icon ui-icon-circle-arrow-n"></span></li>
    449. 

  449.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span
    450. 

  450.             class="ui-icon ui-icon-circle-zoomin"></span></li>
    451. 

  451.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span
    452. 

  452.             class="ui-icon ui-icon-circle-zoomout"></span></li>
    453. 

  453.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span
    454. 

  454.             class="ui-icon ui-icon-circle-check"></span></li>
    455. 

  455.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span
    456. 

  456.             class="ui-icon ui-icon-circlesmall-plus"></span></li>
    457. 

  457.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span
    458. 

  458.             class="ui-icon ui-icon-circlesmall-minus"></span></li>
    459. 

  459.     <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span
    460. 

  460.             class="ui-icon ui-icon-circlesmall-close"></span></li>
    461. 

  461.     <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span
    462. 

  462.             class="ui-icon ui-icon-squaresmall-plus"></span></li>
    463. 

  463.     <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span
    464. 

  464.             class="ui-icon ui-icon-squaresmall-minus"></span></li>
    465. 

  465.     <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span
    466. 

  466.             class="ui-icon ui-icon-squaresmall-close"></span></li>
    467. 

  467.     <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span
    468. 

  468.             class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
    469. 

  469.     <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span
    470. 

  470.             class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
    471. 

  471.     <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span
    472. 

  472.             class="ui-icon ui-icon-grip-solid-vertical"></span></li>
    473. 

  473.     <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span
    474. 

  474.             class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
    475. 

  475.     <li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span
    476. 

  476.             class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
    477. 

  477.     <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span
    478. 

  478.             class="ui-icon ui-icon-grip-diagonal-se"></span></li>
    479. 

  479. </ul>
    480. 

  480. 

  481. 

  482. <!-- Slider -->
    483. 

  483. <h2 class="demoHeaders">Slider</h2>
    484. 

  484. <div id="slider"></div>
    485. 

  485. 

  486. 

  487. <!-- Datepicker -->
    488. 

  488. <h2 class="demoHeaders">Datepicker</h2>
    489. 

  489. <div id="datepicker"></div>
    490. 

  490. 

  491. 

  492. <!-- Progressbar -->
    493. 

  493. <h2 class="demoHeaders">Progressbar</h2>
    494. 

  494. <div id="progressbar"></div>
    495. 

  495. 

  496. 

  497. <!-- Progressbar -->
    498. 

  498. <h2 class="demoHeaders">Selectmenu</h2>
    499. 

  499. <select id="selectmenu">
    500. 

  500.     <option>Slower</option>
    501. 

  501.     <option>Slow</option>
    502. 

  502.     <option selected="selected">Medium</option>
    503. 

  503.     <option>Fast</option>
    504. 

  504.     <option>Faster</option>
    505. 

  505. </select>
    506. 

  506. 

  507. 

  508. <!-- Spinner -->
    509. 

  509. <h2 class="demoHeaders">Spinner</h2>
    510. 

  510. <input id="spinner">
    511. 

  511. 

  512. 

  513. <!-- Menu -->
    514. 

  514. <h2 class="demoHeaders">Menu</h2>
    515. 

  515. <ul style="width:100px;" id="menu">
    516. 

  516.     <li>Item 1</li>
    517. 

  517.     <li>Item 2</li>
    518. 

  518.     <li>Item 3
    519. 

  519.         <ul>
    520. 

  520.             <li>Item 3-1</li>
    521. 

  521.             <li>Item 3-2</li>
    522. 

  522.             <li>Item 3-3</li>
    523. 

  523.             <li>Item 3-4</li>
    524. 

  524.             <li>Item 3-5</li>
    525. 

  525.         </ul>
    526. 

  526.     </li>
    527. 

  527.     <li>Item 4</li>
    528. 

  528.     <li>Item 5</li>
    529. 

  529. </ul>
    530. 

  530. 

  531. 

  532. <!-- Tooltip -->
    533. 

  533. <h2 class="demoHeaders">Tooltip</h2>
    534. 

  534. <p id="tooltip">
    535. 

  535.     <a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
    536. 

  536.     the element with your mouse, the title attribute is displayed in a little box next to the element, just like a
    537. 

  537.     native tooltip.
    538. 

  538. </p>
    539. 

  539. 

  540. 

  541. <!-- Highlight / Error -->
    542. 

  542. <h2 class="demoHeaders">Highlight / Error</h2>
    543. 

  543. <div class="ui-widget">
    544. 

  544.     <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
    545. 

  545.         <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    546. 

  546.             <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    547. 

  547.     </div>
    548. 

  548. </div>
    549. 

  549. <br>
    550. 

  550. <div class="ui-widget">
    551. 

  551.     <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
    552. 

  552.         <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
    553. 

  553.             <strong>Alert:</strong> Sample ui-state-error style.</p>
    554. 

  554.     </div>
    555. 

  555. </div>
    556. 

  556. 

  557. <script src="external/jquery/jquery.js"></script>
    558. 

  558. <script src="jquery-ui.js"></script>
    559. 

  559. <script>
    560. 

  560. 

  561.     $("#accordion").accordion();
    562. 

  562. 

  563. 

  564.     var availableTags = [
    565. 

  565.         "ActionScript",
    566. 

  566.         "AppleScript",
    567. 

  567.         "Asp",
    568. 

  568.         "BASIC",
    569. 

  569.         "C",
    570. 

  570.         "C++",
    571. 

  571.         "Clojure",
    572. 

  572.         "COBOL",
    573. 

  573.         "ColdFusion",
    574. 

  574.         "Erlang",
    575. 

  575.         "Fortran",
    576. 

  576.         "Groovy",
    577. 

  577.         "Haskell",
    578. 

  578.         "Java",
    579. 

  579.         "JavaScript",
    580. 

  580.         "Lisp",
    581. 

  581.         "Perl",
    582. 

  582.         "PHP",
    583. 

  583.         "Python",
    584. 

  584.         "Ruby",
    585. 

  585.         "Scala",
    586. 

  586.         "Scheme"
    587. 

  587.     ];
    588. 

  588.     $("#autocomplete").autocomplete({
    589. 

  589.         source: availableTags
    590. 

  590.     });
    591. 

  591. 

  592. 

  593.     $("#button").button();
    594. 

  594.     $("#radioset").buttonset();
    595. 

  595. 

  596. 

  597.     $("#tabs").tabs();
    598. 

  598. 

  599. 

  600.     $("#dialog").dialog({
    601. 

  601.         autoOpen: false,
    602. 

  602.         width: 400,
    603. 

  603.         buttons: [
    604. 

  604.             {
    605. 

  605.                 text: "Ok",
    606. 

  606.                 click: function () {
    607. 

  607.                     $(this).dialog("close");
    608. 

  608.                 }
    609. 

  609.             },
    610. 

  610.             {
    611. 

  611.                 text: "Cancel",
    612. 

  612.                 click: function () {
    613. 

  613.                     $(this).dialog("close");
    614. 

  614.                 }
    615. 

  615.             }
    616. 

  616.         ]
    617. 

  617.     });
    618. 

  618. 

  619.     // Link to open the dialog
    620. 

  620.     $("#dialog-link").click(function (event) {
    621. 

  621.         $("#dialog").dialog("open");
    622. 

  622.         event.preventDefault();
    623. 

  623.     });
    624. 

  624. 

  625. 

  626.     $("#datepicker").datepicker({
    627. 

  627.         inline: true
    628. 

  628.     });
    629. 

  629. 

  630. 

  631.     $("#slider").slider({
    632. 

  632.         range: true,
    633. 

  633.         values: [17, 67]
    634. 

  634.     });
    635. 

  635. 

  636. 

  637.     $("#progressbar").progressbar({
    638. 

  638.         value: 20
    639. 

  639.     });
    640. 

  640. 

  641. 

  642.     $("#spinner").spinner();
    643. 

  643. 

  644. 

  645.     $("#menu").menu();
    646. 

  646. 

  647. 

  648.     $("#tooltip").tooltip();
    649. 

  649. 

  650. 

  651.     $("#selectmenu").selectmenu();
    652. 

  652. 

  653. 

  654.     // Hover states on the static widgets
    655. 

  655.     $("#dialog-link, #icons li").hover(
    656. 

  656.             function () {
    657. 

  657.                 $(this).addClass("ui-state-hover");
    658. 

  658.             },
    659. 

  659.             function () {
    660. 

  660.                 $(this).removeClass("ui-state-hover");
    661. 

  661.             }
    662. 

  662.     );
    663. 

  663. </script>
    664. 

  664. </body>
    665. 

  665. </html>
    666.