原生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 相关文章推荐
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
javascript连续赋值问题
Jul 08 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
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
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
PHP实现文件下载详解
2014/11/27 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
vue mvvm数据响应实现
2020/11/11 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python元组的概念知识点
2019/11/19 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
远程培训的心得体会
2014/09/01 职场文书
出售房屋协议书范本
2014/10/06 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
元旦晚会开场白
2015/05/29 职场文书
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android