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 读取和设置文档元素的样式属性
Apr 14 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
JS实现的几个常用算法
Nov 12 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python阶乘求和的代码详解
2020/02/14 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
python类共享变量操作
2020/09/03 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
园林设计师自荐信
2013/11/18 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
农村改厕实施方案
2014/03/22 职场文书
新闻发布会策划方案
2014/06/12 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
安全第一课观后感
2015/06/18 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
教师听课学习心得体会
2016/01/15 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers