Page 60 - Locaweb - Edição 37
Basic HTML Version
lw
programação
60
locaweb
JQuery
jQuery Collapse
Esta tem utilidade simples, bastante
fácil de construir. Entretanto, ela
potencializou o efeito de expandir e
recolher seções de uma página. Ela
permite aplicação de efeitos CSS 3,
binding de eventos e outros efeitos
visuais de forma prática e muito
simples. Basta, além de você adicionar
a referência ao plugin, informar o
atributo data-collapse nas divs que
receberão o efeito.
<script src="jquery.min.js"></script>
<script src="jquery.collapse.js"></script>
<script>
$(function(){
$("input, button").uniform();
});
</script>
<link rel="stylesheet" href="css/uniform.
default.css" type="text/css" media="screen"
charset="utf-8" />
</head>
<body>
<div id="exemplo" data-collapse>
<h2>Div de Exemplo</h2>
<ul>
<li>Javascript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
<h2>Segunda Div</h2>
<div>
<p>Conteúdo do segundo
painel</p>
</div>
</div>
</body>
Caso o desenvolvedor não queira
algo intrusivo em seu HTML, é possível
manipular os elementos que irão compor
seu bloco de div colapsada por meio
de Javascript. Isso é demonstrado no
exemplo a seguir:
<script>
$("#exemplo").collapse({
show: function() {
this.slideDown(60);
},
hide: function() {
this.slideUp(40);
},
accordion: true
});
</script>
Uniform
/
O Uniform é um plugin estilizador
de formulários, deixando os forms
da página com um visual leve e
agradável de maneira prática. Para
aplicar a estilização do formulário,
basta acrescentar o javascript e o CSS
baixados da página do projeto em seu
HTML e referenciar os elementos que
terão o estilo aplicado por meio de
nome do elemento, classe ou id, com a
mesma sintaxe do jQuery. A estilização
se dá toda por meio da técnica de
sprite aplicada às imagens que vêm no
pacote de download da ferramenta (isso
permite que você crie suas próprias
imagens para estilizar o formulário da
maneira que desejar).
<script src="jquery.js" type="text/
javascript"></script>
<script src="jquery.uniform.min.js" type="text/
javascript"></script>
<script>
$(function(){
$("input, button").uniform();
});
</script>
<link rel="stylesheet" href="css/uniform.
default.css" type="text/css" media="screen"
charset="utf-8" />
</head>
<body>
<form action="pagina.cfm"
method="post">
<input name="texto" type="text"
value="Olá!" size="20" maxlength="20" />
<input name="btnClique" type="button"
value="Clique aqui" />
</form>
</body>
Na página do Uniform ainda é
possível que você envie um tema
criado para que eles aprovem e
possam disponibilizar para os outros
desenvolvedores. No endereço
http://
uniformjs.com/themer.html
, existe um
gerador de tema, onde você pode definir
medidas para as imagens que irão
compor a figura principal deste plugin
(em que é aplicada a técnica de sprite).
A página não só gera o código como
também orienta a maneira com a qual
deve ser salvo o documento.
Vale conferir:
jQuery UI
) –
obviamente, é a biblioteca de interface
mais famosa, por fazer parte do próprio
projeto do jQuery. Tem uma vasta
variedade de elementos, personalizações
e interatividade.
FitVids
/
) – um
plugin para jQuery no qual os vídeos da
sua página se adaptam de uma melhor
maneira ao espaço existente.
Grumble.js
.
github.com/grumble.js/
) – plugin
para jQuery que possibilita a criação e
estilização de tooltips mais poderosos.
FerroSlider
.
alessandroferrini.it/lab/jQueryPlugins/
ferroSlider/docs/index.php
) – poderoso
plugin para efeito de slide entre
elementos em várias direções, com
foco maior emwebpages desenvolvidas
para aparelhos móveis.
