前端，用面向對象寫的select下拉框;（初學，還有不少待改進的地方）

時間 2019-11-13

標籤前端面向對象寫的 select 下拉初學還有少待改進地方欄目軟件設計简体版

原文原文鏈接

<!DOCTYPE html>html

<html>web

<head>json

<title></title>ide

<style>函數

*{margin:0;padding:0;}this

.select{spa

width:300px;height:40px;prototype

cursor:pointer;orm

position:absolute;

top:0;left:0;

z-index:999;

}

.tran{

width:100%;

border:1px solid #333;

min-height:40px;

position:relative;

background: #eee;

}

.tran::after{

display:block;

content:"";

height:0;

visibility:hidden;

clear:both;

}

.select span.value{

display:block;

float:left;

width:90%;height:40px;

text-indent:15px;

line-height:40px;

position:absolute;

top:0;left:0;

z-index:20;

color:#303;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.square{

display:block;

float:right;

width:10%;

height:40px;

position:relative;

}

.square tt{

display:block;

width: 0;

height: 0;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-top: 10px solid #303;

position:absolute;

top:15px;left:0;right:0;bottom:0;

margin:0 auto;

}

.square tt.rot0{

-webkit-transform:rotate(0deg);

-moz-transform:rotate(0deg);

-o-transform:rotate(0deg);

-webkit-transition:all .2s linear;

-moz-transition:all .2s linear;

-o-transition:all .2s linear;

}

.square tt.rot180{

-webkit-transform:rotate(180deg);

-moz-transform:rotate(180deg);

-o-transform:rotate(180deg);

-webkit-transition:all .2s linear;

-moz-transition:all .2s linear;

-o-transition:all .2s linear;

}

.selectBox{

width:100%;

max-height:204px;

overflow-y:auto;

position:absolute;

top:41px;

left:0;

border:1px solid #333;

background:#fff;

display:none;

}

.selectBox li{

list-style:none;

height:40px;

line-height:40px;

padding:0 15px;

border-bottom:1px solid #333;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.selectBox li:last-of-type{

border-bottom:0 none;

}

.selectBox li:hover{

background:#eee;

color: #303;

}

.box{

width:500px;

margin:10px auto;

}

.box2{

margin:20px 0;

min-height:40px;

position:relative;

}

.btn{

display:block;

width:120px;

height:40px;

text-align:center;

line-height:40px;

border-radius:4px;

background: #00b700;

color:#fff;

cursor:pointer;

margin:20px auto;

}

.text{

margin:10px 0;

color:#f00;

}

input{

padding:12px 10px;

width:480px;

border:1px solid #999;

outline:none;

font-size:16px;

color:#0000ff;

}

.box3{

width:300px;

margin:20px auto;

}

.box4{

min-height:40px;

position:relative;

}

.show{

width:460px;

padding:20px;

border:1px solid #333;

margin:10px auto;

line-height:24px;

font-size:14px;

}

.getAll{

padding:12px 10px;

width:480px;

min-height:22px;

border:1px solid #999;

font-size:16px;

color:#0000ff;

line-height:30px;

}

</style>

</head>

<body>

<div>

<div>點擊肯定，獲取模擬select的value值(getValue方法)：</div>

<div>點擊肯定，獲取模擬select的index值(getIndex方法)：</div>

<div>點擊肯定，獲取模擬select的值和index(getAll方法)：</div>

<div>getAll方法取得的值和index分別顯示在這裏</div>

</div>

<div>

</div>

<div>

模擬的select下拉框,使用的時候只須要實例化 new select() 就能夠自動生成select下拉框,內部傳入一個Json,有4個屬性,分別是：width、title、box、value,均可以缺省, <br/>

width：表示設置下拉框的寬度,最小寬度爲300px,缺省或者設置寬度小於300px則默認寬度爲300px, <br/>

title：表示下拉框實例好了以後還未選中時顯示的文字或者已選中文字(至關於select功能), <br/>

box：表示放入下拉框的父級元素,若缺省,下拉框放入到docuemnt.body裏邊, <br/>

value：表示須要生成的選項(至關於select的option功能), <br/>

取值的方法有三種,分別能夠取到選中的值、選中值的index,getValue方法是單純取值,

getIndex方法單純取值對應的index,getAll表示既取到值，又取到對應的index，getAll取出來是一個Json,

</div>

