以前一直都在用jquery,突然轉到mootools,很多語法結構不太適應,不過沒關係,我們可以給Mt加擴充套件讓他的語法結構像jquery那樣
這一點在Mt上實現起來並不難,可是如果要讓jquery模仿Mt是沒辦法的.
Element.implement({
//EVENTS
bind:function(type,fn){//$('simple').bind('click mousewheel contextmenu',function(){alert('sh')}).alert('link');
type.split(' ').each(function(event){
this.addEvent(event,fn);
},this);
return this;
},
fire:function(type,args,tim){//$('b').fire('click',$('a'),4000);觸發$('b')的事件
return this.fireEvent(type,args,tim);
},
one:function(type,fn){//$('simple').one('click',function(){alert('sh')}).alert('link');
var removeOne=function(){this.removeEvent(type,fn).removeEvent(type,removeOne);}
return this.addEvent(type,fn).addEvent(type,removeOne);
},
hover:function(fn1,fn2){//$('simple').hover(function(){console.log('1')},function(){console.log('2')});
return this.addEvents({
'mouseenter':fn1,
'mouseleave':fn2
});
},
//METHOD
data:function(opt,value){
return value ? this.store(opt,value):this.retrieve(opt);
},
//ATTRIBUTES
attr:function(prop,value){
switch ($type(prop)){
case 'object':
this.set(prop);
break;
case 'string':
if(value){
//Note:first attempt() arg is supposed to be index of elements array,but can't be done in Mootools
if($type(value)=='function') value=value.attempt(this,this);
this.set(prop,value)
}
else return this.get(prop);
}
return this;
},
html:function(value){
return value ? this.set('html',value):this.get('html');
},
text:function(text){
return text ? this.set('text',text):this.get('text');
},
val:function(value){
//Note:Array type value not implemented
return value ? this.set('value',value):this.get('value');
},
alert:function(msg){
alert(msg);
},
show:function(){
this.setStyle('display','');
},
hide:function(){
this.setStyle('display','none');
},
_show:function(){
this.fade('in');
},
_hide:function(){
this.fade('out');
},
toggle:function(event,fn,fn2){
var flag=true;
return this.addEvent(event,function(){
(flag ? fn:fn2).apply(this,arguments);
flag=!flag;
});
},
xlight:function(linkClass,opacity){
opacity=(opacity)?opacity:.3;
linkClass=(linkClass.charAt(0)=='.')?linkClass:'.'+linkClass;
this.addEvent('mouseover:relay('+linkClass+')',function(e,elem){
$$(linkClass).each(function(link){
if(elem!=link){link.tween('opacity',opacity);}
});
});
this.addEvent('mouseout:relay('+linkClass+')',function(e,elem){
$$(linkClass).each(function(link){
link.tween('opacity',1);
});
});
}
});