Este post pretende dar uma pequena introdução ao uso da LibSAPO.js e aos seus componentes mais básicos.
A LibSAPO.js tem como dependência principal o objecto SAPO.
Deste objecto dependem todas as outras classes utilitárias e widgets do SAPO. Assim, para a utilização de qualquer outra classe, será necessário incluir o ficheiro https://js.sapo.pt/SAPO/
Este é um ficheiro muito pequeno que apenas trata da inicialização da lib e inclui alguns utilitários básicos necessários para o uso da lib.
O objecto SAPO e o método s$, que é um alias para o método document.getElementById são as únicas variáveis globais declaradas pela LibSAPO.js. Mesmo assim, apesar não "poluirmos" o DOM, disponibilizamos mais dois métodos, como extensão do objecto Function:
bindObj() e bindObjEvent()
Para quem está familiarizado com o Prototype, estes métodos são semelhates ao bind() e ao bindAsEventListener().
Sem a adição de quaisquer módulos, o objecto SAPO fornece os seguintes métodos:
SAPO.namespace() - cria o namespace no objecto "SAPO"
SAPO.Browser - Objecto que nos dá a informação do browser. Deve apenas ser usado em casos muito específicos, pois não é boa prática detectar funcionalidades pela designação do browser, mas sim pela detecção da funcionalidade.
As propriedades que podemos encontrar são:
Novo widget na LibSAPO.js :-) É apenas um simples carrossel. Tem várias opções, mas este é apenas um exemplo duma implementação simples.
A documentação está neste link.
A source aqui.
E o sample aqui.
Exemplo:
--------------------------------------
Code:
-------------------------------
<!--- SimpleSlide --> <div id="sapo_widget_simpleslide" style="position:relative;"></div> <script type="text/javascript"> // Food for Carrossel var rawData = [ { url: 'http%3A%2F%2Fjs.sapo.pt%2F', img: 'https://js.sapo.pt/Assets/Images/SimpleSlide/Sample01.png', title: 'SAPO::Widget.SimpleSlide - 1' }, { url: 'http%3A%2F%2Fjs.sapo.pt%2F', img: 'https://js.sapo.pt/Assets/Images/SimpleSlide/Sample02.png', title: 'SAPO::Widget.SimpleSlide - 2' }, { url: 'http%3A%2F%2Fjs.sapo.pt%2F', img: 'https://js.sapo.pt/Assets/Images/SimpleSlide/Sample03.png', title: 'SAPO::Widget.SimpleSlide - 3' } ]; new SAPO.Widget.SimpleSlide({ target: 'sapo_widget_simpleslide', id: 'sapo_widget_simpleslide_sample', delay: 6, width: '480px', height: '211px', data: rawData, play:false }); </script>
. SAPO
. SAPO.Widget.SimpleSlide o...