Dopo aver iniziato il discorso su come realizzare un News Ticker in jQuery, procediamo all’inserimento del codice HTML in pagina.
<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:
$(document).ready(function(){
// --> codice js
});
Se volete procedere come ho fatto io, inserite alla fine della vostra pagina HTML il collegamento al file .js:
...
<script src="breakingnews.js" language="javascript"></script>
</body>
</html>