jQuery: 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.zip (23,3 KiB, 595 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>