jQuery UI选择菜单 jQueryUI选择菜单|jQueryUI

本文概述

jQuery UI selectmenu()方法的示例
jQueryUI selectmenu()示例2

jQuery UI Selectmenu用于扩展本机HTML select元素的功能。它提供了行为和外观方面的自定义功能, 远远超出了本机选择的限制。
jQuery UI Selectmenu小部件提供了对select元素的适当替换, 并充当了返回到原始select元素的代理, 从而控制了表单提交或序列化的状态。
jQuery UI selectmenu()方法的示例让我们以一个简单的示例来演示Selectmenu的功能。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < title> jQuery UI Selectmenu - Default functionality< /title> < link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> < script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js"> < /script> < script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js"> < /script> < link rel="stylesheet" href="http://www.srcmini.com/resources/demos/style.css"> < script> $(function() { $( "#speed" ).selectmenu(); $( "#files" ).selectmenu(); $( "#number" ) .selectmenu() .selectmenu( "menuWidget" ) .addClass( "overflow" ); }); < /script> < style> fieldset { border: 0; } label { display: block; margin: 30px 0 0 0; } select { width: 200px; } .overflow { height: 200px; } < /style> < /head> < body> < div class="demo"> < form action="#"> < fieldset> < label for="speed"> Select a speed< /label> < select name="speed" id="speed"> < option> Slower< /option> < option> Slow< /option> < option selected="selected"> Medium< /option> < option> Fast< /option> < option> Faster< /option> < /select> < label for="files"> Select a file< /label> < select name="files" id="files"> < optgroup label="Scripts"> < option value="http://www.srcmini.com/jquery"> jQuery.js< /option> < option value="http://www.srcmini.com/jqueryui"> ui.jQuery.js< /option> < /optgroup> < optgroup label="Other files"> < option value="http://www.srcmini.com/somefile"> Some unknown file< /option> < option value="http://www.srcmini.com/someotherfile"> Some other file with a very long option text< /option> < /optgroup> < /select> < label for="number"> Select a number< /label> < select name="number" id="number"> < 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> < option> 20< /option> < /select> < /fieldset> < /form> < /div> < /body> < /html>

立即测试
以下是可与该方法一起使用的不同选项的列表。

选项	描述
appendTo	它用于附加菜单。其默认值为NULL。
disabled	如果将此选项设置为true, 它将禁用“选择”菜单。其默认值为FALSE。
icons	此选项用于指定按钮。
position	它标识菜单相对于关联的按钮元素的位置。
width	它以像素为单位指定菜单的宽度。其默认值为NULL。

使用指定的禁用选项初始化选择菜单：
让我们以一个示例来演示上面的表选项。以下示例在jQuery UI Selectmenu示例中指定如何使用Disabled选项。

$( ".selector" ).selectmenu({ disabled: true });

有两种方法可以使用选项“禁用”：
1）获取禁用选项：

var disabled = $( ".selector" ).selectmenu( "option", "disabled" );

1）设置禁用选项：

$( ".selector" ).selectmenu( "option", "disabled", true );

jQueryUI selectmenu()示例2在下面的示例中, 我们使用set方法：
让我们以一个示例来演示selectmenu()的用法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < title> jQuery UI Selectmenu - Default functionality< /title> < link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> < script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js"> < /script> < script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js"> < /script> < link rel="stylesheet" href="http://www.srcmini.com/resources/demos/style.css"> < script> $(function() { $( "#speed" ).selectmenu(); $( "#files" ).selectmenu().selectmenu( "option", "disabled", true ); ; $( "#number" ) .selectmenu() .selectmenu( "menuWidget" ) .addClass( "overflow" ); }); < /script> < style> fieldset { border: 0; } label { display: block; margin: 30px 0 0 0; } select { width: 200px; } .overflow { height: 200px; } < /style> < /head> < body> < div class="demo"> < form action="#"> < fieldset> < label for="speed"> Select a speed< /label> < select name="speed" id="speed"> < option> Slower< /option> < option> Slow< /option> < option selected="selected"> Medium< /option> < option> Fast< /option> < option> Faster< /option> < /select> < label for="files"> Select a file< /label> < select name="files" id="files"> < optgroup label="Scripts"> < option value="http://www.srcmini.com/jquery"> jQuery.js< /option> < option value="http://www.srcmini.com/jqueryui"> ui.jQuery.js< /option> < /optgroup> < optgroup label="Other files"> < option value="http://www.srcmini.com/somefile"> Some unknown file< /option> < option value="http://www.srcmini.com/someotherfile"> Some other file with a very long option text< /option> < /optgroup> < /select> < label for="number"> Select a number< /label> < select name="number" id="number"> < 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> < /select> < /fieldset> < /form> < /div> < /body> < /html>

立即测试
【jQuery UI选择菜单】以下是可与此jQueryUI Selectmenu方法一起使用的不同操作（方法）的列表。

行动	描述
close	此方法用于关闭菜单。它不接受任何参数。
destroy	它用于完全删除Selectmenu功能并将元素返回到其初始状态。它不接受任何参数。
disable	它用于禁用选择菜单功能。它不接受任何参数。
enable	它用于启用选择菜单。它不接受任何参数。
instance	此方法检索Selectmenu的实例对象。它不接受任何参数。
menuWidget	它返回包含菜单元素的jQuery对象。它不接受任何参数。
open	用于打开菜单。它不接受任何参数。
option	它获得一个具有键/值对的对象, 该键/值对指定当前的Selectmenu选项哈希。
refresh	它用于解析原始元素并重新呈现菜单。它不接受任何参数。
widget	它返回一个具有button元素的jQuery对象。