Huh, nu credeam că am să mai revăd tickere. Îmi amintesc primul sit (mai mare) pe care l-a făcut – era în 1999 – avea un ticker central, sub imaginea principală. Evident, cu ultimele noutăţi. Astăzi tickerele nu au dispărut chiar complet, dar sunt rare. De fapt jQuery News Ticker se inspiră dintr-un ticker existent: pe situl BBC. Folosirea lui este foarte simplă, după cum puteţi vedea mai jos.
![](<iframe src="http://www.cnet.ro/wp-content/uploads/tutoriale/diverse/ticker/index.html" width=700 height=90 frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>)
Interesant este că tickerul se poate „adăpa”, adică să îşi ia conţinutul, şi dintr-un feed. Desigur, trebuie să fie din acelaşi domeniu, datorită limitărilor JavaScript. Pentru a prelua din exterior trebuie apelat la soluţii ocolitoare (ex: preluat prin PHP şi generat un XML).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ticker</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="ticker-style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.ticker.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#js-news').ticker({
speed: 0.10,
fadeInSpeed: 600,
titleText: 'Noutăţi:'
});
});
</script>
<div id="ticker-wrapper" class="no-js">
<ul id="js-news" class="js-hidden">
<li class="news-item"><a href="#">Ştirea unu este nemaipomenită, expozivă şi incitantă.</a></li>
<li class="news-item"><a href="#">Ştirea a doua e superbă şi inexistentă. Mergeţi mai departe.</a></li>
<li class="news-item"><a href="#">Ştirea a treia face dezvăluiri despre ştirea anterioară. Sâc, sâc!</a></li>
<li class="news-item"><a href="#">Ştirea a patra e prea la coadă ca să mai aibă relevanţă.</a></li>
</ul>
</div>
</body>
</html>
Se încarcă...
0 comentarii