jQueryのUIのAPI - 選択ウィジェット(選択ウィジェット)
カテゴリ
使用法
説明:要素の単一の要素またはグループを選択するには、マウスを使用します。
新バージョン:1.0
依存性:
注:jQueryのUIの選択(選択可能)プラグインは、要素を選択するためにマウスをドラッグすることができます(時々投げ縄と呼ばれます)。 クリックするか、複数の(個別の)要素を選択するために、ドラッグしながらCtrlキー/メタキーを押したままにすることができます。
追加情報:この部分は、いくつかの機能のCSSを必要とし、それ以外の場合は動作しません。 カスタムテーマを作成する場合は、出発点として、ウィジェット指定されたCSSファイルを使用します。
クイックナビゲーション
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
appendTo | Selector | 选择助手(套索)要被添加到哪一个元素。 代码实例: 初始化带有指定 $( ".selector" ).selectable({ appendTo: "#someElem" }); 在初始化后,获取或设置 // getter var appendTo = $( ".selector" ).selectable( "option", "appendTo" ); // setter $( ".selector" ).selectable( "option", "appendTo", "#someElem" ); |
"body" |
autoRefresh | Boolean | 该选项决定是否在每个选择操作的开始时更新(重新计算)每个选择项的位置和尺寸。如果您有多个项目,您可能要设置该选项为 false,并手动调用 refresh() 方法。代码实例: 初始化带有指定 $( ".selector" ).selectable({ autoRefresh: false }); 在初始化后,获取或设置 // getter var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" ); // setter $( ".selector" ).selectable( "option", "autoRefresh", false ); |
true |
cancel | Selector | 防止从匹配选择器的元素上开始选择。 代码实例: 初始化带有指定 $( ".selector" ).selectable({ cancel: "a,.cancel" }); 在初始化后,获取或设置 // getter var cancel = $( ".selector" ).selectable( "option", "cancel" ); // setter $( ".selector" ).selectable( "option", "cancel", "a,.cancel" ); |
"input, textarea, button, select, option" |
delay | Number | 鼠标按下后直到选择开始的时间,以毫秒计。该选项可以防止点击在某个元素上时不必要的选择。 代码实例: 初始化带有指定 $( ".selector" ).selectable({ delay: 150 }); 在初始化后,获取或设置 // getter var delay = $( ".selector" ).selectable( "option", "delay" ); // setter $( ".selector" ).selectable( "option", "delay", 150 ); |
0 |
disabled | Boolean | 如果设置为 true ,则禁用该 selectable。代码实例: 初始化带有指定 $( ".selector" ).selectable({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).selectable( "option", "disabled" ); // setter $( ".selector" ).selectable( "option", "disabled", true ); |
false |
distance | Number | 鼠标按下后选择开始前必须移动的距离,以像素计。如果指定了该选项,选择只有在鼠标拖拽超出指定距离时才会开始。该选项可以防止点击在某个元素上时不必要的选择。 代码实例: 初始化带有指定 $( ".selector" ).selectable({ distance: 30 }); 在初始化后,获取或设置 // getter var distance = $( ".selector" ).selectable( "option", "distance" ); // setter $( ".selector" ).selectable( "option", "distance", 30 ); |
0 |
filter | Selector | 要制作选择项(可被选择的)的匹配的子元素。 代码实例: 初始化带有指定 $( ".selector" ).selectable({ filter: "li" }); 在初始化后,获取或设置 // getter var filter = $( ".selector" ).selectable( "option", "filter" ); // setter $( ".selector" ).selectable( "option", "filter", "li" ); |
"*" |
tolerance | String | 指定用于测试套索是否选择一个项目的模式。可能的值:
代码实例: 初始化带有指定 $( ".selector" ).selectable({ tolerance: "fit" }); 在初始化后,获取或设置 // getter var tolerance = $( ".selector" ).selectable( "option", "tolerance" ); // setter $( ".selector" ).selectable( "option", "tolerance", "fit" ); |
"touch" |
方法 | 返回 | 描述 |
---|---|---|
destroy() | jQuery (plugin only) | 完全移除 selectable 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: $( ".selector" ).selectable( "destroy" ); |
disable() | jQuery (plugin only) | 禁用 selectable。
代码实例: 调用 disable 方法: $( ".selector" ).selectable( "disable" ); |
enable() | jQuery (plugin only) | 启用 selectable。
代码实例: 调用 enable 方法: $( ".selector" ).selectable( "enable" ); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).selectable( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 selectable 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).selectable( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 selectable 选项的值。
代码实例: 调用该方法: $( ".selector" ).selectable( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 selectable 设置一个或多个选项。
代码实例: 调用该方法: $( ".selector" ).selectable( "option", { disabled: true } ); |
refresh() | jQuery (plugin only) | 更新每个选择项元素的位置和尺寸。当 autoRefresh 选项被设置为 false 时,该方法可用于手动重新计算每个选择项的位置和尺寸。
代码实例: 调用 refresh 方法: $( ".selector" ).selectable( "refresh" ); |
widget() | jQuery | 返回一个包含 selectable 元素的 jQuery 对象。
代码实例: 调用 widget 方法: var widget = $( ".selector" ).selectable( "widget" ); |
事件 | 类型 | 描述 |
---|---|---|
create( event, ui ) | selectablecreate | 当 selectable 被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的 selectable: $( ".selector" ).selectable({ create: function( event, ui ) {} }); 绑定一个事件监听器到 selectablecreate 事件: $( ".selector" ).on( "selectablecreate", function( event, ui ) {} ); |
selected( event, ui ) | selectableselected | 当每个元素被添加选择时,在选择操作结尾触发。
代码实例: 初始化带有指定 selected 回调的 selectable: $( ".selector" ).selectable({ selected: function( event, ui ) {} }); 绑定一个事件监听器到 selectableselected 事件: $( ".selector" ).on( "selectableselected", function( event, ui ) {} ); |
selecting( event, ui ) | selectableselecting | 当每个元素被添加选择时,在选择操作期间触发。
代码实例: 初始化带有指定 selecting 回调的 selectable: $( ".selector" ).selectable({ selecting: function( event, ui ) {} }); 绑定一个事件监听器到 selectableselecting 事件: $( ".selector" ).on( "selectableselecting", function( event, ui ) {} ); |
start( event, ui ) | selectablestart | 在选择操作开头触发。
注意: 代码实例: 初始化带有指定 start 回调的 selectable: $( ".selector" ).selectable({ start: function( event, ui ) {} }); 绑定一个事件监听器到 selectablestart 事件: $( ".selector" ).on( "selectablestart", function( event, ui ) {} ); |
stop( event, ui ) | selectablestop | 在选择操作结尾触发。
注意: 代码实例: 初始化带有指定 stop 回调的 selectable: $( ".selector" ).selectable({ stop: function( event, ui ) {} }); 绑定一个事件监听器到 selectablestop 事件: $( ".selector" ).on( "selectablestop", function( event, ui ) {} ); |
unselected( event, ui ) | selectableunselected | 当每个元素从选择中被移除时,在选择操作结尾触发。
代码实例: 初始化带有指定 unselected 回调的 selectable: $( ".selector" ).selectable({ unselected: function( event, ui ) {} }); 绑定一个事件监听器到 selectableunselected 事件: $( ".selector" ).on( "selectableunselected", function( event, ui ) {} ); |
unselecting( event, ui ) | selectableunselecting | 当每个元素从选择中被移除时,在选择操作期间触发。
代码实例: 初始化带有指定 unselecting 回调的 selectable: $( ".selector" ).selectable({ unselecting: function( event, ui ) {} }); 绑定一个事件监听器到 selectableunselecting 事件: $( ".selector" ).on( "selectableunselecting", function( event, ui ) {} ); |
例
シンプルなjQueryのUIウィジェット(選択ウィジェット)を選択します。
<!DOCTYPE HTML> <HTML LANG = "EN"> <ヘッド> <メタ文字セット= "UTF-8"> <タイトル>ウィジェットを選択します(選択可能なウィジェット)デモ</タイトル> <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <スタイル> #selectable .ui-選択{ 背景:#CCC; } #selectable .ui-選択{ 背景:#999; } </スタイル> <SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト> <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト> </ HEAD> <ボディ> <ULのID = "選択"> <李>項目1 </ LI> <李>項目2ます。</ li> <李>項目3ます。</ li> <李>項目4ます。</ li> <李>項目5ます。</ li> </ UL> <スクリプト> $( "#selectable」).selectable(); </スクリプト> </ BODY> </ HTML>