异常教程

jQuery UI 实例 – 选择（Selectable）（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 前端开发中，用户交互体验是衡量产品成功的关键指标之一。而 jQuery UI 实例 – 选择（Selectable） 正是一个能显著提升用户交互功能的工具。它允许用户通过鼠标或触摸操作，快速选择页面上的多个元素，例如列表项、图片或自定义组件。无论是电商网站的商品筛选、任务管理工具的多选操作，还是日历应用的日期选择，Selectable 都能以简洁的代码实现复杂功能。

本文将从零开始，带领读者逐步掌握 Selectable 的核心原理、配置方法和高级技巧。通过实际案例和代码示例，帮助开发者轻松实现“点击即选”的交互效果，同时深入理解其背后的逻辑与优化思路。

一、环境配置与基本概念

1.1 开发环境准备

要使用 Selectable，需确保以下环境已就绪：

  1. HTML 结构：页面中需要被选择的元素需包裹在 div 或 ul 等容器内，并设置唯一标识符（如 id 或 class）。
  2. jQuery 和 jQuery UI 引入：在 HTML 文件的 <head> 或 <body> 中引入 jQuery 库和 jQuery UI 库。推荐使用 CDN 链接： 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>  
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  3. CSS 样式初始化：为 Selectable 添加基本样式，例如选中时的背景色： 
    .ui-selecting { background: #FECA40; }  /* 正在选择的状态 */  
.ui-selected { background: #F44336; }    /* 已选中的状态 */

1.2 Selectable 的核心概念

  • 可选元素（Selectable Items）：用户可选择的页面元素，通常为 div、li 或 span。
  • 选择模式（Selection Mode）：支持单选或多选，默认为多选。
  • 过滤规则（Filter）：通过 CSS 选择器限定哪些子元素可被选中。
  • 事件触发（Events）：如 selectstart、selecting、selected 等，用于监听选择过程中的操作。

二、基础用法：创建一个可选择列表

2.1 HTML 结构示例

首先创建一个简单的列表：

<div id="selectable-container">  
  <div class="item">Item 1</div>  
  <div class="item">Item 2</div>  
  <div class="item">Item 3</div>  
  <!-- 添加更多条目 -->  
</div>

2.2 初始化 Selectable

通过 jQuery 的 selectable() 方法初始化组件：

$(function() {  
  $("#selectable-container").selectable({  
    filter: "div.item",   // 只允许选择 class 为 item 的子元素  
    selected: function(event, ui) {  
      console.log("已选中元素：", ui.selected);  
    }  
  });  
});

效果说明：

  • 用户点击并拖拽鼠标时，选中的元素会应用 .ui-selected 样式。
  • filter 参数确保只有 div.item 类元素可被选中，避免意外触发其他元素的选择。

三、进阶功能：事件与交互优化

3.1 关键事件详解

Selectable 提供了多个事件，开发者可通过监听这些事件实现复杂逻辑：

事件名称触发时机参数说明
selectstart用户开始选择时无
selecting拖拽过程中持续触发event 和 ui（包含选中区域）
selected元素被选中后被选中的元素对象
unselected元素被取消选中时取消选中的元素对象

示例：实时统计选中数量

$("#selectable-container").selectable({  
  selected: function(event, ui) {  
    const selectedCount = $(".ui-selected", this).length;  
    $("#counter").text(`已选中 ${selectedCount} 项`);  
  }  
});

3.2 自定义选择区域样式

通过 CSS 可完全控制选择框的外观：

#selectable-container .ui-selectable-helper {  
  border: 2px dashed #007bff;  
  opacity: 0.6;  
  background: #ffffff;  
}

效果：拖拽时显示一个半透明的蓝色虚线框，覆盖用户选择的区域。

四、高级技巧：过滤与动态操作

4.1 过滤不可选元素

假设列表中某些元素需要被禁用，可通过 filter 参数结合条件判断：

$("#selectable-container").selectable({  
  filter: "div.item:not(.disabled)", // 排除 class 为 disabled 的元素  
});

配合 HTML 结构：

<div class="item disabled">不可选的条目</div>

4.2 动态修改选中状态

通过 jQuery 方法可手动控制元素的选中状态：

// 程序化选中第一个元素  
$(".item:first").addClass("ui-selected");  

// 取消所有选中项  
$(".ui-selected").removeClass("ui-selected");

五、实战案例：实现“购物车多选”功能

5.1 需求场景

电商页面中，用户需要快速选择多个商品添加到购物车。

5.2 实现步骤

  1. HTML 结构：

    <div id="product-list">  
  <div class="product" data-price="299">商品A</div>  
  <div class="product" data-price="599">商品B</div>  
  <!-- 其他商品 -->  
</div>  
<button id="addToCart">添加选中商品</button>

  2. JavaScript 逻辑：

    $(function() {  
  $("#product-list").selectable();  

  $("#addToCart").click(function() {  
    const selectedProducts = $(".ui-selected", "#product-list");  
    const total = selectedProducts  
      .map(function() { return $(this).data("price"); })  
      .get()  
      .reduce((a, b) => a + b, 0);  

    alert(`成功添加 ${selectedProducts.length} 件商品，总价：${total} 元`);  
  });  
});

  3. 效果：

    • 用户可拖拽选择多个商品。
    • 点击按钮后，系统自动计算选中商品的总价并提示。

六、性能优化与常见问题

6.1 性能优化建议

  • 限制元素数量：若列表包含数千个元素，建议结合虚拟滚动（Virtual Scrolling）技术，避免 Selectable 的性能瓶颈。
  • 避免嵌套选择器：在 filter 参数中使用简单选择器（如 .class），而非复杂的 CSS 选择器链。

6.2 常见问题解答

Q：如何实现“单击选中/取消选中”而非拖拽选择？
A：通过 cancel 参数禁用拖拽，并监听点击事件：

$("#container").selectable({  
  cancel: "div" // 禁用拖拽选择  
});  

$(".item").click(function() {  
  $(this).toggleClass("ui-selected");  
});

Q：如何支持触摸屏设备的选择操作？
A：jQuery UI 默认支持触摸事件，但可通过 distance 参数调整触发灵敏度：

$("#container").selectable({  
  distance: 10 // 触摸滑动至少 10px 才触发选择  
});

结论

通过本文的讲解，开发者已掌握 jQuery UI 实例 – 选择（Selectable） 的核心功能与高级应用。从基础的环境配置到复杂事件的监听，再到实际案例的实现，我们看到 Selectable 能以极简代码实现高效交互。

对于初学者，建议从简单列表开始练习，逐步尝试动态数据绑定和样式优化；中级开发者则可探索与 Ajax、表单提交等场景的结合，例如将选中项的数据发送到后端。

记住，技术的价值在于解决实际问题。无论是电商的批量操作，还是任务管理工具的多选排序，Selectable 都能成为你的得力工具。现在，不妨动手实践，让代码与交互设计碰撞出更多可能性吧！

最新发布

查看更多文章