当前位置： 首页 > news >正文

Html jquery下拉select美化插件——selectFilter.js

news 来源：原创 2024/9/27 7:17:39

1. Html jquery下拉select美化插件——selectFilter.js

  jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得开发者能更高效地构建交互式网页。在本案例中，jquery.selectlist.js插件正是基于jQuery构建的，旨在提供一种优雅的方式来增强下拉框的视觉效果。
在这里插入图片描述
  在网页设计中，下拉选择框是常见的用户交互元素，但其默认样式往往较为单调，不能满足现代网页的美观需求。为了解决这个问题，开发者们创建了各种各样的下拉选择框美化插件，其中selectFilter.js便是其中之一。这个插件不仅能够美化下拉选择框，还支持常用的事件处理，提升了用户体验。
  下拉框（Select List）作为常见的交互元素，其外观和用户体验往往直接影响到网站的整体质感。然而，HTML原生的下拉框样式较为单一，难以满足现代网页设计的需求。为此，开发者们通常会借助于jQuery等JavaScript库来实现下拉框的美化和功能增强。本篇将详细介绍一款名为“jquery.selectlist.js”的插件，该插件能够轻松地为下拉框添加各种美观的特效。插件的核心功能在于将传统的HTML <select> 元素转换为具有自定义样式的可交互控件。它提供了丰富的定制选项，包括但不限于字体、颜色、背景、边框等，使得下拉框不仅在视觉上更加吸引人，同时也能更好地融入到网页的整体设计中。
  jquery.selectlist.js插件为开发者提供了一种简单且强大的方式来美化和优化网页中的下拉框元素。通过深入理解插件的工作原理和使用方法，我们可以将其灵活运用到实际项目中，提升网站的交互性和美观度。而对于有编程基础的开发者来说，进一步对插件源码进行二次开发，可以创造出更多个性化的下拉框特效，满足更复杂的需求。

1.1. 流程

  在实际应用中，jquery.selectlist.js插件的使用流程通常是这样的：
（1）确保在页面中引入了jQuery库和jquery.selectlist.js插件文件。根据提供的压缩包文件名，我们可以看到有三个主要文件：index.html、css和js。其中，index.html是示例页面，css目录可能包含了插件的样式文件，而js目录则包含插件的JavaScript代码。
（2）在HTML中，我们需要一个或多个<select>元素，这些元素将会被插件转换。每个<select>元素可以包含多个<option>，用于展示不同的选择项。
（3）接着，在文档加载完成后，通过调用jQuery的选择器和插件方法，例如$('select').selectlist();，将选中的<select>元素应用插件效果。
（4）如果需要自定义样式或功能，可以通过插件提供的配置选项进行设置。比如，你可以改变默认的下拉箭头图标，调整选中项的高亮样式，甚至添加自定义事件处理函数。
（5） 为了实现更好的用户体验，jquery.selectlist.js插件可能还支持触屏设备的交互，使下拉框在手机或平板电脑上也能流畅操作。

1.2. 主要功能

（1） 样式美化：该插件能够将传统的HTML <select>元素转换为具有现代感和自定义样式的组件。它可以改变下拉箭头的样式，调整选项的文字颜色、背景色等，使得整体风格与网站设计更加协调。
（2） 过滤功能：selectFilter.js提供了搜索过滤功能，允许用户在下拉选项中输入关键词，快速定位到所需选项，大大提高了选择效率。
（3） 事件处理：插件支持多种事件，如change（选中项改变）、focus（获取焦点）、blur（失去焦点）等，开发者可以方便地绑定自定义函数，实现更丰富的交互逻辑。
（4） 可定制性：selectFilter.js允许开发者自定义多项设置，包括但不限于主题颜色、字体大小、搜索框样式等，以适应不同场景的需求。
  在使用selectFilter.js时，我们通常会配合HTML、CSS和JavaScript来完成界面的构建。index.html是主页面文件，包含着<select>元素和其他相关HTML结构；js目录下的文件包含了插件的核心代码，一般会有一个selectFilter.js的主文件，以及可能的其他辅助脚本；css目录则存放了样式表，用于定义美化后的选择框样式；images目录可能包含箭头图标或其他必要的图像资源。
  在实际应用中，我们首先需要在HTML中引入selectFilter.js和相关的CSS文件，然后对需要美化的<select>元素进行初始化。例如：

