产品展示网站模板下载筛选选功能形网站建设
张小明 2026/1/15 0:02:38
产品展示网站模板下载,筛选选功能形网站建设,图书馆理论与建设网站,网站样例jQuery UI Selectable#xff08;选择#xff09;实例
jQuery UI 的 Selectable 交互允许用户通过鼠标拖拽#xff08;套索 lasso#xff09;或 Ctrl点击来多选列表中的元素#xff0c;常用于文件管理器、图片库、任务列表等多选场景。选中元素会添加 ui-selected 类选择实例jQuery UI 的Selectable交互允许用户通过鼠标拖拽套索 lasso或 Ctrl点击来多选列表中的元素常用于文件管理器、图片库、任务列表等多选场景。选中元素会添加ui-selected类便于自定义样式。推荐查看官方演示https://jqueryui.com/selectable/下面提供几个渐进实例从基础到高级代码使用最新 CDN可直接复制到 HTML 文件测试。1.基础选择示例有序列表用鼠标拖拽框选或 Ctrl点击单个项目。!DOCTYPEhtmlhtmlheadmetacharsetutf-8titlejQuery UI Selectable 基础示例/titlelinkrelstylesheethref//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.cssscriptsrc//code.jquery.com/jquery-3.6.0.min.js/scriptscriptsrc//code.jquery.com/ui/1.13.2/jquery-ui.min.js/scriptstyle#selectable .ui-selecting{background:#FECA40;}#selectable .ui-selected{background:#F39814;color:white;}#selectable{list-style-type:none;margin:0;padding:0;width:300px;}#selectable li{margin:3px;padding:10px;font-size:1.2em;height:30px;}/style/headbodyolidselectableliclassui-widget-content项目 1/liliclassui-widget-content项目 2/liliclassui-widget-content项目 3/liliclassui-widget-content项目 4/liliclassui-widget-content项目 5/liliclassui-widget-content项目 6/li/olscript$(function(){$(#selectable).selectable();});/script/body/html2.网格选择示例图片或方块常用于图片库多选。dividselectable-gridstylewidth:400px;height:300px;background:#eee;padding:10px;divclassitem ui-widget-contentstylewidth:80px;height:80px;float:left;margin:5px;background:#4CAF50;color:white;text-align:center;line-height:80px;1/divdivclassitem ui-widget-contentstylewidth:80px;height:80px;float:left;margin:5px;background:#2196F3;color:white;text-align:center;line-height:80px;2/divdivclassitem ui-widget-contentstylewidth:80px;height:80px;float:left;margin:5px;background:#FF9800;color:white;text-align:center;line-height:80px;3/div!-- 更多项... --/divscript$(#selectable-grid).selectable({filter:.item// 只选择 classitem 的元素});/script3.选项与事件filter、tolerance、selected/stopfilter指定可选择子元素。tolerance: fit只有完全框住才选中。事件获取选中项。p已选中:spanidfeedback无/span/pscript$(#selectable).selectable({tolerance:fit,// 完全框住才选中stop:function(){varresult$(#feedback).empty();$(.ui-selected,this).each(function(){result.append($(this).text() );});}});/script4.取消选择与自定义按 Esc 取消选择或添加cancel选项排除某些元素。script$(#selectable).selectable({cancel:.no-select,// classno-select 的元素不可选selected:function(event,ui){console.log(选中: ui.selected.textContent);},unselected:function(event,ui){console.log(取消选中: ui.unselected.textContent);}});/scriptSelectable 常与 Sortable 结合实现可拖拽排序的多选列表或用于批量操作如删除选中图片。如果你需要显示选中项的完整示例、与按钮结合的批量删除或图片网格示例请提供更多细节