window.onload = function(){

var oBtn = document.getElementsByClassName('btn')[0];

// 實例化第一個select下拉框;

var sel = new select({

width: '500px',

title : '無邊落木蕭蕭下，不盡長江滾滾來',

box : 'box2',

value : ['風急天高猿嘯哀，渚清沙白鳥飛回','無邊落木蕭蕭下，不盡長江滾滾來','萬里悲秋常做客，百年多病獨登臺','艱難苦恨繁霜鬢，潦倒新停濁酒杯']

});

oBtn.onclick = function(){

var value = sel.getValue();

var index = sel.getIndex();

var all = sel.getAll();

console.log(all);

document.getElementsByClassName('getValue')[0].value = 'getValue取的值是：'+value;

document.getElementsByClassName('getIndex')[0].value = 'getIndex取的index是：'+index;

document.getElementsByClassName('getAll')[0].innerHTML = 'getAll取得值是(getAll.value)：'+all.value+'</br>'+'getAll取得值是(getAll.index)：'+all.index;

};

// 實例化第二個select下拉框;

var sel2 = new select({

// width : '400px', // width缺省默認爲 300px;

title: '輸入內容，能夠缺省，能夠自定義的', // title缺省默認內容爲：請選擇內容;

box : 'box', // box缺省默認添加到body上;

value : ['第一項','第二項','第三項','第四項','第五項','第六項','第二項','第三項','第四項','第五項','第六項','第二項','第三項','第四項','第五項','第六項','第二項','第三項','第四項','第五項','第六項'] // value缺省不會生成select下拉框;

});

// 大部分值都缺省的狀況;

var sel3 = new select({

value : ['人生若只如初見','何事秋風悲畫扇']

});

};

function select(Json){

this.Json = Json;

this.seWidth = this.Json.width || 300+'px';

this.seTitle = this.Json.title || '請選擇內容';

this.seBox = document.getElementById(this.Json.box) || document.getElementsByClassName(this.Json.box)[0] || document.body;

this.seValue = this.Json.value || [''];

this.oTran = document.createElement('div');

this.oSpan = document.createElement('span');

this.oUl = document.createElement('ul');

this.oI = document.createElement('i');

this.oTt = document.createElement('tt');

this.oLi = this.oUl.children;

this.isOn = null;

this.init();

this.setValue();

this.click();

}

select.prototype = {

init : function(){

var self = this;

var oDiv = document.createElement('div');

oDiv.className = 'select';

oDiv.style.width = self.seWidth;

oDiv.style.minWidth = 300+'px';

self.oTran.className = 'tran';

self.oI.className = 'square';

self.oTt.className = 'rot0';

self.oSpan.className = 'value';

self.oSpan.innerHTML = self.seTitle;

self.oSpan.setAttribute('value',self.seTitle);

self.oSpan.setAttribute('index',null);

self.oUl.className = 'selectBox';

self.oUl.innerHTML = '';

for(var i=0;i<this.seValue.length;i++){

if(this.seValue.length==1 && this.seValue[0]=='')

return;

self.oUl.innerHTML += '<li value='+self.seValue[i]+' index='+i+'>'+self.seValue[i]+'</li>';

}

self.oI.appendChild(self.oTt);

self.oTran.appendChild(self.oSpan);

self.oTran.appendChild(self.oI);

oDiv.appendChild(self.oTran);

oDiv.appendChild(self.oUl);

self.seBox.appendChild(oDiv);

click : function(){

var self = this;

self.isOn = true;

self.oTran.onclick = function(){

if(self.isOn){

self.show();

}else{

self.hide();

}

show : function(){

var self = this;

self.oUl.style.display = 'block';

self.addClass(self.oTt,'rot180');

self.removeClass(self.oTt,'rot0');

self.isOn = !self.isOn;

hide : function(){

var self = this;

self.oUl.style.display = 'none';

self.addClass(self.oTt,'rot0');

self.removeClass(self.oTt,'rot180');

self.isOn = true;

setValue : function(){

var self = this;

for(var i=0;i<self.oLi.length;i++){

self.oLi[i].onclick = (function(k){

return function(){

self.oSpan.innerHTML = self.oLi[k].innerHTML;

self.oSpan.setAttribute('value',self.oSpan.innerHTML);

self.oSpan.setAttribute('index',self.oLi[k].getAttribute('index'));

self.hide();

}

})(i)

}

getIndex : function(){

var self = this;

this.setValue();

return self.oSpan.getAttribute('index');

getValue : function(){

var self = this;

this.setValue();

return self.oSpan.innerHTML;

getAll : function(){

var self = this;

this.setValue();

var val = {

value : self.oSpan.innerHTML,

index : self.oSpan.getAttribute('index')

};

// value = JSON.stringify(value);

return val;

addClass : function(obj,name){

var classArr = obj.className.split(' ');

for(var i=0;i<classArr.length;i++){

if(classArr[i]==name)

return

}

if(obj.className)

obj.className += ' '+name;

else

obj.className = name;

removeClass : function(obj,name){

var classArr = obj.className.split(' ');

for(var i=classArr.length-1;i>=0;i--){

if(classArr[i]==name)

classArr.splice(i,1);

}

obj.className = classArr.join(' ');

}

// 沒用jq 原本想作個jq那種 toogleslide 那種效果的,無奈功力不夠，並且太麻煩了，直接用的block，none來寫吧，

move : function(obj,Json,time,cv,callBack){

if (typeof cv == 'undefined'){

time = time || 400;

cv = 'linear';

}

if (typeof time == 'string'){

callBack = cv;

cv = time;

time = 400;

}else if (typeof time == 'number' && typeof cv == 'function'){

callBack = cv;

cv = 'linear';

}else if (typeof time == 'function'){

callBack = time;

time = 400;

cv = 'linear';

}

// b iB 初始位置 left width等等; json值;

var iB = {};

// 時間變化量 (開始時間);

var starTime = (new Date()).getTime();

for(var key in Json){

iB[key] = parseInt(getStyle(obj,key));

};

// c iC 屬性變化量;

var iC = {};

for(var key in Json){

// 變化量減去初始量取整;

parseInt(Json[key] - iC[key])

};

// 時間變化量;

obj.stop = setInterval(function(){

var nowTime = (new Date()).getTime();

var t = Math.min(nowTime - starTime,time);

for(var key in Json){

// 調用 Tween 運動函數,不肯定的值用中括弧([])表示,傳入四個參數 (t,b,c,d);

var value = Tween[cv](t,iB[key],parseInt(Json[key])-iB[key],time);

obj.style[key] = value + 'px';

};

if(t == time){

clearInterval(obj.stop);

callBack && callBack.call(obj);

}

},13);

function getStyle(obj,attr){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];

};

// Tween 運動曲線擴展

Tween : {

linear: function (t, b, c, d){ //勻速

return c*t/d + b;

easeIn: function(t, b, c, d){ //加速曲線

return c*(t/=d)*t + b;

easeOut: function(t, b, c, d){ //減速曲線

return -c *(t/=d)*(t-2) + b;

easeBoth: function(t, b, c, d){ //加速減速曲線

if ((t/=d/2) < 1) {

return c/2*t*t + b;

}

return -c/2 * ((--t)*(t-2) - 1) + b;

easeInStrong: function(t, b, c, d){ //加加速曲線

return c*(t/=d)*t*t*t + b;

easeOutStrong: function(t, b, c, d){ //減減速曲線

return -c * ((t=t/d-1)*t*t*t - 1) + b;

easeBothStrong: function(t, b, c, d){ //加加速減減速曲線

if ((t/=d/2) < 1) {

return c/2*t*t*t*t + b;

}

return -c/2 * ((t-=2)*t*t*t - 2) + b;

elasticIn: function(t, b, c, d, a, p){ //正弦衰減曲線（彈動漸入）

if (t === 0) {

return b;

}

if ( (t /= d) == 1 ) {

return b+c;

}

if (!p) {

p=d*0.3;

}

if (!a || a < Math.abs(c)) {

a = c;

var s = p/4;

} else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

elasticOut: function(t, b, c, d, a, p){ //正弦加強曲線（彈動漸出）

if (t === 0) {

return b;

}

if ( (t /= d) == 1 ) {

return b+c;

}

if (!p) {

p=d*0.3;

}

if (!a || a < Math.abs(c)) {

a = c;

var s = p / 4;

} else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

elasticBoth: function(t, b, c, d, a, p){

if (t === 0) {

return b;

}

if ( (t /= d/2) == 2 ) {

return b+c;

}

if (!p) {

p = d*(0.3*1.5);

}

if ( !a || a < Math.abs(c) ) {

a = c;

var s = p/4;

}

else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

if (t < 1) {

return - 0.5*(a*Math.pow(2,10*(t-=1)) *

Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

}

return a*Math.pow(2,-10*(t-=1)) *

Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;

backIn: function(t, b, c, d, s){ //回退加速（回退漸入）

if (typeof s == 'undefined') {

s = 1.70158;

}

return c*(t/=d)*t*((s+1)*t - s) + b;

backOut: function(t, b, c, d, s){

if (typeof s == 'undefined') {

s = 3.70158; //回縮的距離

}

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

backBoth: function(t, b, c, d, s){

if (typeof s == 'undefined') {

s = 1.70158;

}

if ((t /= d/2 ) < 1) {

return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

}

return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

bounceIn: function(t, b, c, d){ //彈球減振（彈球漸出）

return c - this['bounceOut'](d-t, 0, c, d) + b;

bounceOut: function(t, b, c, d){

if ((t/=d) < (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t < (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;

} else if (t < (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;

}

return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;

bounceBoth: function(t, b, c, d){

if (t < d/2) {

console.log( this );

return this['bounceIn'](t*2, 0, c, d) * 0.5 + b;

}

return this['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;

}

};

</script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。