Native JS implementation drop-down frame function (support keyboard event)

If you say, please see the code:

   Countdown - multiple format calls - native JS package    / * Public * / html {height: 100%;} Body, DIV, DL, DT, DD, UL, OL, LI, H2 , H3, H4, H5, H7, 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; /*ternetExplorer5.5+*/} .example {Padding- Top: 40px; margin-bottom: 90px;} .example .call {padding: 18px 5px; Background: # f0f5f8;} .example h3 {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 # cee; 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 ten {color: # Padding-top: 2px; padding-bottom: 2px; text-align: left;} / * public * / .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: 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 Transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -y 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%; -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: #fffff; position: absolute; z-index: 2000; margin Top: -1px; display: none; overflow: hidden;} .select-list {cursor: pointer; height: 24px; line-height: 24px; paddinG-Left: 10px;}   / * Package code * / (function () {var select = function (el, opts) {var self self = this; var defaults = {before: '#fff', After: '# ccc'} OPTS = OPTS || {}; for ("undefined" == TypeOf OPTS [W]) {OPTS [W] = defaults [w];}} .Params = OPTS; this.Container = R (EL); if (this.container.Length> 1) {var x = []; return this.container.each (function () {x.push (new selection (THIS ,})})}), 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 = {/ / Initialization 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 ('extended')> -1) {self.resetm ();} else {osrc.classlist.add ("extended"); self. Content.style.display = "block";}}, false;}, // mouse after List Mover: function () {var self = this; var list = this; var list = this.list; for (VAR i = 0; i  Self.List.Length-1) {self.index = 0;} self.reseta (); self.list [self.index] .style.backgroundcolor = self.pamas.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.Rseta (); Self.resetm();}}, false;},} var r = (function () {var e = function (e) {var A = this, t = 0; for (t = 0; T  = 0 && O.indexof (">")> = 0) {var l = "div"; for (0 === o.indexof (": ~] /)? (T || Document) .queryselectorall (A : [Document.getlementByid (a.split ("#") [1])], i = 0; i  0 && a [0] .NodeType) {for (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  < 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(" <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(/[ . Returns Home  < a.length; i++) {
 r.push(a[i]);
 }
 }
 }
 return new e(r)
 };
 return a;
 }())
 window.select = Select;
 })()
 /*封装代码*/
    
Select Classification Options
Options 3
  • New SELECT ("# SELECT1");
  • Supports keyboard events, executing the default parameters, mouse click classification display, the mouse will perform the default parameters
  • New SELECT ("# SELECT1");
Call method:

[Selector, {Options});

Options parameter

parameter

Default value

Before '# ccc' The mouse passes through the List color value
'# fff' mouse is initialized in color color value
The above is all the content of this article, and it is desirable to bring certain help to everyone's learning or work, and I hope to support Tumi. cloud!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment