自定义UI下拉列表Select

上班第一时间就是上来发文章,哈哈~!今天分享一点干货——“自定义UI下拉列表Select”,是项目中用到的公用模块,主要是分享CSS方面及HTML结构方面的东西。JS写的很简单,目地是为了扩展性,方便攻城师们在此基础上做更多的扩展,应用到项目中去。你也可以直接前往DEMO

CSS和HTML就不贴出来了,有点小长。

有必要贴出来的是一个JavaScript常用方法:(依赖jQuery)

复制代码
 1 //点击document隐藏下拉框
 2 $(document).bind('click', function (e){
 3     $(initSelect).each(function(){//遍布下拉框
 4         var $this = $(this);
 5         var tit = $this.find(titCss);
 6         var _isHide = function (target, box, source){//看点击的是否为当前下拉框下的某元素、或事件源,封装成一个函数_isHide
 7             return target.closest(box).length || target.get(0) === source.get(0);
 8         };
 9         var status = _isHide($(e.target), $this, tit);
10         if (!status) $this.removeClass(activeCss); //后处理
11     });
12 });
复制代码

此处所说的常用方法实际是指上述中的 _isHide 方法,整个代码的用处是点击document隐藏下拉框,读者如果是抄代码的肯定行不通,因为你不知道真正值得抄的是哪句。呵呵~见笑了~!

Author:前端组-Tab

posted on   前端组www.qianduanzu.com  阅读(1820)  评论(6编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
< 2012年5月 >
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2
3 4 5 6 7 8 9

统计

点击右上角即可分享
微信分享提示