虽然现如今vue、angular等的框架大行其道，但是jQuery依然还是日常开发非常常用的，而其中插件又是爱不释手的，今天简单来看一下如何封装一个简单的插件。
核心语法
<pre>
<script>
//定义好一个插件
$.fn.extend({
toRed(){
this.css(background:'red')
//这个方法被谁引用，this就是指被引用的jQuery对象
}
})
//下面开始引用插件
$(function(){
$('div').toRed();
})
</script>
<body>
<div></div>
</body>
</pre>
1.一个拖拽案例
<pre>
<script>
$.fn.extend({
drag(){
//this在这里表示被外面哪一个元素引用的jQuery对象
let oDiv=this;
oDiv.on('mousedown',function(ev){
let disx=ev.clientX-oDiv.offset().left;
let disy=ev.clientY-oDiv.offset().top;
function fnMove(ev){
let l=ev.clientX-disx;
let t=ev.clientY-disy;
oDiv.css({
left:l+'px',
top:t+'px'
})
return false;
}
function fnUp(){
$(document).off('mousemove',fnMove);
$(document).off('mouseup',fnUp);
}
$(document).on('mousemove',fnMove);
$(document).on('mouseup',fnUp);
})
}
})
//在这里引用插件中封装好的drag方法
$(function(){
$('div').drag();
})
</script>
<body>
<div id="div"></div>
</body>
</script>
</pre>
2.一个可以传参数的拖拽
defaultConfig,当中可以设置任意参数。el代表可以进行拖拽哪个元素，还有距离四个方向的距离，如果不传递那么就是默认的。
<pre>
<script>
$.fn.extend({
drag(options){
let oDiv=this;
let defaultConfig={
el:oDiv,
left:0,
top:0,
right:document.documentElement.clientWidth,
bottom:document.documentElement.clientHeight
}
//这里需要将外部传递的参数和这里默认的值进行校验
let config=$.extend(defaultConfig,options);
let el;
//判断是否传递控制哪一个元素，如果不传默认是oDiv
if(typeof(config.el)=="string"){
el=oDiv.find(config.el);
}else{
el=oDiv;
}
el.on('mousedown',function(ev){
let disx=ev.clientX-el.offset().left;
let disy=ev.clientY-el.offset().top;
function fnMove(ev){
let l=ev.clientX-disx;
let t=ev.clientY-disy;
if(l<config.left){
l=config.left;
}
if(l>config.right-oDiv.outerWidth()){
l=config.right-oDiv.outerWidth();
}
if(t<config.top){
t=config.top;
}
if(t>config.bottom){
t=config.bottom-oDiv.outerHeight();
}
oDiv.css({
left:l+'px',
top:t+'px'
})
return false;
}
function fnUp(){
$(document).off('mousemove',fnMove);
$(document).off('mouseup',fnUp);
}
$(document).on('mousemove',fnMove);
$(document).on('mouseup',fnUp);
})
}
})
$(function(){
//直接引用，并且传递了四个参数，代表了只有在span元素上的拖拽才会生效，并且限制div元素的四个最大方向
$('div').drag({
el:'span',
right:600,
left:50,
bottom:600
});
})
</script>
</head>
//当然这里的div都没有设置样式，还须自己设置，span标签可以随意设置任何标签
<body>
<div id="div">
<span></span>
</div>
</body>
</pre>
网友评论