原生js实现下拉框功能(支持键盘事件)


Posted in Javascript onJanuary 13, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>倒计时-多种格式调用-原生js封装</title>
 <link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
 <link rel="icon" href="../public/image/favicon.png" type="images/png"/>
 <link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
 <link rel="stylesheet" type="text/css" href="../public/style/common.css">
 <style type="text/css">
 /*公共*/
 html{
 height:100%;
 }
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
 margin: 0;
 padding: 0
 }
 ol, ul {
 list-style: none
 }
 body{
 position: relative;
 min-height:100%;
 font-size:14px;
 font-family: Tahoma, Verdana,"Microsoft Yahei";
 color:#333;
 }
 a{
 text-decoration: none;
 color:#333;
 }
 .header{
 width: 960px;
 padding-top: 15px;
 margin: 0 auto;
 line-height: 30px;
 text-align: right;
 }
 .header a{
 margin: 0 5px;
 }
 .main{
 width:960px;
 margin: 50px auto 0;
 }
 .code{
 border:1px dashed #e2e2e2;
 padding:10px 5px;
 margin-bottom:25px;
 }
 pre {
 font-family: "Microsoft Yahei",Arial,Helvetica;
 white-space: pre-wrap; /*css-3*/ 
 white-space: -moz-pre-wrap; /*Mozilla,since1999*/ 
 white-space: -pre-wrap; /*Opera4-6*/ 
 white-space: -o-pre-wrap; /*Opera7*/ 
 word-wrap: break-word; /*InternetExplorer5.5+*/
 }
 .example{
 padding-top:40px;
 margin-bottom:90px;
 }
 .example .call{
 padding:18px 5px;
 background:#f0f5f8;
 }
 .example h2{
 padding-top:20px;
 margin-bottom:7px;
 }
 .example table {
 width:100%;
 table-layout:fixed;
 border-collapse: collapse;
 border-spacing: 0;
 border: 1px solid #cee1ee;
 border-left: 0;
 }
 .example thead {
 border-bottom: 1px solid #cee1ee;
 background-color: #e3eef8;
 }
 .example tr {
 line-height: 24px;
 font-size: 13px;
 }
 .example tr:nth-child(2n) {
 background-color: #f0f5f8;
 }
 .example tr th,.example tr td {
 border-left: 1px solid #cee1ee;
 word-break: break-all;
 word-wrap: break-word;
 padding:0 10px;
 font-weight: normal;
 }
 .example tr th {
 color: #555;
 padding-top: 2px;
 padding-bottom: 2px;
 text-align: left;
 }
 /*公共*/
 .select-container {
 width: 186px;
 margin: 80px 0;
 position: relative;
 z-index: 10000;
 }
 .select-container .select-pose {
 width: 150px;
 height: 24px;
 line-height: 24px;
 display: block;
 color: #807a62;
 cursor: pointer;
 font-style: normal;
 padding-left: 4px;
 padding-right: 30px;
 border: 1px solid #333333; /* background: url(xjt.png) no-repeat right center; */
 }
 .select-pose:before {
 content: '';
 position: absolute;
 right: 7px;
 bottom: 7px;
 width: 0;
 height: 0;
 border-width: 4px;
 border-style: solid;
 border-color: #888 transparent transparent transparent;
 transition: all 0.2s;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -o-transition: all 0.2s;
 -ms-transition: all 0.2s;
 transform-origin: 50% 25%;
 -ms-transform-origin: 50% 25%;
 -moz-transform-origin: 50% 25%;
 -webkit-transform-origin: 50% 25%;
 -o-transform-origin: 50% 25%;
 }
 .extended.select-pose:before {
 transform: rotate(180deg);
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 }
 .select-container .select-content {
 width: 184px;
 border: 1px solid #333333;
 background-color: #ffffff;
 position: absolute;
 z-index: 20000;
 margin-top: -1px;
 display: none;
 overflow: hidden;
 }
 .select-list{
 cursor: pointer;
 height: 24px;
 line-height: 24px;
 padding-left: 10px;
 }
 </style>
 <script type="text/javascript">
 /*封装代码*/
 (function() {
 var Select = function(el, opts) {
 var self = this;
 var defaults = {
 before: '#fff',
 after:'#ccc'
 }
 opts = opts || {};
 for (var w in defaults) {
 if ("undefined" == typeof opts[w]) {
 opts[w] = defaults[w];
 }
 }
 this.params = opts;
 this.container = r(el);

 if (this.container.length > 1) {
 var x = [];
 return this.container.each(function() {
 x.push(new Select(this, opts))
 }), x
 }
 this.containers=this.container[0];
 this.pose=this.container.find(".select-pose")[0];
 this.content=this.container.find(".select-content")[0];
 this.list=this.container.find(".select-list");
 this.index=-1;
 this.init();
 }
 Select.prototype = {
 //初始化
 init: function() {
 var self = this;
 this.page();
 this.event();
 this.mover();
 },
 event:function(){
 var self = this;
 self.pose.addEventListener('click', function(e) {
 e = e || window.event;
 e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
 var oSrc = e.srcElement || e.target;
 if(oSrc.className.indexOf('extended') > -1){
 self.resetM();
 }else{
 oSrc.classList.add("extended");
 self.content.style.display = "block";
 }
 }, false);
 },
 //鼠标经过list
 mover:function(){
 var self = this;
 var list=this.list;
 for (var i = 0; i < list.length; i++) {
 !function(i){
 list[i].addEventListener('mouseover', function(e) {
 self.resetA();
this.style.background = self.params.after;
 self.index=i;
 }, false);
 }(i)
 list[i].addEventListener('click', function(e) {
 self.pose.innerHTML = this.innerHTML;
 }, false);
 }
 },
 resetA:function(){
 var self = this;
 var list=this.list;
 for (var i = 0; i < list.length; i++) {
 list[i].style.background = self.params.before;
 }
 },
 resetM:function(){
 var self = this;
 self.content.style.display = "none";
 self.pose.classList.remove("extended");
 self.resetA();
 },
 // 点击页面空白处时
 page:function(){
 var self = this;
 document.addEventListener('click', function(e) {
 self.resetM();
 }, false);
 document.addEventListener('keydown', function(e) {
 e = e || window.event;
 var keyVel=e.keyCode;
 if (keyVel == 38 || keyVel == 37) {
 e.preventDefault ? e.preventDefault() : e.returnValue = false;//取消事件默认行为
 self.index--;
 if (self.index < 0) {
 self.index = self.list.length-1;
 }
 self.resetA();
 self.list[self.index].style.backgroundColor = self.params.after;
 } else if (keyVel == 39 || keyVel == 40) {
 e.preventDefault ? e.preventDefault() : e.returnValue = false;//取消事件默认行为
 self.index++;
 if (self.index > self.list.length-1) {
 self.index = 0;
 }
 self.resetA();
 self.list[self.index].style.backgroundColor = self.params.after;
 }else if(keyVel == 13 && self.index != -1){
 e.preventDefault ? e.preventDefault() : e.returnValue = false;
 self.pose.innerHTML = self.list[self.index].innerHTML;
 self.index = -1;
 self.resetA();
 self.resetM();
 }
 }, false);
 },
 }
 var r = (function() {
 var e = function(e) {
 var a = this,
 t = 0;
 for (t = 0; t < e.length; t++) {
 a[t] = e[t];
 }
 return a.length = e.length, this
 };
 e.prototype = {
 addClass: function(e) {
 if ("undefined" == typeof e) return this;
 for (var a = e.split(" "), t = 0; t < a.length; t++)
 for (var r = 0; r < this.length; r++) this[r].classList.add(a[t]);
 return this
 },
 each: function(e) {
 for (var a = 0; a < this.length; a++) e.call(this[a], a, this[a]);
 return this
 },
 html: function(e) {
 if ("undefined" == typeof e) return this[0] ? this[0].innerHTML : void 0;
 for (var a = 0; a < this.length; a++) this[a].innerHTML = e;
 return this
 },
 find: function(a) {
 for (var t = [], r = 0; r < this.length; r++)
 for (var i = this[r].querySelectorAll(a), s = 0; s < i.length; s++) t.push(i[s]);
 return new e(t)
 },
 append: function(a) {
 var t, r;
 for (t = 0; t < this.length; t++)
 if ("string" == typeof a) {
 var i = document.createElement("div");
 for (i.innerHTML = a; i.firstChild;) this[t].appendChild(i.firstChild)
 } else if (a instanceof e)
 for (r = 0; r < a.length; r++) this[t].appendChild(a[r]);
 else this[t].appendChild(a);
 return this
 },
 }
 var a = function(a, t) {
 var r = [],
 i = 0;
 if (a && !t && a instanceof e) {
 return a;
 }
 if (a) {
 if ("string" == typeof a) {
 var s, n, o = a.trim();
 if (o.indexOf("<") >= 0 && o.indexOf(">") >= 0) {
 var l = "div";
 for (0 === o.indexOf("<li") && (l = "ul"), 0 === o.indexOf("<tr") && (l = "tbody"), (0 === o.indexOf("<td") || 0 === o.indexOf("<th")) && (l = "tr"), 0 === o.indexOf("<tbody") && (l = "table"), 0 === o.indexOf("<option") && (l = "select"), n = document.createElement(l), n.innerHTML = a, i = 0; i < n.childNodes.length; i++) r.push(n.childNodes[i])
 } else
 for (s = t || "#" !== a[0] || a.match(/[ .<>:~]/) ? (t || document).querySelectorAll(a) : [document.getElementById(a.split("#")[1])], i = 0; i < s.length; i++) s[i] && r.push(s[i])
 } else if (a.nodeType || a === window || a === document) {
 r.push(a);
 } else if (a.length > 0 && a[0].nodeType) {
 for (i = 0; i < a.length; i++) {
 r.push(a[i]);
 }
 }
 }
 return new e(r)
 };
 return a;
 }())
 window.select = Select;
 })()
 /*封装代码*/
 </script>
