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" >
< script src = "../../jquery-1.6.2.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.css" >
< script >
$(function() {
2011-09-22 22:17:24 +00:00
$('select#speedA').selectmenu({
dropdown: false
});
2011-09-23 23:59:16 +00:00
$('select#speedB').selectmenu({
dropdown: false,
wrapperElement: '< div class = "overflow" / > ',
});
2011-09-22 22:17:24 +00:00
$('select#filesC').selectmenu();
2011-09-01 22:21:09 +00:00
});
< / script >
< style >
form { margin: 200px 0 0 0; }
fieldset { border: 0; }
select { width: 200px; }
2011-09-23 23:59:16 +00:00
.overflow ul { height: 200px; overflow: auto; }
2011-09-01 22:21:09 +00:00
< / style >
< / head >
< body >
< div class = "demo" >
< form action = "#" >
< fieldset >
< label for = "speedA" > Select a Speed:< / label >
< select name = "speedA" id = "speedA" >
< option value = "Slower" > Slower< / option >
< option value = "Slow" selected = "selected" > Slow< / option >
< option value = "Medium" > Medium< / option >
< option value = "Fast" > Fast< / option >
< option value = "Faster" > Faster< / option >
< / select >
< br / >
< br / >
< br / >
2011-09-23 23:59:16 +00:00
< label for = "speedB" > Select a Speed:< / label >
< select name = "speedB" id = "speedB" >
< 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 / >
2011-09-01 22:21:09 +00:00
< label for = "filesC" > Select a file:< / label >
< select name = "filesC" id = "filesC" >
< optgroup label = "scripts" >
< option value = "jquery" > jQuery.js< / option >
< option value = "jqueryui" > ui.jQuery.js< / option >
< / optgroup >
< optgroup label = "Label with space" >
< option value = "somefile" > Some unknown file< / option >
< option value = "someotherfile" > Some other file< / option >
< / optgroup >
< / select >
< / fieldset >
< / form >
< / div > <!-- End demo -->
< div class = "demo-description" >
< p > The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.< / p >
< p > The datasource is a simple JavaScript array, provided to the widget using the source-option.< / p >
< / div > <!-- End demo - description -->
< / body >
< / html >
