Rogério Lino

Javascript: Jump Menu

Por Rogério Alencar Lino Filho | 14 de março de 2008 | 2 Comentários

Uma grande maioria dos desenvolvedores web não gostam cara padrão dos Jump Menus. Então por que não fazer um?

Pensando assim que fiz um script para gerar um Jump Menu, ou ComboBox se prefirir. Ele é composto por uma <div> (para moldura), uma <span> (para servir como rótulo) e uma lista não-ordenada de links (<ul>).

Para usá-lo, a única coisa que devemos fazer, além de linkar o script ou adicioná-lo no corpo da página, é instanciar o Objeto. E passar como parâmetro um array de array, contendo esse último na primeira posição a url e na segunda o texto a ser exibido. Após isso feito, escolha aonde adicioná-lo (pack) através do id da tag.

Ex:

var itens = Array();

for (var i=0; i<15; i++)

 itens[i] = ['http://rogeriolino.wordpress.com/', 'item ' + (i+1)];var jump = new JumpMenu(itens);

jump.setLabel(' + Click Here');

jump.pack('teste');

Para o visual basta usar de todo o potencial do CSS e estilizar como preferir.

Clique aqui para conferir o exemplo contendo o código.

Tags: , , , , ,

Javascript: Rate this

Por Rogério Alencar Lino Filho | 18 de fevereiro de 2008 | 1 Comentário

Quem nunca viu aquelas “5 estrelas” logo após algum artigo, foto, etc? Pois então, esse script cria uma sequência de links (<a>) de uma quantidade pré-definida para que o visitante possa taxar, classificar, o conteúdo da página. Seu visual é totalmente customizável através de folhas de estilos (CSS). O código está contido na própria página [...]

Tags: , , , , , ,

Javascript: Shake Text

Por Rogério Alencar Lino Filho | 20 de dezembro de 2007 | 1 Comentário

Mais um exemplo em Javascript, agora uma função, creio que conhecida por muitos já, que tem a finalidade de embaralhar o texto contido em uma tag qualquer (embaralhar o texto após passar o mouse por cima). Há duas maneiras de usá-la, uma aplicando em apenas uma tag o evento, e a outra, aplicando o evento [...]

Tags: , , , , , , , ,

Javascript: Code Syntax Highlight

Por Rogério Alencar Lino Filho | 23 de novembro de 2007 | 3 Comentários

Algo que qualquer editor que se prese tem que ter é a capacidade de facilitar a leitura do código utilizando o que se chama Syntax Highlight . O ato de distinguir partes do código com cores diferentes ajudando assim a uma melhor associação do mesmo.O que não ocorria na web até um tempo atrás, quando [...]

Tags: , , , , , , , ,

Javascript: Colorpicker

Por Rogério Alencar Lino Filho | 19 de novembro de 2007 | 1 Comentário

Para quem não conhece, colorpicker é um seletor de cores. Ou seja uma “janela” com n cores predefinidas. Esse exemplo simula o colorpicker da Macromedia, disponível no Flash, Dreamweaver, Fireworks e etc. Como o picker da Macromedia, ele possui um display para pre-visualizar a cor e o seu valor hexadecimal ao passar o mouse sobre [...]

Tags: , , , , , ,

Javascript: DataGrid

Por Rogério Alencar Lino Filho | 11 de outubro de 2007 | 5 Comentários

Há algum tempo queria fazer algo parecido e então tirei um tempo para desenvolver, ou pelo menos tentar, uma espécie de data grid. Este é composto por uma tabela de quantas linhas e colunas desejar, e em cada célula (<td>) contém um <div> e um <input>, no qual se alternam. Para uma hora poder alterar [...]

Tags: , , , ,

Javascript: Password Generator

Por Rogério Alencar Lino Filho | 4 de setembro de 2007 | 1 Comentário

Hoje me deparei com o fato de ter que alterar a senha do FTP, e há algum tempo queria fazer um gerador de senhas. Então não teve momento mais oportuno, com um simples script que transforma um números aleatórios em char e pronto. Está resulvido o meu problema. var Password = function() { this.pass = [...]

Tags: , , , , , , , ,

Javascript: Graphic Generator

Por Rogério Alencar Lino Filho | 1 de abril de 2007 | 8 Comentários

Esses dias um pouco inspirado com a aula de Probabilidade e Estatística, resolvi fazer um script para gerar gráficos de barras. Você cria um novo objeto Grafico (sem acento mesmo – new Grafico(n); ) passando o número de barras como parâmetro e então a partir dele com set’s e get’s você gera o seu gráfico. [...]

Tags: , , , , , ,

Javascript: Image Preloader

Por Rogério Alencar Lino Filho | 21 de março de 2007 | 11 Comentários

Conforme prometido aqui um exemplo de preloader de imagem feito em Javascript: Clique aqui para visualizar var bgColor = “#FFFFFF”; var bgImage = “http://www…/loading.gif”; var bgRepeat = “no-repeat”; var bgPosition = “center center”; var borderWidth = “3px”; var borderStyle = “solid”; var borderColor = “#3366FF”; // var loadImage = function(w, h, url, target) { var [...]

Tags: , , , , , ,

Javascript: Draggable Window

Por Rogério Alencar Lino Filho | 25 de janeiro de 2007 | 18 Comentários

Tem algum tempo já que estava de bobeira e acabei fazendo um exemplo de uma div (janela) arrastável. Simulei uma janela padrão em alguns Sistemas Operacionais, tem a barra superior com o título da janela, o espaço ao centro para o conteúdo e uma barra no final, a statusbar (essa só para incrementar mesmo). Há [...]

Tags: , , , , , , , , ,