2011-09-01 22:21:09 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > jQuery UI Selectmenu - Default functionality< / title >
< link rel = "stylesheet" href = "../../themes/base/jquery.ui.all.css" >
2011-11-24 10:27:35 +00:00
< script src = "../../jquery-1.7.1.js" > < / script >
2011-09-01 22:21:09 +00:00
< 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.css" >
< script >
$(function() {
2011-10-27 17:35:56 +00:00
$('select#speed').selectmenu();
2011-11-24 10:27:35 +00:00
2011-09-30 19:51:37 +00:00
var withOverflow = $('select#number').selectmenu({
dropdown: false
2011-09-23 23:59:16 +00:00
});
2011-09-30 19:51:37 +00:00
withOverflow.selectmenu("widget").addClass("overflow");
2011-11-24 10:27:35 +00:00
2011-09-27 19:46:29 +00:00
$('select#files').selectmenu();
2011-11-24 10:27:35 +00:00
2011-09-01 22:21:09 +00:00
});
< / script >
< style >
2011-09-27 19:46:29 +00:00
form { margin: 100px 0 0 0 }
2011-09-01 22:21:09 +00:00
fieldset { border: 0; }
2011-10-04 22:47:38 +00:00
label { display: block; }
2011-09-01 22:21:09 +00:00
select { width: 200px; }
2011-10-17 20:13:36 +00:00
.overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
2011-09-01 22:21:09 +00:00
< / style >
< / head >
< body >
2011-11-24 10:27:35 +00:00
2011-09-01 22:21:09 +00:00
< div class = "demo" >
< form action = "#" >
< fieldset >
2011-09-27 19:46:29 +00:00
< label for = "speed" > Select a speed:< / label >
< select name = "speed" id = "speed" >
2011-09-01 22:21:09 +00:00
< option value = "Slower" > Slower< / option >
2011-09-24 01:08:03 +00:00
< option value = "Slow" > Slow< / option >
2011-09-24 03:29:05 +00:00
< option value = "Medium" selected = "selected" > Medium< / option >
2011-09-01 22:21:09 +00:00
< option value = "Fast" > Fast< / option >
< option value = "Faster" > Faster< / option >
< / select >
< br / >
< br / >
< br / >
2011-09-27 19:46:29 +00:00
< label for = "number" > Select a number:< / label >
< select name = "number" id = "number" >
2011-09-23 23:59:16 +00:00
< 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 >
2011-09-25 23:18:19 +00:00
< option value = "11" > 11< / option >
< option value = "12" > 12< / option >
2011-09-23 23:59:16 +00:00
< 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 / >
2011-09-27 19:46:29 +00:00
< label for = "files" > Select a file:< / label >
< select name = "files" id = "files" >
< optgroup label = "Scripts" >
2011-09-01 22:21:09 +00:00
< option value = "jquery" > jQuery.js< / option >
< option value = "jqueryui" > ui.jQuery.js< / option >
< / optgroup >
2011-09-27 19:46:29 +00:00
< optgroup label = "Other files" >
< option value = "somefile" > Some unknown file< / option >
2011-09-01 22:21:09 +00:00
< option value = "someotherfile" > Some other file< / option >
< / optgroup >
< / select >
< / fieldset >
< / form >
< / div > <!-- End demo -->
< div class = "demo-description" >
2011-09-27 19:46:29 +00:00
< p > The Selectmenu widgets provides a styleable select element replacement. It will act as a proxy back to the original select element, controlling its state for form submission or serialization < / p >
2011-10-03 21:45:32 +00:00
< p > The datasource is a native select element. Supports optgroups.< / p >
2011-09-01 22:21:09 +00:00
< / div > <!-- End demo - description -->
< / body >
< / html >
