JqueryUI - The Selectmenu widgets provides a styleable select element replacement.

SUBMITTED BY: jlolk3r

DATE: Feb. 18, 2016, 1:26 a.m.

FORMAT: HTML

SIZE: 2.5 kB

Raw Download

HITS: 1317

Report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>jQuery UI Selectmenu - Default functionality</title>
  7. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  8. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  9. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  10. <link rel="stylesheet" href="/resources/demos/style.css">
  11. <script>
  12. $(function() {
  13. $( "#speed" ).selectmenu();
  15. $( "#files" ).selectmenu();
  17. $( "#number" )
  18. .selectmenu()
  19. .selectmenu( "menuWidget" )
  20. .addClass( "overflow" );
  21. });
  22. </script>
  23. <style>
  24. fieldset {
  25. border: 0;
  26. }
  27. label {
  28. display: block;
  29. margin: 30px 0 0 0;
  30. }
  31. select {
  32. width: 200px;
  33. }
  34. .overflow {
  35. height: 200px;
  36. }
  37. </style>
  38. </head>
  39. <body>
  41. <div class="demo">
  43. <form action="#">
  45. <fieldset>
  46. <label for="speed">Select a speed</label>
  47. <select name="speed" id="speed">
  48. <option>Slower</option>
  49. <option>Slow</option>
  50. <option selected="selected">Medium</option>
  51. <option>Fast</option>
  52. <option>Faster</option>
  53. </select>
  55. <label for="files">Select a file</label>
  56. <select name="files" id="files">
  57. <optgroup label="Scripts">
  58. <option value="jquery">jQuery.js</option>
  59. <option value="jqueryui">ui.jQuery.js</option>
  60. </optgroup>
  61. <optgroup label="Other files">
  62. <option value="somefile">Some unknown file</option>
  63. <option value="someotherfile">Some other file with a very long option text</option>
  64. </optgroup>
  65. </select>
  67. <label for="number">Select a number</label>
  68. <select name="number" id="number">
  69. <option>1</option>
  70. <option selected="selected">2</option>
  71. <option>3</option>
  72. <option>4</option>
  73. <option>5</option>
  74. <option>6</option>
  75. <option>7</option>
  76. <option>8</option>
  77. <option>9</option>
  78. <option>10</option>
  79. <option>11</option>
  80. <option>12</option>
  81. <option>13</option>
  82. <option>14</option>
  83. <option>15</option>
  84. <option>16</option>
  85. <option>17</option>
  86. <option>18</option>
  87. <option>19</option>
  88. </select>
  89. </fieldset>
  91. </form>
  93. </div>
  96. </body>
  97. </html>
comments powered by Disqus