自己一直很喜欢开发组件，只是OPP学的不是很精，自己在项目中用别人的框架进行项目开发，难免受制于人，也许这就是个人实际项目需求和框架提供的多少有点不符，引导我自己尝试开发一些自己常用的组件，话不多说，直接贴代码。
HTML代码部分:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滑动条-slide 插件开发</title> 6 </head> 7 <body> 8 <div id="sliderbar-wrap"> 9 <div class="sliderba-dot"></div> 10 <span class="sliderba-line"></span> 11 </div> 12 </body> 13 </html>
CSS代码部分:
1 #sliderbar-wrap{ 2 height: 40px; 3 background-color: pink; 4 position: relative; 5 } 6 .sliderba-dot{ 7 width: 20px; 8 height: 20px; 9 background-color: #ccc; 10 border-radius: 50%; 11 border: 2px solid #ccc; 12 position: absolute; 13 top: 10px; 14 z-index: 10; 15 } 16 .sliderba-line{ 17 height: 1px; 18 background-color: #ccc; 19 position: absolute; 20 top: 20px; 21 left: 20px; 22 }
Javascript代码部分:
1 //构造函数 2 function SlideBar(){ 3 var _this=this; 4 this.aWrap=document.getElementById(‘sliderbar-wrap‘); 5 this.oDot=this.aWrap.querySelector(‘.sliderba-dot‘); 6 this.oLine=this.aWrap.querySelector(‘.sliderba-line‘);; 7 this.disX=0; 8 this.disY=0; 9 this.oDot.onmousedown=function(ev){ 10 var ev=ev||window.event; 11 _this.fnDown(ev); 12 }; 13 } 14 //mousedown函数 15 SlideBar.prototype.fnDown=function(ev){ 16 var ev=ev||window.event; 17 var _this=this; 18 this.ww=this.aWrap.offsetWidth-24; 19 this.disX=ev.clientX-this.oDot.offsetLeft; 20 document.onmousemove=function(ev){ 21 _this.fnMove(ev); 22 }; 23 document.onmouseup=this.fnUp; 24 return false; 25 }; 26 //mousemove函数 27 SlideBar.prototype.fnMove=function(ev){ 28 var ev=ev||window.event; 29 var _this=this; 30 this.oDot.style.left=(ev.clientX-this.disX<0)?0:((ev.clientX-this.disX>this.ww)?(this.ww+‘px‘):(ev.clientX-this.disX+‘px‘)); 31 this.callback({ 32 percent:Math.floor(this.oDot.offsetLeft/(this.aWrap.offsetWidth-this.oDot.offsetWidth)*100), 33 distanceLeft:this.oDot.offsetLeft*this.step 34 }); 35 }; 36 //mouseup函数 37 SlideBar.prototype.fnUp=function(){ 38 document.onmousemove=null; 39 document.onmouseup=null; 40 }; 41 42 //配置函数 43 SlideBar.prototype.config=function(options){ 44 this.options=options===undefined?{}:options; 45 this.oDot.style.left=this.options.initPos === undefined?0:this.options.initPos; 46 this.step=this.options.step===undefined? 1 : this.options.step; 47 this.skin=this.options.skin===undefined? 1 : this.options.skin; 48 this.aWrap.style.width=this.options.width === undefined?‘200px‘ : this.options.width ; 49 this.oLine.style.width=this.options.width === undefined?‘160px‘ : parseInt(this.options.width)-this.oDot.offsetWidth*2+4 +‘px‘; 50 this.callback=this.options.callback; 51 if(this.skin==1){ 52 this.oDot.style.backgroundColor=‘#18df52‘; 53 }else if(this.skin==2){ 54 this.oDot.style.backgroundColor=‘#18a2de‘; 55 }else if(this.skin==3){ 56 this.oDot.style.backgroundColor=‘#b53400‘; 57 } 58 }
调用slid.js:
1 window.onload=function(){ 2 //实例化一个对象 int 3 var int=new SlideBar(); 4 //设置配置参数 5 int.config({ 6 initPos:‘20px‘,//初始距离左边位置 默认是 0 7 step:2, //步长 默认是1 8 skin:2, // 圆点的颜色 skin 类型 1 2 3 9 width:‘200px‘, //外层sliderbar-wrap的宽度 10 callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值 11 console.log(res) 12 } 13 }) 14 } 15 </script>
整个插件开发HTML:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滑动条-slide 插件开发</title> 6 </head> 7 <style> 8 #sliderbar-wrap{ 9 height: 40px; 10 background-color: pink; 11 position: relative; 12 } 13 .sliderba-dot{ 14 width: 20px; 15 height: 20px; 16 background-color: #ccc; 17 border-radius: 50%; 18 border: 2px solid #ccc; 19 position: absolute; 20 top: 10px; 21 z-index: 10; 22 } 23 .sliderba-line{ 24 height: 1px; 25 background-color: #ccc; 26 position: absolute; 27 top: 20px; 28 left: 20px; 29 } 30 </style> 31 <body> 32 <div id="sliderbar-wrap"> 33 <div class="sliderba-dot"></div> 34 <span class="sliderba-line"></span> 35 </div> 36 </body> 37 <script> 38 window.onload=function(){ 39 40 //实例化一个对象 int 41 42 var int=new SlideBar(); 43 44 //设置配置参数 45 46 int.config({ 47 48 initPos:‘10px‘,//初始距离左边位置 默认是 0 49 50 step:2, //步长 默认是1 51 52 skin:2, // 圆点的颜色 skin 类型 1 2 3 53 54 width:‘200px‘, //外层sliderbar-wrap的宽度 55 56 callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值 57 58 console.log(res) 59 60 } 61 62 }) 63 64 } 65 //构造函数 66 function SlideBar(){ 67 var _this=this; 68 this.aWrap=document.getElementById(‘sliderbar-wrap‘); 69 this.oDot=this.aWrap.querySelector(‘.sliderba-dot‘); 70 this.oLine=this.aWrap.querySelector(‘.sliderba-line‘);; 71 this.disX=0; 72 this.disY=0; 73 this.oDot.onmousedown=function(ev){ 74 var ev=ev||window.event; 75 _this.fnDown(ev); 76 }; 77 } 78 //mousedown函数 79 SlideBar.prototype.fnDown=function(ev){ 80 var ev=ev||window.event; 81 var _this=this; 82 this.ww=this.aWrap.offsetWidth-24; 83 this.disX=ev.clientX-this.oDot.offsetLeft; 84 document.onmousemove=function(ev){ 85 _this.fnMove(ev); 86 }; 87 document.onmouseup=this.fnUp; 88 return false; 89 }; 90 //mousemove函数 91 SlideBar.prototype.fnMove=function(ev){ 92 var ev=ev||window.event; 93 var _this=this; 94 this.oDot.style.left=(ev.clientX-this.disX<0)?0:((ev.clientX-this.disX>this.ww)?(this.ww+‘px‘):(ev.clientX-this.disX+‘px‘)); 95 this.callback({ 96 percent:Math.floor(this.oDot.offsetLeft/(this.aWrap.offsetWidth-this.oDot.offsetWidth)*100), 97 distanceLeft:this.oDot.offsetLeft*this.step 98 }); 99 }; 100 //mouseup函数 101 SlideBar.prototype.fnUp=function(){ 102 document.onmousemove=null; 103 document.onmouseup=null; 104 }; 105 106 //配置函数 107 SlideBar.prototype.config=function(options){ 108 this.options=options===undefined?{}:options; 109 this.oDot.style.left=this.options.initPos === undefined?0:this.options.initPos; 110 this.step=this.options.step===undefined? 1 : this.options.step; 111 this.skin=this.options.skin===undefined? 1 : this.options.skin; 112 this.aWrap.style.width=this.options.width === undefined?‘200px‘ : this.options.width ; 113 this.oLine.style.width=this.options.width === undefined?‘160px‘ : parseInt(this.options.width)-this.oDot.offsetWidth*2+4 +‘px‘; 114 this.callback=this.options.callback; 115 if(this.skin==1){ 116 this.oDot.style.backgroundColor=‘#18df52‘; 117 }else if(this.skin==2){ 118 this.oDot.style.backgroundColor=‘#18a2de‘; 119 }else if(this.skin==3){ 120 this.oDot.style.backgroundColor=‘#b53400‘; 121 } 122 } 123 </script> 124 </html>