jQuery UI API - widgets sélectionnables (sélectionnable Widget)
catégorie
usage
Description: Utilisez la souris pour sélectionner un seul élément ou groupe d'éléments.
Nouvelle Version: 1.0
dépendance:
- core UI (interface utilisateur de base)
- Bibliothèque de composants (Widget Factory)
- interaction souris (Interaction souris)
Remarque: jQuery UI sélectionnable (sélectionnable) plug-in permet glisser la souris pour sélectionner l'élément (parfois appelé un lasso). Vous pouvez maintenir ctrl meta / clé en cliquant ou en faisant glisser pour sélectionner plusieurs éléments (discrets).
Informations complémentaires: Cette partie nécessite une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.
navigation rapide
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 ) {} ); |
Exemples
Choisissez un simple widgets jQuery UI (sélectionnable Widget).
<! DOCTYPE html> <Html lang = "fr"> <Head> <Meta charset = "utf-8"> <Titre> choisir un widget (sélectionnable Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Style> #selectable .ui-sélection { fond: #ccc; } #selectable .ui-sélectionné { background: # 999; } </ Style> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Head> <Body> <Ul id = "sélectionnable"> <Li> Article 1 </ li> <Li> Article 2 </ li> <Li> Article 3 </ li> <Li> Article 4 </ li> <Li> Article 5 </ li> </ Ul> <Script> $ ( "#selectable") .selectable (); </ Script> </ Body> </ Html>