Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery UI Selectmenu - Themeswitcher functionality</title>
- <link type="text/css"
- href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.css"
- rel="stylesheet"/>
- <!--
- <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
- -->
- <script src="../../../jquery-1.7.1.js"></script>
- <script src="../../../ui/jquery.ui.core.js"></script>
- <script src="../../../ui/jquery.ui.widget.js"></script>
- <script src="../../../ui/jquery.ui.position.js"></script>
- <script src="../../../ui/jquery.ui.button.js"></script>
- <script src="../../../ui/jquery.ui.menu.js"></script>
- <script src="../../../ui/jquery.ui.selectmenu.js"></script>
- <link rel="stylesheet" href="../../../demos/demos.css">
- <script>
- $(function() {
- $('select#speed').selectmenu();
- var withOverflow = $('select#number').selectmenu({
- dropdown: false
- });
- withOverflow.selectmenu("widget").addClass("overflow");
- $('select#files').selectmenu();
- });
- </script>
- <style>
- form { margin: 100px 0 0 0 }
- fieldset { border: 0; }
- label { display: block; }
- select { width: 200px; }
- .overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
- </style>
- </head>
- <body>
- <div class="demo">
- <form action="#">
- <fieldset>
- <label for="speed">Select a speed:</label>
- <select name="speed" id="speed">
- <option value="Slower">Slower</option>
- <option value="Slow">Slow</option>
- <option value="Medium" selected="selected">Medium</option>
- <option value="Fast">Fast</option>
- <option value="Faster">Faster</option>
- </select>
- <br />
- <br />
- <br />
- <label for="number">Select a number:</label>
- <select name="number" id="number">
- <option value="1">1</option>
- <option value="2" selected="selected">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- <option value="7">7</option>
- <option value="8">8</option>
- <option value="9">9</option>
- <option value="10">10</option>
- <option value="11">11</option>
- <option value="12">12</option>
- <option value="13">13</option>
- <option value="14">14</option>
- <option value="15">15</option>
- <option value="16">16</option>
- <option value="17">17</option>
- <option value="18">18</option>
- <option value="19">19</option>
- </select>
- <br />
- <br />
- <br />
- <label for="files">Select a file:</label>
- <select name="files" id="files">
- <optgroup label="Scripts">
- <option value="jquery">jQuery.js</option>
- <option value="jqueryui">ui.jQuery.js</option>
- </optgroup>
- <optgroup label="Other files">
- <option value="somefile">Some unknown file</option>
- <option value="someotherfile">Some other file</option>
- </optgroup>
- </select>
- </fieldset>
- </form>
- </div><!-- End demo -->
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
- <script>
- $('<div/>').css({
- position: "absolute",
- right: 10,
- top: 10
- }).appendTo(document.body).themeswitcher();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement