Estou postando um exemplo de tv de notícias feito com javascript.
O que esse script faz?
Ele carrega um array com as noticias que eu quero exibir;
Cria os links de avançar e voltar.
vamos aos códigos:
tv.html
<html>
<head>
<title>exemplo de tv de noticias</title>
<script src="js/yahoo-dom-event.js"></script>
<script src="js/tv.js"></script>
<script>
var showText = function()
{
this.text = new Array( "text1" , "text2" , "text3" );
var content = new Tv( "viewText" , this.text );
}
window.onload = showText;
</script>
</head>
<body>
<div id="viewText"></div>
</body>
</html>
explicando: no head, eu crio o array com as noticias que eu quero exibir na tvzinha, crio o objeto Tv, passo a id da tag que eu quero exibir a tv e carrego esse array.na body eu tenho uma div com id viewText que é aonde eu vou exibir minha tv.tv.js
</pre>
var Tv = function( element , data , options )
{
if( !element )
alert( "HTMLElement or HTMLElement.id is required" );
this.element = YAHOO.util.Dom.get( element );
this.data = data || [];
this.options = options || {};
this.init();
}
Tv.prototype = {
current: 0,
width: "300px",
height: "200px",
nextValue: "Avançar",
previousValue: "Voltar",
init: function()
{
this.current = this.options.start || this.current;
this.render();
},
render: function()
{
var height = this.options.height || this.height;
var width = this.options.width || this.width;
var previousValue = this.options.previousValue || this.previousValue;
var nextValue = this.options.nextValue || this.nextValue;
var slide = document.createElement( "DIV" );
slide.style.height = height;
slide.style.width = width;
slide.innerHTML = this.data[this.current];
slide.id = "slide_" + this.element.id;
slide.style.backgroundColor = "#eee";
var grid = document.createElement( "DIV" );
var clear = document.createElement( "DIV" );
clear.style.clear = "both";
var nextButton = this.createButton( nextValue , "click" , this.next , "next" );
var previosButton = this.createButton( previousValue , "click" , this.previous , "previous" );
grid.appendChild( nextButton );
grid.appendChild( previosButton );
this.element.appendChild( slide );
this.element.appendChild( grid );
this.element.appendChild( clear );
},
createButton: function( label , action , func , labelClass )
{
var button = document.createElement( "DIV" );
button.className = labelClass;
var link = document.createElement( "A" );
link.href="#this";
link.innerHTML = label;
YAHOO.util.Event.on( link , action , func , this , true );
button.appendChild( link );
return button;
},
next: function()
{
this.current++;
if( this.current == this.data.length )
this.current = 0;
YAHOO.util.Dom.get( "slide_" + this.element.id ).innerHTML = this.data[this.current];
},
previous: function()
{
this.current--;
if( this.current < 0 )
this.current = ( this.data.length - 1 );
YAHOO.util.Dom.get( "slide_" + this.element.id ).innerHTML = this.data[this.current];
}
}
<pre>
explicando o código, começo criando meu objeto que vai receber 3 parâmetros, o primeiro element recebe o id da tag da onde agente quer exibir a tv, o segundo data é o array com as noticias e o terceiro é um opcional que eu posso estar alterando o tamanho da tv, altura etc.
depois eu crio o constructor da tv, passando os valores padroes e criando a tv propriamente dita, crio o botao, que vai ser meu link de avancar e voltar.
obs: baixar o yahoo-dom-event.js do site do YAHOO! http://developer.yahoo.com/yui/
é isso pessoal!
