自定义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编辑  收藏  举报