<link rel="stylesheet" href="css/selectFilter.css">
<script src="js/selectFilter.js"></script>
<script>
$(document).ready(function() {
$('#yourSelect').selectFilter();
});
</script>

  这里，#yourSelect是你要操作的下拉选择框的ID。
  此外，php中文网免费下载站.txt和php中文网下载站.url可能是提供插件下载和相关教程的链接资源，对于学习和使用selectFilter.js有一定的帮助。
  selectFilter.js是一个强大的下拉选择框美化工具，它通过简洁的API和高度的可定制性，让开发者能够轻松地打造出美观且功能齐全的下拉选择框，提升网页的交互体验。在实际开发中，结合jQuery和其他前端技术，我们可以利用selectFilter.js创造出更多富有创新性的交互效果。

1.3. 用法

   在的第一个设置值为空的就可以有空的值选择。
   事件的话 ：$(‘select’).val(‘’); - 直接设置为空
在这里插入图片描述

1.3.1. select

  name 可以按收选择的值【用于表单提交名称自定义】

1.3.2. option

（1）value：传给后台的参数
（2）selected：设置默认选中
（3）disabled ：设置禁止选则

<option value="2023">2023</option>
<option value="2022" selected="selected">2022</option>
<option value="2021" disabled="disabled">2021</option>

1.3.3. 赋值

 $('#year_input_id').val("2023")var yearFilterId = $('#year_filter_id')var year1Html = `<option value="2023">2023</option>`yearFilterId.append(year1Html);var year2Html = `<option value="2022" selected="selected">2022</option>`yearFilterId.append(year2Html);var year3Html = `<option value="2021" disabled="disabled">2021</option>`yearFilterId.append(year3Html);$('#year_select_id').selectFilter({callBack: function (val) {$('#year_input_id').val(val)}});

1.3.4. 回调

//这里是初始化
$('.filter-box').selectFilter({
callBack : function (val){
//返回选择的值
console.log(val+'-是返回的值')
}
});

1.4. selectFilter源码

1.4.1. selectFilter.css

/*** selectFilter  --v1.0***/
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}.filter-disabled {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
}.filter-black {width: 1.2rem;
}.filter-box {position: relative;padding-top: 0.08rem;
}.filter-box select {display: none;
}.filter-text {height: 0.6rem;overflow: hidden;cursor: pointer;border: 1px solid #e6e6e6;display: flex;flex-direction: row;justify-content: center;align-items: center;border-radius: 0.1rem;margin-top: 0.08rem;background-color: #efeff4;
}.filter-text .filter-title {min-width: 1.5rem;max-width: 1.65rem;border: 0;background-color: transparent;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;font-size: 0.26rem;margin-top: 0.2rem;text-align: center;
}.filter-list {display: none;width: 100%;max-height: 40vh;background-color: #fff;font-size: 14px;position: absolute;z-index: 99;border: 1px solid #e6e6e6;overflow: auto;
}.filter-list li.filter-null a {color: #d2d2d2;
}.filter-list li a {display: block;padding: 0 0.05rem;line-height: 0.8rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;font-size: 0.34rem;text-align: center;
}.filter-list li:hover {background-color: #f2f2f2;
}.filter-list li.filter-selected {background-color: #5FB878;
}.filter-list li.filter-selected a {display: block;color: #fff;
}.filter-list li.filter-disabled {background-color: #fff;
}.filter-list li.filter-disabled a {display: block;color: #d2d2d2;
}.filter-list li.filter-disabled:hover a {cursor: not-allowed !important;background-color: #fff;
}.icon-filter-arrow {width: 0.32rem;height: 0.32rem;margin-right: 0.2rem;background-repeat: no-repeat;background-image: url(../../img/icon/icon_arrow_down_x2.png);background-size: 100%;transition: all .2s;
}.filter-list::-webkit-scrollbar {width: 4px;height: 4px;
}.filter-list::-webkit-scrollbar-track {background: #fff
}.filter-list::-webkit-scrollbar-thumb {background: #CBCBCB;
}

1.4.2 .selectFilter.js

