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 categoria: Tutorial

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

jQuery News Ticker BBC like: come fare

Pubblicato il 7 maggio 2012 da alemux
Rispondi

bbc like Qualche giorno fa ho avuto il bisogno di realizzare un News Slider in jQuery per un mio cliente, un lavoro non propriamente da pochi minuti. La scelta è ricaduta su un News Ticker simile a quello della BBC, con qualche piccola modifica di funzionamento, giusto per personalizzare un pelo il lavoro.

Chiaramente il numero delle Slide deve essere personalizzato dal cliente, cosi come titolo, testo e fotografie. La definizione della dimensione esatta della fotografia la lasciamo al lato server, al pannello di controllo dietro al sito, siccome ognuno ha il suo, che sia un CMS esistente o un sito realizzato ex novo.

La prima cosa da fare è quella di caricare la libreria jquery; mi salvo il mio bel file dal sito jquery.com e lo metto nella root del sito:

<html>
<head>
<meta charset="utf-8">
<title>Il mio News Ticker BBC like</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="breakingnews.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>

Chiaramente, se volete far puntare la vostra pagina al jquery servito da Google, è sufficiente utilizzare https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js .

Come vedete ho anche creato e collegato il mio bel CSS breakingnews.css.

Il file JSON come archivio dati

Siccome ho detto di preferire un file JSON come fonte dei dati, eccovi il codice:

{
  "results": [
    {
  "macrotitolo":"MacroTitolo 1",
  "titolo": "Titolo 1",
  "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
  "img":"breakingnews_img/001.jpg"
    },
    {
  "titolo": "Titolo 2",
  "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
  "img":"breakingnews_img/002.jpg"
    },
    {
  "macrotitolo":"MacroTitolo 3",
  "titolo": "Titolo 3",
  "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
  "img":"breakingnews_img/003.jpg"
    },
    {
  "titolo": "Titolo 4",
  "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
  "img":"breakingnews_img/002.jpg"
    },
    {
  "macrotitolo":"MacroTitolo 5",
  "titolo": "Titolo 5",
  "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
  "img":"breakingnews_img/003.jpg"
    },
    {
  "titolo": "Titolo 6",
  "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
  "img":"breakingnews_img/002.jpg"
    },
    {
  "macrotitolo":"MacroTitolo 7",
  "titolo": "Titolo 7",
  "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie est id nunc eleifend sed hendrerit neque scelerisque.",
  "img":"breakingnews_img/003.jpg"
    }
  ],
  "record_totali": "7"
}

Il file JSON, così ragionato, è estremamente facile e veloce da generare.
Se volete un servizio facile e veloce per validare il vostro file JSON, cliccate qui.

La cosa importante è inserire, nel campo record_totali, il numero dei record presenti in archivio. In questa maniera facilitiamo la vita allo script, dicendogli direttamente quante miniature creare e quale sia la fine della strip. Come creare il file JSON da ASP o PHP dovrebbe essere piuttosto facile da trovare, se così non fosse, lasciate pure un commento e cercherò di aiutarvi.

Nel prossimo post andremo metteremo in pagina il codice HTML necessario per realizzare il nostro bel News Ticker BBC like.

Se il post ti è piaciuto, se non ti è piaciuto, ma soprattutto se hai voglia di farlo, condividilo su Twitter / Facebook / Google+. Grazie!

Pubblicato in jQuery, Tutorial | Contrassegnato bbc like, html, jquery, json, tutorial | 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