</head>
<body>
 <div class="header">
 <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
 <a href="/widget/">返回首页</a>
 </div>
 <div class="main">
 <div class="select-container" id="select1">
 <cite class="select-pose">请选择分类</cite>
 <ul class="select-content">
 <li class="select-list">选项一</li>
 <li class="select-list">选项二</li>
 <li class="select-list">选项三</li>
 <li class="select-list">选项四</li>
 </ul>
 </div>
 <script type="text/javascript">
 new select("#select1");
 </script>
 <div class="code">
 <p>
 支持键盘事件,执行默认参数,鼠标点击分类显示,鼠标经过list执行默认参数
 </p>
 <p>new select("#select1");</p>
 </div>
 <div class="example">
 <div class="call">
 <h1>调用方法:</h1>
 <p>new select(selector,{options});</p>
 </div>
 <h2>options参数</h2>
 <table>
 <thead>
 <tr>
 <th width="150">参数</th>
 <th width="100">默认值</th>
 <th>说明</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>before</td>
 <td>'#fff'</td>
 <td>鼠标经过list初始化颜色色值</td>
 </tr>
 <tr>
 <td>after</td>
 <td>'#ccc'</td>
 <td>鼠标经过list颜色色值</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
JS实现简易日历效果
Jan 25 Javascript
js实现自动轮换选项卡
Jan 13 #Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 #Javascript
详解angularJs中自定义directive的数据交互
Jan 13 #Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 #Javascript
很棒的一组js图片轮播特效
Jan 12 #Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 #Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
进一步探究Python的装饰器的运用
2015/05/05 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
班组长安全生产职责
2013/12/16 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
小学中队委竞选稿
2015/11/20 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript