OneBlackCat

Web Design, condivisioni, pensieri…

OneBlackCat

Menù principale

Vai al contenuto principale
Vai al contenuto secondario
  • Home
  • Una guida in più
  • Contatti
  • AAA blogger cercasi

Archivi tag: news ticker

jQuery News Ticker BBC like: codice html

Pubblicato il 8 maggio 2012 da alemux
Rispondi

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>
Pubblicato in jQuery, Tutorial | Contrassegnato bbc like, jquery, news ticker | Lascia una risposta

Articoli recenti

  • IIRF e IIS8: problema RedirectRule
  • SSL, IIS ed SNI: un calvario non da poco
  • Web Design: allineare un DIV in basso rispetto ad un altro DIV
  • Aggiungere le gestures a jQuery
  • Cordova non funziona? Forse la soluzione è semplice…

Cerca nel sito

Categorie

  • App e Software
  • Classic Asp
  • Cordova / Phonegap
  • CSS
  • Divagazioni
  • Facebook
  • Interviste
  • jQuery
  • jQuery Mobile
  • Recensioni
  • SEO
  • Siti
  • SSL-IIS
  • Tutorial
  • Videotutorial
  • Web Design
  • Web News
Proudly powered by WordPress