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 >
2013-12-02 18:36:12 +00:00
< link rel = "stylesheet" href = "../../themes/base/all.css" >
2014-06-10 11:55:45 +00:00
< script src = "../../external/jquery/jquery.js" > < / script >
2013-12-02 18:36:12 +00:00
< script src = "../../ui/core.js" > < / script >
< script src = "../../ui/widget.js" > < / script >
< script src = "../../ui/position.js" > < / script >
< script src = "../../ui/menu.js" > < / script >
< script src = "../../ui/selectmenu.js" > < / script >
2011-09-01 22:21:09 +00:00
< 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" )
2014-04-08 18:57:43 +00:00
.addClass( "overflow" );
2015-04-08 13:00:16 +00:00
$( "#salutation" ).selectmenu();
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;
}
.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" >
2014-04-08 18:57:43 +00:00
< option > Slower< / option >
< option > Slow< / option >
< option selected = "selected" > Medium< / option >
< option > Fast< / option >
< option > Faster< / option >
2011-09-01 22:21:09 +00:00
< / 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" >
2014-04-08 18:57:43 +00:00
< option > 1< / option >
< option selected = "selected" > 2< / option >
< option > 3< / option >
< option > 4< / option >
< option > 5< / option >
< option > 6< / option >
< option > 7< / option >
< option > 8< / option >
< option > 9< / option >
< option > 10< / option >
< option > 11< / option >
< option > 12< / option >
< option > 13< / option >
< option > 14< / option >
< option > 15< / option >
< option > 16< / option >
< option > 17< / option >
< option > 18< / option >
< option > 19< / option >
2011-09-23 23:59:16 +00:00
< / select >
2015-04-08 13:00:16 +00:00
< label for = "salutation" > Select a title< / label >
< select name = "salutation" id = "salutation" >
< option disabled selected > Please pick one< / option >
< option > Mr.< / option >
< option > Mrs.< / option >
< option > Dr.< / option >
< option > Prof.< / option >
< option > Other< / 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 >
