js实现select选择框效果及美化


Posted in Javascript onAugust 19, 2016

网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果。所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下:

js实现select选择框效果及美化

点击一个 test ,就会把列表显示出来,再次点击,列表隐藏,选择一个 li ,就会把 span 里的内容替换成 li 的内容,然后可以用 js 监控 span 的变化,然后执行你的代码。效果如下: 

html 代码如下: 

<div id="type" class="test">
 <span>投资种类</span>
 <ul class="dropdown">
 <li>期货</li>
 <li>股票</li>
 <li>期权</li>
 </ul>
</div>
<div id="kind" class="test">
 <span>投资类型</span>   
 <ul class="dropdown">
 <li>趋势</li>
 <li>震荡</li>
 <li>套利</li>
 <li>选股</li>
 <li>择时</li>
 </ul>
</div>

css 代码如下: 

ul li{
 list-style: none;
}
.test {
 position: relative;
 float: left;
 width: 120px;
 height: 40px;
 padding-left: 11px;
 font-size: 15px;
 line-height: 40px;
 cursor: pointer;
 border: 1px solid #d2d2d2;
 border-radius: 3px;
 margin-right: 20px;
 outline: none;
}
.test:before {
 position: absolute;
 right: 13px;
 top: 18px;
 width: 0;
 height: 0;
 content: "";
 border-width: 8px 8px 0 8px;
 border-style: solid;
 border-color: #d36969 transparent;
 -webkit-transition: transform .25s;
 -moz-transition: transform .25s;
 -ms-transition: transform .25s;
  -o-transition: transform .25s;
  transition: transform .25s;
}
.test:after {
 position: absolute;
 right: 15px;
 top: 18px;
 width: 0;
 height: 0;
 content: "";
 border-width: 6px 6px 0 6px;
 border-style: solid;
 border-color: #fff transparent;
 -webkit-transition: all .25s;
 -moz-transition: all .25s;
 -ms-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
}
.test.active:before{
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg); 
}
.test.active:after{
 top: 20px;
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg); 
}
.test .dropdown {
 position: absolute;
 right: 0;
 left: 0;
 display: none;
 padding: 0;
 border-radius: inherit;
 border: 1px solid #d2d2d2;
 box-shadow: 2px 2px 5px rgba(0,0,0,.4);
}
.test.active .dropdown {
 display: block;
}
.test .dropdown:before {
 position: absolute;
 right: 13px;
 bottom: 100%;
 width: 0;
 height: 0;
 content: "";
 border-width: 0 8px 8px 8px;
 border-style: solid;
 border-color: #d2d2d2 transparent;
}
.test .dropdown:after {
 position: absolute;
 right: 15px;
 bottom: 100%;
 width: 0;
 height: 0;
 content: "";
 border-width: 0 6px 6px 6px;
 border-style: solid;
 border-color: #fff transparent;
}
.test .dropdown li {
 float: left;
 width: 129px;
 font-size: 14px;
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
 text-align: center;
}
.test .dropdown li:first-of-type {
 border-radius: 3px 3px 0 0;
}
.test .dropdown li:last-of-type {
 border-radius: 0 0 3px 3px;
}
.test .dropdown li:hover {
 color: #fff;
 background: #c43c3d;
}

对于 :before 和 :after 两个伪元素不理解可以去看看我上篇博客 点击这里

js 代码如下: 

function DropDown(el) {
 this.dd = el;
 this.span = this.dd.children('span');
 this.li = this.dd.find('ul.dropdown li');
 this.val = '';
}
DropDown.prototype.initEvents = function() {
 var obj = this;
 obj.dd.on('click', function(event){
 $(this).toggleClass('active').siblings().removeClass('active');
 event.stopPropagation();
 });
 obj.li.on('click', function() {
 var opt = $(this);
 obj.val = opt.html();
 if (obj.span.html() == obj.val) return;   
 obj.span.html(obj.val);
 $(document).click(function() {
  $('.test').removeClass('active');
 });
 })
}
var test1 = new DropDown($('#type'));
var test2 = new DropDown($('#kind'));
test1.initEvents();
test2.initEvents()

这里使用构造-原型组合模式来创建了一个 DropDown 对象,构造-原型组合模式解释:属性写在构造函数中,是表示每个实例独有的属性,让对象具体化;方法写在构造函数外,是为了表示每个实例共享的方法。 

但是这里有点不好的方法是,已限制了 html 的布局。

精彩专题分享:javascript选择框操作汇总    jquery选择框操作汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
原生js实现选项卡功能
Mar 08 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
JavaScript面向对象编写购物车功能
Aug 19 #Javascript
javascript设计模式之module(模块)模式
Aug 19 #Javascript
JS实现六位字符密码输入器功能
Aug 19 #Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 #Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 #Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 #Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 #Javascript
You might like
PHP图片上传类带图片显示
2006/11/25 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
JS实现多选框的操作
2020/06/24 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python中Mako库实例用法
2020/12/31 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
高中体育教学反思
2014/01/24 职场文书
2014年新生军训方案
2014/05/01 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL