jQuery UI selectable()方法(1)

📌 相关文章

📜 jQuery UI selectable()方法(1)

📅 最后修改于: 2023-12-03 14:43:12.219000 🧑 作者: Mango

jQuery UI selectable()方法

jQuery UI是一个流行的JavaScript库，用于创建交互式的Web界面，其中包含了许多组件和效果。其中之一是selectable()方法，它允许您选择元素并将其保存为一个集合。

语法

$(selector).selectable({
    [options]
});

参数

selector：用于选取要选择的元素的jQuery选择器。

options：可选。一个对象，用于配置selectable组件。包含以下选项：

autoRefresh: 是否自动刷新文档（默认为 true）。
cancel: 指定取消选择的元素的选择器。
delay: 指定用户保持鼠标按下状态多久（以毫秒为单位）后才开始选择操作。
disabled: 是否禁用selectable组件。
distance: 用户必须移动鼠标多少像素才能开始选择（默认为 0）。
filter: 指定要选择的元素的选择器
tolerance: 选择区域的容差级别（默认为 "fit"）。可选值为 "fit"、"intersect" 和 "pointer"。

例子

<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Selectable</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<style>
		#selectable {
			list-style-type: none;
			margin: 0;
			padding: 0;
			width: 60%;
		}

		#selectable li {
			display: inline-block;
			margin: 3px;
			padding: 0.4em;
			border: 1px solid #000;
			color: #fff;
			background-color: #777;
			/*background-color: #28a745;
			color: #fff;*/
			cursor: pointer;
		}

		#selectable .ui-selected {
			background-color: #28a745;
			color: #fff;
		}

		#selectable .ui-selecting {
			background: #409EFF;
			color: white;
		}

		#selectable .ui-unselecting {
			background: #1E90FF;
			color: white;
		}
	</style>
</head>
<body>
	<ul id="selectable">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
		<li>Item 5</li>
	</ul>

	<script>
		$(document).ready(function(){
			$( "#selectable" ).selectable({
				filter: "li" // 只能选取 li 元素
			});
		});
	</script>
</body>
</html>

在这个例子中，我们设置了一个包含5个li元素的无序列表。我们将其中的每个元素设置为可选择元素，并且只能选择其中的li元素。我们还在CSS样式中定义了一个ui-selected类，它将被选择的元素涂上绿色。

使用selectable()方法可以为网页添加可选择元素的功能，提高交互性。