Jquery弹出层插件和拖拽插件的结合使用范例
因为工作需要开发了一个拖拽插件,于是乎顺手写个弹出层吧!另外把拖拽插件也调用进来让他能控制拖动.
通过动画你会发现其实这个层刚开始是不能拖动的,只有点击了"canMove"才能拖动,当然了这只是一个高级应用实例,实际应用中我们可以让他不需要点击就可以拖拽.另外这个层有一个回调函数.自己研究代码吧,我是属于那种只管杀不管埋的主!
以前我发插件的时候只是把插件的核心代码发出来,后来我发现好多童鞋都不明所以,所以为了降低门槛以后我发代码会发完整例子上来,不过这次我连html的DOC头一起发上来,这下简单了吧!
对了,<script type='text/javascript' src="@image/jquery-1.5.2.min.js"></script>这东西你得自己改改,如果不知道咋改.....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>http://hi.baidu.com/see7di/home</title>
<script type='text/javascript' src="@image/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
(function($){
//拖拽插件,参数:id或object
$.Move = function(_o){
_box=_o.box;
if(!_box){return false;}
if(typeof(_box)=='object'){
_box=_box;
}else{
_box=$("#"+_box);
}
if(!_o.hand){
_hand=_o.box;
}else{
_hand=_o.hand;
}
if(typeof(_hand)=='object'){
_hand=_hand;
}else{
_hand=$("#"+_hand);
}
_box.css({'position':'absolute'});
_hand.hover(function(){$(this).css("cursor","move");},function(){$(this).css("cursor","default");})
_box.mousedown(function(e){//e鼠标事件
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
$(document).bind("mousemove",function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
_box.bind('selectstart dblclick',function(){return false;});
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
_box.css({'left':_x+"px",'top':_y+"px"});
});
});
$(document).mouseup(function(){
$(this).unbind("mousemove");
})
};
//弹出层插件,参数:id或object
$.PopUp = function(_o){
if(!_o){
$('body').css('overflow','');
$('#_pop_').remove();
return false;
}
$('#_pop_').remove();
var H=W='';
if(_o.height){
H='height:'+_o.height+';';
}else{
H='min-height:250px;max-height:'+($(window).height()/2.2)+'px;height:auto;';
}
if(_o.width){
W='width:'+_o.width+';';
}else{
W='min-width:400px;max-width:'+($(window).width()/2.2)+'px;width:auto;';
}
_css_='<style type="text/css">';
_css_+='#_pop_ *{font-family:verdana,arial;font-size:12px;}';
_css_+='#_pop_ { position: absolute; width: 100%;height:100%; top: 0;left: 0; }';
_css_+='#_pop_ .cov{width:100%;height:100%;z-index:9999;top:0;left:0;background-color:#000;}';
_css_+='#_pop_ .box{background:#ddd;top:50px;border:1px solid #FFF;position:absolute;line-height:22px;'+H+W+'}';
_css_+='#_pop_ .t{font-weight:bold;color:#3A5998;text-indent:6px;text-shadow:0 1px 0 #EEE;}';
_css_+='#_pop_ .c{font-size:18px;line-height:19px;color:#888;float:right;width:18px;cursor:pointer;text-indent:0;}';
_css_+='#_pop_ .i{background:#eee;word-wrap:break-word;overflow-x:auto;}';
_css_+='</style>';
if(!_o.title){_o.title='';}
if(!_o.messtyp){_o.messtyp='text';}
switch((_o.messtyp).toLowerCase()){
case "text":
case "html":
_mess='<div style="height:100%;padding-left:10px;">'+_o.message+'</div>';
break;
case "iframe":
_mess='<iframe src="'+_o.message+'" scrolling="auto" frameborder="0" id="iframe" style="width:100%;height:100%;border:medium none navy;"></iframe>';
break;
default:
_mess='';
}
$('body').css('overflow','hidden').prepend('<div id="_pop_">'+_css_+'<div class="cov"></div><div class="box"><div class="t">'+_o.title+'<div class="c">×</div></div><div class="i">'+_mess+'</div></div></div>');
$('#_pop_ .cov').css({'opacity':'0.7'});
$('#_pop_ .box').css({'left':_boxleft});
$(window).resize(function(){
$('#_pop_ .box').css({'left':_boxleft});
});
$('#_pop_ .i').css({height:function(){
return ($('#_pop_ .box').height()-$('#_pop_ .box .t').height())+'px';
}});
$('#_pop_ .c').hover(function(){
$(this).css('color','#3A5998');
},function(){
$(this).css('color','#888');
}).click(function(){
_o.onclose();
$('body').css('overflow','');
$('#_pop_').remove();
});
function _boxleft(){
return (($(window).width()-$('#_pop_ .box').width())/2)+'px';
}
};
})(jQuery)
