Dopo aver iniziato il discorso su come realizzare un News Ticker in jQuery, procediamo all’inserimento del codice HTML in pagina.
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 | <html> <head> <meta charset="utf-8"> <title>News Ticker BBC like</title> <link href="breakingnews.css" rel="stylesheet" type="text/css"> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> </head> <body> <div id="BreakingNews"> <div class="TitleContainer"> <div class="label"></div> <div class="Carousel"> <ul></ul> </div> </div> <div class="ItemsContainer"> <div class="ulContainer"> <ul></ul> </div> </div> <div class="ControllersContainer"> <div class="back"></div> <div class="next"></div> <div class="back_detail"><img src="breakingnews_img/003.jpg"></div> <div class="next_detail"><img src="breakingnews_img/003.jpg"></div> </div> </div> </body> </html> |
Può sembrare incredibile che tutto il codice HTML da inserire sia questo, ma il mio obiettivo era proprio questo: mantenere il codice in pagina il più compresso possibile, e lasciar fare tutto a jQuery.
La struttura della cartella contenente i file del News Ticker è piuttosto semplice:
./
./breakingnews_img [folder]
./breakingnews.css –> stili
./breakingnews.js –> codice js
./breakingnews.json –> base dati
./breakingnews.html –> pagina principale html
./jquery-1.7.2.min.js –> libreria jquery !important
Come potete vedere nel codice HTML, manca ancora il riferimento al file .js.
Io l’ho messo alla fine della pagina, prima della chiusura del body, voi potete anche includere i vari bindings utilizzando il codice jquery:
001 002 003 004 005 | $(document).ready(function(){ // --> codice js }); |
Se volete procedere come ho fatto io, inserite alla fine della vostra pagina HTML il collegamento al file .js:
001 002 003 004 | ... <script src="breakingnews.js" language="javascript"></script> </body> </html> |