logo

Posuvníky pro iPhone s iScroll

Od té doby, co máme webové prohlížeče a JavaScript, jsme se rozhodli nahradit nativní funkce prohlížeče, a to z mnoha důvodů. Ať už je nativní vzhled nebo funkce ošklivé, nefunguje stejně v různých prohlížečích nebo není tak bohatý na funkce, jak by měl být, vždy jsme posouvali limity prohlížeče, aby byl lepší. Jednou z funkcí, kterou jsme se zoufale snažili emulovat, jsou posuvníky. iScroll, docela nová rolovací knihovna, odvedla výjimečnou práci při emulaci rolování v desktopových i mobilních prohlížečích. iScroll také umožňuje posouvání prvků s přetečením na starších verzích Mobile Safari. Pojďme se podívat na iScroll!

Desktop DemoMobile Demo

HTML

iScroll vyžaduje vzor dvou DIV pro deklaraci, kde bude iScroll použit. První DIV je obal, druhý DIV je posouvatelná oblast:

<div id="wrapper">
	<div id="scroller">
		<div style="padding:15px 30px;"> <!-- padding for content -->
		
			<!-- content goes here -->
			
		</div>
	</div>
</div>

iScroll vytvoří a vloží posuvník do wrapper DIV. Obsah je uložen v scroller DIV.

CSS

CSS je místo, kde může být iScroll trochu nejasný. Aby iScroll fungoval optimálně, musí být oba segmenty wrapper i scroller DIV umístěny absolutně a stylově upraveny na šířku 100 %:

#wrapper {
	position:absolute;
	z-index:1;
	top:0; 
	bottom:0; 
	left:0;
	width:100%;
	overflow:auto;
}

#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

Výsledkem je, že třetí DIV struktury potřebuje dostatek odsazení vpravo, aby text a posuvník byly dostatečně daleko od sebe. Ujistěte se, že jste tyto prvky umístili správně, jinak iScroll nebude vůbec fungovat (jak jsem zjistil těžce) !

JavaScript

Nejviditelnější částí používání iScroll je zahrnutí jeho souboru .js:

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

Vzhledem k tomu, že je nyní na stránce k dispozici iScroll, dalším krokem je vytvoření instance iScroll, která vyhovuje potřebám vašeho požadovaného použití. Nejjednodušší použití poskytuje pouze ID obálky:

var scroller = new iScroll('wrapper');

Úžasný; nativní posuvník stránky zmizí a nahradí ho posuvník ve stylu iOS! Ale jako každá dobrá knihovna JavaScriptu, iScroll poskytuje řadu funkcí, které vám umožňují přizpůsobit si posuvník. Možnosti zahrnují nastavení příznaků pro nastavení odrazu, hybnosti, slábnutí a skrytí a zda mají být posuvníky povoleny svisle i vodorovně. Zde je další příklad toho, jak můžete vytvořit posuvník pro obnovení:

var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;

function pullDownAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.insertBefore(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.appendChild(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: true,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
			}
		},
		onScrollMove: function () {
			if (this.y > 5 && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
				this.minScrollY = -pullDownOffset;
			} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';				
				pullDownAction();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

Vzhledem k tomu, že žijeme ve světě webových stránek založených na AJAX, které umožňují přicházet a odcházet obsahu, volání metody refresh je vše, co musíte udělat, aby iScroll přehodnotil pozici a velikost posuvníku:

// When the AJAX is done, refresh the scrollbar sizing and positioning...
scroller.refresh();

Je také důležité poukázat na to, že iScroll umožňuje přibližování a přibližování, stejně jako přitahování k prvkům:

var myScroll = new iScroll('wrapper', {
	/* snap: true, */ 		// Would snap logically
	snap: "p",				// Snaps to each "P" tag
	momentum: false,
	hScrollbar: false,
	vScrollbar: false 
});

A konečně, iScroll-Lite je k dispozici pro ty, kteří chtějí podporovat pouze mobilní prohlížeče (iScroll umožňuje také podporu pro stolní počítače). Ta moje zlomyslná část by dala přednost posuvníkům ve stylu iOS místo nativních posuvníků prohlížeče!

Desktop DemoMobile Demo

Možná moje oblíbená část iScroll je, že je to samostatná knihovna; není vyžadována žádná externí knihovna JavaScript. iScroll má mnoho konfiguračních parametrů, takže vám doporučuji navštívit stránku iScroll, kde najdete vše, co můžete dělat. iScroll Mattea Spinelliho je vynikající dílo; uchopte iScroll a začněte ovládat své posuvníky ještě dnes!