Vertical Ticker עם MooTools

כך יוצרים חלון חדשות מתגלגל יחד עם MooTools - לשימוש בג'ומלה או בכל מקום אחר שבו יש שימוש בפריימוורק הנפלא הזה

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

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

  • אייטם מספר 1
  • אייטם מספר 2
  • אייטם מספר 3
  • אייטם מספר 4
  • אייטם מספר 5
  • אייטם מספר 6
  • אייטם מספר 7
  • אייטם מספר 8
  • אייטם מספר 9

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


<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'});
});

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

פוסטים נוספים שכדאי לקרוא

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

פתרונות ומאמרים על פיתוח אינטרנט

SSG עם next

אחרי שלמדנו במאמר הקודם מה זה SSR והבנו שלא מדובר בקליע כסף שפותר את כל הבעיות שלנו, נלמד על SSG שיכול להקל על כמה מהבעיות של SSR.

גלילה לראש העמוד