jQuery News Ticker


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.

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>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *