Představujeme MooTools ScrollSpy

Byl jsem nadšený z vydání tohoto pluginu po dlouhou dobu. MooTools ScrollSpy je jedinečný, ale jednoduchý zásuvný modul MooTools, který poslouchá rolování stránky a spouští události podle toho, kam se uživatel na stránce posunul. Nyní můžete spustit konkrétní funkce pomocí několika jednoduchých parametrů.

Zobrazit ukázku 1Zobrazit ukázku 2Zobrazit ukázku 3Zobrazit ukázku 4Stáhnout

Třída MooTools JavaScript

/* scroll spy plugin / class */
var ScrollSpy = new Class({
	
	/* implements */
	Implements: [Options,Events],

	/* options */
	options: {
		min: 0,
		mode: 'vertical',
		max: 0,
		container: window,
		onEnter: $empty,
		onLeave: $empty,
		onTick: $empty
	},
	
	/* initialization */
	initialize: function(options) {
		/* set options */
		this.setOptions(options);
		this.container = $(this.options.container);
		this.enters = this.leaves = 0;
		this.max = this.options.max;
		
		/* fix max */
		if(this.max == 0) 
		{ 
			var ss = this.container.getScrollSize();
			this.options.max = this.options.mode == 'vertical' ? ss.y : ss.x;
		}
		/* make it happen */
		this.addListener();
	},
	
	/* a method that does whatever you want */
	addListener: function() {
		/* state trackers */
		this.inside = false;
		this.container.addEvent('scroll',function() {
			/* if it has reached the level */
			var position = this.container.getScroll();
			var xy = this.options.mode == 'vertical' ? position.y : position.x;
			/* if we reach the minimum and are still below the max... */
			if(xy >= this.options.min && xy ≪= this.max) {
					/* trigger Enter event if necessary */
					if(!this.inside) {
						/* record as inside */
						this.inside = true;
						this.enters++;
						/* fire enter event */
						this.fireEvent('enter',[position,this.enters]);
					}
					/* trigger the "tick", always */
					this.fireEvent('tick',[position,this.inside,this.enters,this.leaves]);
			}
			else {
				/* trigger leave */
				if(this.inside) 
				{
					this.inside = false;
					this.leaves++;
					this.fireEvent('leave',[position,this.leaves]);
				}
			}
		}.bind(this));
	}
});

Možnosti pro ScrollSpy zahrnují:

min:(výchozí hodnota je 0) Minimální hodnota souřadnice X nebo Y v závislosti na režimu.
max:(výchozí hodnota je 0) Maximální hodnota souřadnice X nebo Y v závislosti na režimu.
režim:(výchozí nastavení je 'vertikální') Definuje, zda se má poslouchat posouvání X nebo Y.
kontejner:(výchozí nastavení je okno) Prvek, jehož rolování se má poslouchat.

Události pro ScrollSpy zahrnují:

Tick:Spustí se při každé události posouvání v rámci parametrů min a max. Přijímá jako parametry:
- pozice:objekt s aktuální pozicí X a Y.
- uvnitř:logická hodnota, která určuje, zda uživatel spadá do minimálních a maximálních parametrů
- zadá:kolikrát bylo zadáno minimum/max.
- odchody:počet, kolikrát bylo ponecháno minimum/max.
Enter:Spustí se pokaždé, když uživatel vstoupí do zóny min/max.
- pozice:objekt s aktuální pozicí X a Y.
- zadá:kolikrát bylo zadáno minimum/max.
Opustit:Spustí se pokaždé, když uživatel opustí zónu min/max.
- pozice:objekt s aktuální pozicí X a Y.
- odchody:počet, kolikrát bylo ponecháno minimum/max.

Takže teď, když máme základy, pojďme se podívat na několik příkladů použití.

Příklad 1:"Nahoře nahoře"

V tomto příkladu, když se posunete dolů o definovaný počet pixelů, zobrazí se v pravé dolní části obrazovky odkaz „Posunout nahoru“. Když jste zpět nahoře, ScrollSpy je nasměrován ke skrytí odkazu.

XHTML

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>

CSS

#gototop			{ display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:url(/wp-content/themes/walshbook/images/add_content_spr.gif) 5px -8px no-repeat #eceff5; color:#3b5998; font-size:11px; text-decoration:none; position:fixed; right:5px; bottom:5px; padding:7px 7px 7px 20px; }
#gototop:hover	{ text-decoration:underline; }

MooTools / ScrollSpy JavaScript

window.addEvent('domready',function() {
	/* smooth */
	new SmoothScroll({duration:500});
	
	/* link management */
	$('gototop').set('opacity','0').setStyle('display','block');
	
	/* scrollspy instance */
	var ss = new ScrollSpy({
		min: 200,
		onEnter: function(position,state,enters) {
			$('gototop').fade('in');
		},
		onLeave: function(position,state,leaves) {
			$('gototop').fade('out');
		},
		container: window
	});
});

Zobrazit ukázku 1

Příklad 2:"Přehlídka"

Když kliknete na odkaz v tomto příkladu, okno se posune doprava. Během procesu posouvání ScrollSpy zobrazuje a skrývá bloky obsahu podle toho, kde se v procesu posouvání nachází okno.

XHTML

<!-- SLIDER 1 -->
<div style="position:relative; height:400px;">
<div id="slider1" class="slider" style="margin-left:1000px;">
	<h2>ScrollSpy!</h2>
	<p>
		ScrollSpy is a new plugin that watches where you scroll and allows
		you to perform actions based on the the position of the given
		element!
	</p>
</div>
<!-- SLIDER 2 -->
<div id="slider2" class="slider" style="margin-left:1600px;">
	<h2>ScrollSpy 2!</h2>
	<p>
		Another area!
	</p>
</div>
<!-- SLIDER 3 -->
<div id="slider3" class="slider" style="margin-left:2200px;">
	<h2>ScrollSpy 3!</h2>
	<p>
		You've met another criteria!!
	</p>
</div>
<!-- SLIDER 4 -->
<div id="slider4" class="slider" style="margin-left:2800px;">
	<h2>ScrollSpy 4!</h2>
	<p>
		You've met the last criteria!!
	</p>
</div>
<div style="clear:both;"></div>
</div>
<!-- RIGHT-MOST AREA -->
<div style="float:right;" id="right2"> </div>

CSS

