Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17422
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como usar ícones do jQuery UI

21-09-2012 17:47

Essa é uma dica para quem deseja usar os ícones oferecido junto com jQuery UI. Segue um exemplo.

Imagem

<style> .class{ width: 16px; height: 16px; background-image: url(ui-icons_222222_256x240.png); background-position: 0px 0px; } </style>


<div class="class">&nbsp;</div>

Como pode ser observado, cada figura tem o tamanho de 16x16. Com essa linha, eu pego exatamente a primeira figura.

background-position: 0px 0px;

Caso eu queira pegar a segunda figura de cima para baixo, esquerda para direita, eu uso

background-position: 0px -16px;

Observe que sempre terá relação a multiplicação por 16.

segunda figura

background-position: 0px -32px;

terceira figura

background-position: 0px -48px;

Já para movimentar para pegar as figuras horizontalmente, eu uso o seguinte para a segunda figura

background-position: -16px 0px;

terceira figura

background-position: -32px 0px;

etc...

Agora um exemplo para pegar a segunda figura da segunda linha, cima para baixo, esquerda para direita.

background-position: -16px -16px;

E por ai vai, sempre usando a relação do 16 multiplicado.

Lembrando que o valor negativo é usado porque o estilo está movendo a figura para esquerda, ou para cima. A posição 0px 0px é a figura parada na primeira posição.

Essa relação é bem legal porque você usa uma única figura para várias coisas na página. Tornando o carregamento da mesma mais leve.

Outra referência icones-do-jQuery-UI-CSS-FrameWork_3_5475.html
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Primeiras postagens
Primeiras postagens
Mensagens: 7
Sexo: Masculino

Como usar ícones do jQuery UI

04-12-2013 08:06

cara que tal uma dica bem simples, como utilizar o framework da jQuery e fazer como eles:

<span class="ui-icon ui-icon-alert"></span>

Eis que és mais simples ;)
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17422
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como usar ícones do jQuery UI

04-12-2013 10:48

Sim, bem mais prático.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado