<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
.select{
width:300px;height:40px;
cursor:pointer;
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 style="color:#0000ff">↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</div>
<div></div>
<div>点击确定，获取模拟select的value值(getValue方法)：</div>
<input type="text" disabled="disabled" placeholder="点击“确定”按钮取值"/>
<div>点击确定，获取模拟select的index值(getIndex方法)：</div>
<input type="text" disabled="disabled" placeholder="点击“确定”按钮取值"/>
<div>点击确定，获取模拟select的值和index(getAll方法)：</div>
<div>getAll方法取得的值和index分别显示在这里</div>
</div>
<a>确定</a>
<div>
<div id="box"></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>
<script>
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>
4361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