/*** options={*  callBack : function (res){}  // 返回选中的值 进行事件操作* }* 也可以放在表单直接获取  select标签的 值**/;jQuery.fn.selectFilter = function (options){var defaults = {callBack : function (res){}};var ops = $.extend({}, defaults, options);var selectList = $(this).find('select option');var that = this;var html = '';// 读取select 标签的值html += '<ul class="filter-list">';$(selectList).each(function (idx, item){var val = $(item).val();var valText = $(item).html();var selected = $(item).attr('selected');var disabled = $(item).attr('disabled');var isSelected = selected ? 'filter-selected' : '';var isDisabled = disabled ? 'filter-disabled' : '';if(selected) {html += '<li class="'+ isSelected +'" data-value="'+val+'"><a title="'+valText+'">'+valText+'</a></li>';//$(that).find('.filter-title').val(valText);}else if (disabled){html += '<li class="'+ isDisabled +'" data-value="'+val+'"><a>'+valText+'</a></li>';}else {html += '<li data-value="'+val+'"><a title="'+valText+'">'+valText+'</a></li>';};});html += '</ul>';$(that).append(html);$(that).find('select').hide();//点击选择$(that).on('click', '.filter-text', function (){$(that).find('.filter-list').slideToggle(100);$(that).find('.filter-list').toggleClass('filter-open');$(that).find('.icon-filter-arrow').toggleClass('filter-show');});//点击选择列表$(that).find('.filter-list li').not('.filter-disabled').on('click', function (){var val = $(this).data('value');var valText =  $(this).find('a').html();//$(that).find('.filter-title').val(valText);$(that).find('.icon-filter-arrow').toggleClass('filter-show');$(this).addClass('filter-selected').siblings().removeClass('filter-selected');$(this).parent().slideToggle(50);for(var i=0; i<selectList.length; i++){var selectVal = selectList.eq(i).val();if(val == selectVal) {$(that).find('select').val(val);};};ops.callBack(val); //返回值});//其他元素被点击则收起选择$(document).on('mousedown', function(e){closeSelect(that, e);});$(document).on('touchstart', function(e){closeSelect(that, e);});function closeSelect(that, e) {var filter = $(that).find('.filter-list'),filterEl = $(that).find('.filter-list')[0];var filterBoxEl = $(that)[0];var target = e.target;if(filterEl !== target && !$.contains(filterEl, target)&& !$.contains(filterBoxEl, target)) {filter.slideUp(50);$(that).find('.filter-list').removeClass('filter-open');$(that).find('.icon-filter-arrow').removeClass('filter-show');};}
};

1.5. 示例代码

1.5.1. index.tml

<!doctype html>
<html>
<head><meta charset="utf-8"><title>下拉列表</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><script type="text/javascript" src="../static/js/init-rem.js"></script><link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/><script type="text/javascript" src="../static/js/mui.min.js"></script><link rel="stylesheet" type="text/css" href="../static/css/mui.loading.css"/><script type="text/javascript" src="../static/js/mui.loading.js"></script><script type="text/javascript" src="../static/js/my-mui-loading.js"></script><link rel="stylesheet" type="text/css" href="../static/css/mobileSelect.css"/><script type="text/javascript" src="../static/js/mobileSelect.min.js"></script><script type="text/javascript" src="../static/js/echarts.min.js"></script><link rel="stylesheet" type="text/css" href="../static/css/selectFilter.css"/><script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script><script type="text/javascript" src="../static/js/selectFilter.js"></script><link rel="stylesheet" type="text/css" href="../static/css/base.css"/><script type="text/javascript" src="../static/helper/net-helper.js"></script><script type="text/javascript" src="../static/helper/init-helper.js"></script><script type="text/javascript" src="../static/constant/sp-constant.js"></script><script type="text/javascript" src="../static/js/vconsole.min.js"></script><script type="text/javascript">//var vc = new VConsole()</script>
</head>
<body>
<!--标题区域-->
<section class="base-title-layout"><div class="base-title-bar"><span class="base-title-back" onclick="history.go(-1)"><img src="../img/icon/icon_back.png"/></span><h1>下拉列表</h1><span class="base-title-back"></span></div>
</section>
<!--内容区域-->
<div class="base-page-layout"><div class="base-select-section"><div><div class="base-select-layout"><div id="year_select_id" class="filter-box"><div class="filter-text"><input id="year_input_id" class="filter-title"type="text" placeholder="年份" readonly/><i class="icon-filter-arrow"></i></div><select id="year_filter_id" name="month_filter_id"></select></div></div></div></div>
</div>
<script type="text/javascript" src="../js/page-select-filter.js"></script>
</body>
</html>

