Анимированные теги на mootools для DLE
И так для начало качаем фреймворк:
Зарегистрируйтесь чтобы увидеть что тут скрыто.
Кидаем в папку с шабом и подключаем его в
main.tpl:
<script type="text/javascript" src="{THEME}/mt.js"></script>
Создаем скрипт
mt-slide.js и так же подключаем его в
main.tpl, в нем пишем:
Fx.Slide=new Class({Extends:Fx,options:{mode:"vertical"},initialize:function(B,A){this.addEvent("complete",function(){this.open=(this.wrapper["offset"+this.layout.capitalize()]!=0);
if(this.open&&Browser.Engine.webkit419){this.element.dispose().inject(this.wrapper);}},true);this.element=this.subject=$(B);this.parent(A);var C=this.element.retrieve("wrapper");
this.wrapper=C||new Element("div",{styles:$extend(this.element.getStyles("margin","position"),{overflow:"hidden"})}).wraps(this.element);this.element.store("wrapper",this.wrapper).setStyle("margin",0);
this.now=[];this.open=true;},vertical:function(){this.margin="margin-top";this.layout="height";this.offset=this.element.offsetHeight;},horizontal:function(){this.margin="margin-left";
this.layout="width";this.offset=this.element.offsetWidth;},set:function(A){this.element.setStyle(this.margin,A[0]);this.wrapper.setStyle(this.layout,A[1]);
return this;},compute:function(E,D,C){var B=[];var A=2;A.times(function(F){B[F]=Fx.compute(E[F],D[F],C);});return B;},start:function(B,E){if(!this.check(arguments.callee,B,E)){return this;
}this[E||this.options.mode]();var D=this.element.getStyle(this.margin).toInt();var C=this.wrapper.getStyle(this.layout).toInt();var A=[[D,C],[0,this.offset]];
var G=[[D,C],[-this.offset,0]];var F;switch(B){case"in":F=A;break;case"out":F=G;break;case"toggle":F=(this.wrapper["offset"+this.layout.capitalize()]==0)?A:G;
}return this.parent(F[0],F[1]);},slideIn:function(A){return this.start("in",A);},slideOut:function(A){return this.start("out",A);},hide:function(A){this[A||this.options.mode]();
this.open=false;return this.set([-this.offset,0]);},show:function(A){this[A||this.options.mode]();this.open=true;return this.set([0,this.offset]);},toggle:function(A){return this.start("toggle",A);
}});Element.Properties.slide={set:function(B){var A=this.retrieve("slide");if(A){A.cancel();}return this.eliminate("slide").store("slide:options",$extend({link:"cancel"},B));
},get:function(A){if(A||!this.retrieve("slide")){if(A||!this.retrieve("slide:options")){this.set("slide",A);}this.store("slide",new Fx.Slide(this,this.retrieve("slide:options")));
}return this.retrieve("slide");}};Element.implement({slide:function(D,E){D=D||"toggle";var B=this.get("slide"),A;switch(D){case"hide":B.hide(E);break;case"show":B.show(E);
break;case"toggle":var C=this.retrieve("slide:flag",B.open);B[(C)?"slideOut":"slideIn"](E);this.store("slide:flag",!C);A=true;break;default:B.start(D,E);
}if(!A){this.eliminate("slide:flag");}return this;}});
Дописываем в
style.css след. стиль: (необязательно, но в нем можно будет оформлять ссылки)
#links-block p {
border: 3px solid #CCC;
background: #EBEBEB;
padding: .5em .7em;
width: 30em;
font-size: 1.5em;
font-weight: bold;
line-height: 1.4em;
}
Теперь ищем:
{tags}
В
main.tpl и заменяем на:
<div id="links-block">Анимированные, теги, для, DLE</div>
<script type="text/javascript">
window.addEvent('domready', function() {
var duration = 350; //Время перехода
$each($$('#links-block a'), function(item) {
item.addEvent('mouseover', function(e) {
e.stop();
var colorFx = new Fx.Morph(this, { 'duration': duration });
colorFx.start({
'color': '#FFF',
'background-color': '#33CCFF'
});
});
item.addEvent('mouseout', function(e) {
e.stop();
var colorFx = new Fx.Morph(this, { 'duration': duration });
colorFx.start({
'color': '#C0C0C0',
'background-color': '#EBEBEB'
});
});
});
});
</script>
Вот и готово. Время перехода ставим 600-800, так будет лучше.
Если на странице подключен jquery,то теги работать не будут.