Uso di jQuery per creare una interfaccia tabs per i video

Avendo la necessità di inserire molti link a video pubblici, ho cercato un modo di raggruppare questi video in un unico box, selezionandoli quindi in qualche maniera, in parole povere come se avessi di fronte un televisore con la possibilità di cambiare canale.
Navigando su internet ho trovato la risposta al mio problema, utilizzano le librerie jQuery.

Il risultato è questo:

Per creare questo effetto quindi bisogna scaricare jQuery. e jQuery UI con gli elementi ‘Core’ and ‘Tabs’.
Nel pacchetto

  jQuery UI Video Tabs Demo (23,3 KiB, 166 hits)

• index.htm
• videoteca.css
• scripts.js

Passo 1 – file HTML

Per aggiungere altri video basta aggiungere altri

<div id="vid-x" class="fvid">yyyyyyyyyyy</div>

e quindi altri link

	<li><a href="#vid-x">kkkkkkkkkkkk</a></li>

Passo 2 – file CSS

Modificare a piacere lo stile per cambiare l’aspetto grafico.

Passo 3 – file JS

Può essere incluso all’interno del file html con

<script type="text/javascript">
jQuery(function($) {
  $(document).ready(function() {
	$('#featuredvid').tabs();
  });
});
</script>

Leggi anche

1.   Uso di jQuery per creare una semplice interfaccia tab con immagini per etichette
2.   Aggiungi/Rimuovi/Sposta una riga della tabella con jQuery
3.   Uso di jQuery per aggiungere/rimuovere un campo in un form
4.   PHP – Creare grafici con la libreria PHPGraphLib
5.   Firebug estensione per Mozilla Firefox – come ti modifico una pagina web