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实现的UBB编码函数
Mar 09 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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实现根据银行卡号判断银行
2015/04/29 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
php实现小程序支付完整版
2018/10/09 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
vue实现图片上传功能
2020/05/28 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python实现字典嵌套列表取值
2019/12/16 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
详解KMP算法以及python如何实现
2020/09/18 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
教育专业自荐书范文
2013/12/17 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
绿色出行口号
2014/06/18 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2014年项目工作总结
2014/11/24 职场文书
部队个人年终总结
2015/03/02 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
详解python的异常捕获
2022/03/03 Python
Django框架中表单的用法
2022/06/10 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python