Artigos com o marcador web 2.0

Dual select, jQuery

27/08/08

Escrito por admin em jQuery

Nenhum comentário

Uma solução simples para, implementar em um formulario, selecionar itens dentro e uma lista de uma forma simples e visual.


[{"uf":["SC","SP","AM","RJ","RS"]}]

base: “kdualBase.tpl”,
url: false, // arquivo carregado
data: {}, // dados anviados para o PHP
attr: [], // atributos vindos do json que será colocado no TAG do markup
name: “selected”, // nome o input que será enviado pelo form
maximo: 0, // maximo de itens selecionados
direcao: “baixo”, // cima ou baixo
busca: false, // formulario de busca
origem: “.KD-list-A”, // lista de origem local onde vai ser montado a lista
destino: “.KD-list-B”, // destino
texto: “option”,
id: “id”,
change: function(){ return true }, // executa a função quando seleciona ou remove
beforeSend: function(){ return true }, // executa a função ao solicitar a lista
success: function(){ return true } // executa essa função quando a lista é carregada

kdual-1.1.jquery.js

, ,

Botao pra web. [base]

11/06/08

Escrito por admin em Photoshop

Nenhum comentário

Vamos ver como criar uma botão bem simpático e fácil de fazer e editar para colocar no seu site.

  1. Selecione “Rounded Rectangle” (Retângulo arredondado).
  2. Mude o “Raduio” (Raio) para ’8 px’, ou um valor que desejar depende do quanto você quer que seu botão fuque arredondado, eu sugiro valores pequenos, fica uma coisa mais sutil.
  3. Crie um retângulo na cor que desejar.

primeira

Clique com o botão direito sobre a camada do retângulo, e em seguida selecione a opção “blending oprions”.

Segunda

Selecione a opção “Drop Shadow” (Sompra):
E deixe as configurações de acordo como está na imagem a seguir.
Opacidade=40%; Distancia=1; Tamanho 6; O restante mantem o padrão.
Obs: O “Size” (Tamanho) da sombra pode varias de acordo com a sua necessidade e com o tamanho do botão.

terceira

Selecione a opção “Inner Glow”:
E deixe as configurações de acordo como está na imagem a seguir.
Blend Mode= Normal; Opacidade=25%; Cor=preto (#000000); Tamanho 30; O restante mantem o padrão.
Obs:O “Size” (Tamanho) da sombra pode varias de acordo com a sua necessidade e com o tamanho do botão.

quarta

Selecione a opção “Gradient Overlay”:
E deixe as configurações de acordo como está na imagem a seguir.
Blend Mode= Overlay; Opacidade=45%; Rverse=selecionado; Gradiente= branco para preto; O restante mantem o padrão.

quinta

O resultado deve ser algo como:
resultado 01

Dublique a camada, deixe-a na cor branca (#FFFFFF), e limpe o estilo da camada, assim como a imagem a seguir:
Sexta

Segue…

, , , ,