Vertical Ticker עם MooTools

אני חושב שיש בערך מיליון Vertical news ticker שעובדים עם jQuery, אבל קשה למצוא Vertical ticker מספיק טוב שעובד עם MooTools. לפני מעט זמן הייתי צריך ליצור vertical news ticker ולמרבה הפליאה לא מצאתי בקלות כלי שעושה משהו כזה. אי לכך נרתמתי למשימה וריתכתי כלי כזה.

ראשית, לדוגמא:

איך הפלא הקטן הזה נעשה? ראשית, יצרתי את המבנה הבא:

<div id='ticker_container'>
<ul id='TickerVertical'>
<li>אייטם מספר 1</li>
<li>אייטם מספר 2</li>
<li>אייטם מספר 3</li>
<li>אייטם מספר 4</li>
<li>אייטם מספר 5</li>
<li>אייטם מספר 6</li>
<li>אייטם מספר 7</li>
<li>אייטם מספר 8</li>
<li>אייטם מספר 9</li>
</ul>
</div>

אחרי כן יש ליצור את ה-CSS:

#TickerVertical {
width:200px;
height:300px;
display:block;
float: right;
list-style:none;
margin:0;
padding:0;
position: relative;
}
#TickerVertical li {
display:block;
width:200px;
color:#333333;
text-align:right;
font-size:11px;
margin:0;
padding:6px;
float:right;
}
#ticker_container {
 height: 100px;
    overflow: hidden;
    padding-right: 10px;
    position: relative;
    text-align: right;
    width: 190px;
}

אחרי כן יש לדאוג שגרסת MooTools 1.2 ומעלה תהיה מותקנת – להכניס משהו כזה לתוך האתר שלכם:

 <script type="text/javascript" src="/internet_files/mootools/mootools.js">

ואחרי כן – לקוד עצמו – שימו לב ליישום שלו בתחתית הדף ולאפשרויות השונות:

var Ticker = new Class({
				setOptions: function(options) {
					this.options = Object.extend({
						speed: 1500,
						delay: 2000,
						onComplete: Class.empty,
						onStart: Class.empty
					}, options || {});
				},
				initialize: function(el,options){
					this.setOptions(options);
					this.el = $(el);
					this.items = this.el.getElements('li');
					var w = 0;
					var h = 0;

					w = this.el.getSize().x;
					this.items.each(function(li,index) {
						h += li.getSize().y;
					});
					
					this.el.setStyles({
						position: 'absolute',
						top: 0,
						left: 0,
						width: w,
						height: h
					});
					this.fx = new Fx.Morph(this.el,{duration:this.options.speed,onComplete:function() {
						var i = (this.current==0)?this.items.length:this.current;
						this.items[i-1].injectInside(this.el);
						this.el.setStyles({
							left:0,
							top:0
						});
					}.bind(this)});
					this.current = 0;
					this.next();
				},
				next: function() {
					this.current++;
					if (this.current >= this.items.length) this.current = 0;
					var pos = this.items[this.current];
					this.fx.start({
						top: -pos.offsetTop
					});
					this.next.bind(this).delay(this.options.delay+this.options.speed);
				}
			});
window.addEvent('domready', function() {
	var vert = new Ticker('TickerVertical',{speed:1000,delay:2000'});
});

ניתן לשנות את המהירויות של ההחלפה ומשך הזמן שכל חדשה מתעכבת. מאד פשוט וקל להטמעה.