自定义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 阅读(1818) 评论(6) 编辑 收藏 举报