.slider { padding:10px; background:#eee; width:300px; height:300px; float:left; z-index:500; }

MooTools / ScrollSpy JavaScript

window.addEvent('domready',function() {
	
	/* sliders */
	var slide1 = new Fx.Slide('slider1',{
		duration: 400,
		wheelStops: false
	});
	slide1.hide();
	var slide2 = new Fx.Slide('slider2',{
		duration: 400,
		wheelStops: false
	});
	slide2.hide();
	var slide3 = new Fx.Slide('slider3',{
		duration: 200,
		wheelStops: false
	});
	slide3.hide();
	var slide4 = new Fx.Slide('slider4',{
		duration: 200,
		wheelStops: false
	});
	slide4.hide();
	
	/* scrollspy instance */
	var ss1 = new ScrollSpy({
		min: 400,
		max: 700,
		onEnter: function(position,state,enters) {
			slide1.slideIn();
		},
		onLeave: function(position,state,leaves) {
			slide1.slideOut();
		},
		container: window,
		mode: 'horizontal'
	});
	
	/* scrollspy instance */
	var ss2 = new ScrollSpy({
		min: 900,
		max: 1500,
		onEnter: function(position,state,enters) {
			slide2.slideIn();
		},
		onLeave: function(position,state,leaves) {
			slide2.slideOut();
		},
		container: window,
		mode: 'horizontal'
	});
	
	/* scrollspy instance */
	var ss3 = new ScrollSpy({
		min: 1500,
		max: 2300,
		onEnter: function(position,state,enters) {
			slide3.slideIn();
		},
		onLeave: function(position,state,leaves) {
			slide3.slideOut();
		},
		container: window,
		mode: 'horizontal'
	});
	
	/* scrollspy instance */
	var ss4 = new ScrollSpy({
		min: 2200,
		max: 2500,
		onEnter: function(position,state,enters) {
			slide4.slideIn();
		},
		onLeave: function(position,state,leaves) {
			slide4.slideOut();
		},
		container: window,
		mode: 'horizontal'
	});
	
	/* left to right scroll */
	$('show2').addEvent('click',function(e) {
		e.stop();
		var to = $('right2').getPosition();
		to.y = 0; to.x = to.x - 300;
		var scroll = new Fx.Scroll(window,{
			duration: 20000,
			offset: to
		}).start();
	});
	
	
});

Zobrazit ukázku 2

Příklad 3:"Týmové barvy"

Tento základní příklad zobrazuje jinou barvu pozadí v závislosti na tom, kde se na stránce nacházíte.

XHTML

<div id="white" class="color"><h2>The White Nation</h2></div>
<div id="red" class="color"><h2>The Red Nation</h2></div>
<div id="blue" class="color"><h2>The Blue Nation</h2></div>
<div id="green" class="color"><h2>The Green Nation</h2></div>
<div id="black" class="color"><h2>The Black Nation</h2></div>

CSS

.red		{ background:#f00; }
.blue		{ background:#00f; }
.green	{ background:#008000; }
.black	{ background:#000; color:#fff; }
.color	{ height:400px; }

MooTools / ScrollSpy JavaScript

window.addEvent('domready',function() {
	var colors = $$('.color');
	colors.each(function(color,i) {
		var pos = color.getCoordinates();
		var ss = new ScrollSpy({
			min: pos.top,
			max: pos.bottom,
			onEnter: function() {
				$$('div.content').setStyle('background-color',color.get('id'));
			}
		});
	});
});

Zobrazit ukázku 3

Příklad 4:"Ukazatel polohy"

V tomto příkladu hraje světový televizní herec Peter Griffin a zobrazuje snímky na různých pozicích na stránce podle toho, kde uživatel roluje.

XHTML

<div class="zone">
<h2>Area 1</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p>
</div>

<div style="float:right;" class="zone right">
<h2>Area 2</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p>
</div>
<div style="clear:both;"></div>

<div class="zone">
<h2>Area 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p>
</div>

CSS

.zone	{ width:500px; }

MooTools / ScrollSpy JavaScript

window.addEvent('domready',function() {
	/* collect zones */
	var zones = $$('div.zone');
	var imageOffset = { x: 200, y: 50 };
	var posOffset = { x: 0, y: -150 }
	
	/* scroll spy */
	zones.each(function(zone, i) {
		var pos = zone.getCoordinates();
		var right = zone.hasClass('right');
		var peter = new Element('img',{
			opacity: 0,
			src: right ? '/demo/peter-left.jpg' : '/demo/peter-right.jpg',
			styles: {
				position: 'absolute',
				top: pos.top + imageOffset.y,
				left: right ? pos.left - imageOffset.x - 100 : pos.right + imageOffset.x
			}
		}).inject(document.body);
		
		var spy = new ScrollSpy({
			min: pos.top + posOffset.y,
			max: pos.bottom + posOffset.y,
			onEnter: function(position) {
				peter.fade('in');
			},
			onLeave: function(position) {
				peter.fade('out');
			}
		});
	});
});

Zobrazit ukázku 1Zobrazit ukázku 2Zobrazit ukázku 3Zobrazit ukázku 4Stáhnout

ScrollSpy vám poskytuje velké množství funkcí v rámci malého pluginu. Již brzy:ScrollSpy LazyLoad a ScrollSpy LoadMore! Prosím sdílejte nápady a komentáře!

Představujeme MooTools ScrollSpy

Třída MooTools JavaScript

Příklad 1:"Nahoře nahoře"

XHTML

CSS

MooTools / ScrollSpy JavaScript

Příklad 2:"Přehlídka"

XHTML

CSS

MooTools / ScrollSpy JavaScript

Příklad 3:"Týmové barvy"

XHTML

CSS

MooTools / ScrollSpy JavaScript

Příklad 4:"Ukazatel polohy"

XHTML

CSS

MooTools / ScrollSpy JavaScript

Vymažte mezipaměť z kanálu aktiv Rails

Kód pro položení otázky ano/ne v javascriptu

Jak získat index pole z prvku html?

Najděte střed polygonu v JavaScriptu

Vložte pomlčky do javascriptu

Mohu provést vyhledávání DNS (název hostitele na IP adresu) pomocí Javascriptu na straně klienta?