1.3.2. index.js

$(function () {//返回上一页面backPage()listener()initData()
})function initData() {}
function listener() {$('#year_input_id').val("2023")var yearFilterId = $('#year_filter_id')var year1Html = `<option value="2023">2023</option>`yearFilterId.append(year1Html);var year2Html = `<option value="2022" selected="selected">2022</option>`yearFilterId.append(year2Html);var year3Html = `<option value="2021" disabled="disabled">2021</option>`yearFilterId.append(year3Html);$('#year_select_id').selectFilter({callBack: function (val) {$('#year_input_id').val(val)}});
}

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 街头摊贩检测系统源码分享
  • 微信小程序showLoading ,showToast ,hideLoading连续调用出现showLoading 不关闭的情况记录
  • Linux云计算 |【第四阶段】NOSQL-DAY2
  • 了解针对基座大语言模型（类似 ChatGPT 的架构，Decoder-only）的重头预训练和微调训练
  • SpringCloud 2023各依赖版本选择、核心功能与组件、创建项目(注意事项、依赖)
  • Redis一些简单通用命令认识常用数据类型和编码方式认识Redis单线程模型
  • 【Python-GUI图形化界面-PyQt5模块（3）】——Qwidget核心模块
  • Django项目配置日志
  • 【重学 MySQL】四十、SQL 语句执行过程
  • ArrayList源码实现（一）
  • 重头开始嵌入式第四十三天（硬件 ARM架构 汇编语言）
  • 【数据结构】点分治 点分树
  • 基于二分查找的动态规划 leetcode 300.最长递增子序列（续）
  • 即插即用篇 | DenseNet卷土重来! YOLOv8 引入全新密集连接卷积网络 | ECCV 2024
  • 修改系统显示大小修改系统屏幕密度
  • Electron入门介绍
  • GDB 调试 Mysql 实战（三）优先队列排序算法中的行记录长度统计是怎么来的（上）...
  • Javascripit类型转换比较那点事儿，双等号（==）
  • laravel 用artisan创建自己的模板
  • Linux gpio口使用方法
  • node和express搭建代理服务器（源码）
  • Spring Cloud中负载均衡器概览
  • SpringBoot 实战 (三) | 配置文件详解
  • Wamp集成环境 添加PHP的新版本
  • 缓存与缓冲
  • 机器学习 vs. 深度学习
  • 如何在GitHub上创建个人博客
  • 新手搭建网站的主要流程
  • 一、python与pycharm的安装
  • 用 vue 组件自定义 v-model， 实现一个 Tab 组件。
  • 用element的upload组件实现多图片上传和压缩
  • 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes ...
  • ​经​纬​恒​润​二​面​​三​七​互​娱​一​面​​元​象​二​面​
  • # MySQL server 层和存储引擎层是怎么交互数据的？
  • (done) ROC曲线 和 AUC值 分别是什么？
  • （javaweb）Http协议
  • （Pytorch框架）神经网络输出维度调试，做出我们自己的网络来！！（详细教程~）
  • （SERIES12）DM性能优化
  • （不用互三）AI绘画工具应该如何选择
  • （附源码）ssm捐赠救助系统 毕业设计 060945
  • (附源码)计算机毕业设计SSM疫情居家隔离服务系统
  • (解决办法)ASP.NET导出Excel，打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • （力扣）循环队列的实现与详解（C语言）
  • (免费领源码）Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • （三十）Flask之wtforms库【剖析源码上篇】
  • （十三）Flink SQL
  • （四）c52学习之旅-流水LED灯
  • (一)基于IDEA的JAVA基础12
  • (已解决)Bootstrap精美弹出框模态框modal，实现js向modal传递数据
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • （转）Scala的“=”符号简介
  • .bat批处理（五）：遍历指定目录下资源文件并更新
  • .dwp和.webpart的区别
  • .FileZilla的使用和主动模式被动模式介绍
  • .NET CLR基本术语