2012-11-12 22:08:38 +00:00
<!doctype html>
2011-09-01 22:21:09 +00:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2013-11-25 13:24:19 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2011-09-01 22:21:09 +00:00
< title > jQuery UI Selectmenu - Default functionality< / title >
< link rel = "stylesheet" href = "../../themes/base/jquery.ui.all.css" >
2013-07-09 21:00:22 +00:00
< script src = "../../jquery-1.10.2.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.menu.js" > < / script >
< script src = "../../ui/jquery.ui.selectmenu.js" > < / script >
< link rel = "stylesheet" href = "../demos.css" >
< script >
$(function() {
2013-04-29 18:22:15 +00:00
$( "#speed" ).selectmenu();
2011-11-24 10:27:35 +00:00
2013-04-29 18:22:15 +00:00
$( "#files" ).selectmenu();
2012-02-21 16:56:04 +00:00
2013-04-29 18:22:15 +00:00
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
2011-09-01 22:21:09 +00:00
});
< / script >
< style >
2013-04-29 18:22:15 +00:00
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
select {
width: 200px;
}
.overflow {
height: 200px;
}
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 = "#" >
2013-04-29 18:22:15 +00:00
2011-09-01 22:21:09 +00:00
< fieldset >
2012-12-09 11:36:35 +00:00
< label for = "speed" > Select a speed< / label >
2011-09-27 19:46:29 +00:00
< 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 >
2013-04-29 18:22:15 +00:00
2012-12-09 11:36:35 +00:00
< label for = "files" > Select a file< / label >
2012-02-21 16:56:04 +00:00
< 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 >
2013-09-29 13:33:14 +00:00
< option value = "someotherfile" > Some other file with a very long option text< / option >
2012-02-21 16:56:04 +00:00
< / optgroup >
< / select >
2013-04-29 18:22:15 +00:00
2012-12-09 11:36:35 +00:00
< label for = "number" > Select a number< / label >
2011-09-27 19:46:29 +00:00
< 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 >
2011-09-01 22:21:09 +00:00
< / fieldset >
2013-11-25 13:24:19 +00:00
2011-09-01 22:21:09 +00:00
< / form >
2013-04-29 18:22:15 +00:00
< / div >
2011-09-01 22:21:09 +00:00
< 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 >
2013-04-29 18:22:15 +00:00
< / div >
2011-09-01 22:21:09 +00:00
< / body >
< / html >
