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>
0 comentarii