01_jQuery插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了01_jQuery插件相关的知识，希望对你有一定的参考价值。
功能：对角拉伸，自由拖拽
这个功能其实已经在jquery中封装好了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.d1 {
height: 300px;
width: 600px;
background: #DDDDDD;
position: relative;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="d1">456456456
<div class="d2">
</div>
</div>
<script>
$.fn.extend({
////封装好的jQuery插件，可以随便移动窗口
drag: function() {
var disX = 0;
var disY = 0;
var This = this;
this.mousedown(function(ev) {
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev) {
ev.preventDefault();
This.css(‘left‘, ev.pageX - disX);
This.css(‘top‘, ev.pageY - disY);
});
$(document).mouseup(function() {
$(this).off();
});
return false;
});
return this.mousedown();
},
//封装好的jQuery插件，在右下角改变元素的大小并且可以随便移动窗口
elementResizeAndDrag: function() {
var me = this;
this.mousemove(function(e) {
var X = $(this).width();
var Y = $(this).height();
var disX = $(this).offset().left;
var disY = $(this).offset().top;
var e = e || window.event;
if(
(e.pageX >= X + disX - 20) &&
(e.pageY >= Y + disY - 20) &&
(e.pageX <= X + disX + 20) &&
(e.pageY <= Y + disY + 20)
) {
$(this).css("cursor", "se-resize");
} else {
$(this).css("cursor", "default");
}
});
this.mousedown(function(e) {
var X = $(this).width();
var Y = $(this).height();
var disX = $(this).offset().left;
var disY = $(this).offset().top;
var e = e || window.event;
if(
(e.pageX >= X + disX - 20) &&
(e.pageY >= Y + disY - 20) &&
(e.pageX <= X + disX + 20) &&
(e.pageY <= Y + disY + 20)
) {
$(document).mousemove(function(e) {
var e = e || window.event;
e.preventDefault();
me.css(‘width‘, e.clientX - disX + ‘px‘);
me.css(‘height‘, e.clientY - disY + ‘px‘);
});
$(document).mouseup(function() {
$(this).off();
});
return false;
} else {
var disX = 0;
var disY = 0;
disX = e.pageX - $(this).offset().left;
disY = e.pageY - $(this).offset().top;
$(document).mousemove(function(e) {
var e = e || window.event;
e.preventDefault();
me.css(‘left‘, e.pageX - disX);
me.css(‘top‘, e.pageY - disY);
});
$(document).mouseup(function() {
$(this).off();
});
return false;
}
});
return this.mousedown();
},
//封装好的jQuery插件，在右下角改变元素的大小
elementResize: function() {
var me = this;
this.mousemove(function(e) {
var X = $(this).width();
var Y = $(this).height();
var disX = $(this).offset().left;
var disY = $(this).offset().top;
var e = e || window.event;
if(
(e.pageX >= X + disX - 20) &&
(e.pageY >= Y + disY - 20) &&
(e.pageX <= X + disX + 20) &&
(e.pageY <= Y + disY + 20)
) {
$(this).css("cursor", "se-resize");
} else {
$(this).css("cursor", "default");
}
});
this.mousedown(function(e) {
var X = $(this).width();
var Y = $(this).height();
var disX = $(this).offset().left;
var disY = $(this).offset().top;
var e = e || window.event;
if(
(e.pageX >= X + disX - 20) &&
(e.pageY >= Y + disY - 20) &&
(e.pageX <= X + disX + 20) &&
(e.pageY <= Y + disY + 20)
) {
$(document).mousemove(function(e) {
var e = e || window.event;
e.preventDefault();
me.css(‘width‘, e.clientX - disX + ‘px‘);
me.css(‘height‘, e.clientY - disY + ‘px‘);
});
$(document).mouseup(function() {
$(this).off();
});
return false;
}
});
return this.mousedown();
}
});
$(‘.d1‘).elementResizeAndDrag(function(){
console.log(12);
});
$(window).resize(function(){
console.log(123);
});
</script>
</body>
</html>
以上是关于01_jQuery插件的主要内容，如果未能解决你的问题，请参考以下文章
jquery WebUploader 插件 怎么取消避免重复上传.
使用 jquery.BlockUI 插件禁用整个 jqGrid（jQuery Grid 插件）