自定义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 2012-05-09 10:42 前端组www.qianduanzu.com 阅读(1820) 评论(6) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库