初次体验用mootools开发插件

/*/调用方法:

Pop(this,{

pos:3,//上;右;下;左

tim:3000,

oft:{x:10,y:0},

htm:'这是需要显示的内容<br>HTML5入门之新标签的解析',//可以为fun

fun:function(i){}

});

Pop();

/*/

核心代码

var Pop=function(i,opt){

var $Pop,$Hand;

if(!i || !opt){Function.attempt(function(){$('_Pop').destroy();});return false;}

if(!opt.htm){return false;}

opt.pos=(opt.pos) || 1;

opt.fun=(opt.fun) || function(){};

opt.oft=(opt.oft) || {x:0,y:0};

if(!$('_Pop')){

$box1_css='display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:#BBB;';

$box2_css='#left:-2px;border-width:0 1px;background-color:#FEFFE5;';

$Pop=new Element('div',{'id':'_Pop','style':'font-size:12px;position:absolute;'}).inject(document.body,'top');

$pop_box1=new Element('div').inject($Pop,'top');

$pop_box2=new Element('div').inject($pop_box1,'top');

$Mess=new Element('div',{'id':'mess'}).inject($pop_box2,'top');

$Hand=new Element('div',{'id':'_Pop_n'}).inject($Pop,'top');

$pop_box1.setProperty('style',$box1_css+'border-width:1px;');

$pop_box2.setProperty('style',$box1_css+$box2_css+'margin:0 -2px;');

$Mess.setProperty('style',$box1_css+$box2_css+'margin:1px -2px;padding:4px 8px;line-height:1.5;');

$box1_css=$box2_css=$pop_box1=$pop_box2=null;

}else{

$Pop=$('_Pop');

$Hand=$Pop.getElementById('_Pop_n');

$Mess=$Pop.getElementById('mess');

$Pop.setStyles({'left':$Ox+'px','top':$Oy+'px'});

}

if(typeOf(opt.htm)=='string'){

$Mess.set('html',opt.htm);

}else{

var htm='';

Function.attempt(function(){htm=opt.htm();});

$Mess.set('html',htm);

htm=null;

}

 

$fo=8;//修正值

$Ox=$(i).getPosition().x;//事件坐标

$Oy=$(i).getPosition().y;

$Ix=i.getSize().x;//Obj宽度

$Iy=i.getSize().y;

$Bx=$Pop.getSize().x;//Pop宽度

$By=$Pop.getSize().y;

$hcss='height:0;width:0;border-width:6px;position:absolute;';

 

switch(opt.pos){

case 1:

$Oy=$Oy+$Iy+$fo;$Ox=$Ox+$fo;

$hcss+='border-color:transparent transparent #BBB transparent;border-style:dashed dashed solid dashed;left:10px;top:-12px;';

break;

case 2:

$Ox=$Ox-$Bx-$fo;$Oy=$Oy-$fo;

$hcss+='border-color:transparent transparent transparent #BBB;border-style:dashed dashed dashed solid;right:-14px;top:10px;';

break;

case 3:

$Oy=$Oy-$By-$fo;$Ox=$Ox+$fo;

$hcss+='border-color:#BBB transparent transparent transparent;border-style:solid dashed dashed dashed;left:10px;bottom:-12px;';

break;

case 4:

$Ox=$Ox+$Ix+$fo;$Oy=$Oy-$fo;

$hcss+='border-color:transparent #BBB transparent transparent;border-style:dashed solid dashed dashed;left:-14px;top:10px;';

break;

}

$Ox=(opt.oft.x)?($Ox+(opt.oft.x)):$Ox;

$Oy=(opt.oft.y)?($Oy+(opt.oft.y)):$Oy;

$Pop.setStyles({'left':$Ox+'px','top':$Oy+'px'});

$Hand.setProperty('style',$hcss);

 

if(opt.tim){

var myFun=function(){$Pop.destroy()};myFun.delay(opt.tim,$Pop);

var timer=myFun.delay(opt.tim);clearTimeout(timer);

}

 

if(opt.fun){opt.fun($Pop);}

opt=$Ix=$Iy=$Bx=$By=$hcss=null;

};