Pagina inicial » Codificação » Criando um Controlador de Volume com o Controle Deslizante da UI do jQuery
Criando um Controlador de Volume com o Controle Deslizante da UI do jQuery
Se você é um caçador freebies, é provável que tenha baixado várias interfaces de usuário (UI) do PSD. Alguns deles são realmente incríveis e poderiam economizar nosso tempo criando protótipos do design em que estávamos trabalhando..
Nesta postagem, codificaremos uma interface do PSD e a transformaremos em algo mais funcional. Vamos codificar o seguinte controle deslizante da interface do usuário do PSD a ser aplicado como o tema do controle deslizante da interface do usuário do jQuery.
Contudo, por favor tome nota que este tutorial é destinado a níveis intermediários de experiência. Dito isto, ainda é relativamente fácil de seguir, desde que você esteja bastante familiarizado com CSS e jQuery.
Tudo bem, agora vamos começar.
Etapa 1: a interface do usuário do jQuery
Obviamente, precisamos do jQuery e da biblioteca de interface do usuário do jQuery, e temos duas opções para utilizá-los. Primeiro, podemos vincular o jQuery e a interface do usuário do jQuery diretamente do CDN: CDN da API do Ajax do Google, CDN do Microsoft e CDN do jQuery, há muitas vantagens de usar o arquivo CDN hospedado quando colocamos nosso site on-line.
Mas, como só trabalharemos offline, usaremos o segundo caminho ao invés.
Vamos baixar e personalizar a biblioteca do jQuery UI a partir da página de download oficial. Como só precisamos do plugin Slider, vamos selecionar apenas a biblioteca Slider junto com suas dependências e deixar as outras. Dessa forma, os arquivos que usamos serão muito mais finos e poderão ser carregados mais rapidamente. Depois disso, vincule todas as bibliotecas ao documento HTML, preferencialmente na parte inferior da página ou antes do fechamento
tag para ser exato.
Etapa 2: marcação HTML
A marcação para o controle deslizante é muito simples. Enviamos todas as marcações necessárias - a dica de ferramenta, o controle deslizante e o volume - dentro de um HTML5 seção tag. A interface do usuário do jQuery irá gerar automaticamente o restante.
Etapa 3: instalar a interface do usuário do controle deslizante
O snippet abaixo instalará o Slider na página, mas aplica somente a configuração padrão.
$ (function () $ ("#slider") .slider (););
Então aqui vamos melhorar um pouco o controle deslizante adicionando outras configurações.
Primeiro, nós armazenamos o elemento slider como uma variável.
var slider = $ ('# slider'),
Em seguida, definimos o valor padrão mínimo do controle deslizante como 35, quando é carregado pela primeira vez.
slider.slider (intervalo: "min", valor: 35,);
Neste ponto, não veremos nada no navegador ainda, porque a interface do usuário do jQuery é basicamente gerando apenas a marcação. Então, precisamos aplicar alguns estilos para começar a ver o resultado visualmente no navegador.
Etapa 4: os estilos
Antes de prosseguir, precisamos de alguns recursos do arquivo de origem do PSD, como a textura de fundo e o ícone.
Nós não vamos falar sobre como fatiar Neste artigo, vamos nos concentrar apenas no código. Se você não souber como dividir, assista ao seguinte screencast antes de continuar.
Convertendo um Design de PSD para HTML - Nettuts+
Tudo bem, agora vamos começar a adicionar os estilos.
Vamos começar posicionando o controle deslizante no centro da janela do navegador e anexar o plano de fundo que havíamos cortado do PSD para o corpo.
body background: url ('… /images/bg.jpg') repita o canto superior esquerdo; seção largura: 150px; altura: auto; margin: 100px auto 0; posição: relativa;
Em seguida, vamos aplicar os estilos para a dica de ferramenta, o volume, a maçaneta, o slider alcance e a controle deslizante em si.
Nós faremos essa parte por parte, começando com…
Slider
Como não definimos o valor máximo para o Slider em si, a interface do usuário do jQuery aplicará o padrão; isso é 100. Portanto, podemos também aplicar 100 (px) para o controle deslizante largura.
Nós modificamos o ícone de volume um pouco para atender a nossa ideia. A ideia é que vamos criar um efeito para levante a barra de volume gradualmente de acordo com o valor do controle deslizante. Tenho certeza de que muitas vezes você viu esse efeito em uma interface de usuário do media player.
O intervalo do controle deslizante terá uma cor gradiente ligeiramente branca.
.ui-slider-range background: gradiente linear (top, #ffffff 0%, # eaeaea 100%); posição: absoluta; fronteira: 0; top: 0; altura: 100%; raio de fronteira: 25 px;
Passo 5: O Efeito
Nesta etapa, vamos começar a trabalhar no efeito especial do Slider.
Tooltip
Neste ponto, a dica não tem conteúdo ainda, então vamos preenchê-la com o valor do controle deslizante. Além disso, a posição horizontal da dica de ferramenta corresponderá à posição da alça.
Primeiro de tudo, nós armazenamos o elemento tooltip como uma variável.
var tooltip = $ ('. tooltip');
Em seguida, definimos o efeito da dica de ferramenta que mencionamos acima dentro do Slide Event.
slide: function (event, ui) var valor = slider.slider ('valor'), tooltip.css ('esquerda', valor) .text (ui.value);
Mas também queremos que a dica de ferramenta seja escondida inicialmente.
tooltip.hide ();
Depois disso, quando o lidar com está prestes a começar a deslizar, será mostrado com um efeito de fade-in.
start: function (event, ui) tooltip.fadeIn ('rápido'); ,
E, quando o usuário parar de deslizar a alça, a dica de ferramenta desaparecerá e ficará oculta.
stop: function (event, ui) tooltip.fadeOut ('rápido'); ,
Volume
Como já mencionamos acima no Seção de estilos, nós planejamos o ícone de volume para mudar correspondentemente com a posição do manipulador ou para ser exato, o valor do controle deslizante. Então, vamos aplicar a seguinte declaração condicional para criar esse efeito.
Mas, em primeiro lugar, armazenamos o elemento de volume, bem como o valor do controle deslizante como uma variável.
volume = $ ('. volume');
Então nós começamos a declaração condicional.
Quando o valor do controle deslizante é menor ou igual a 5 o ícone de volume não terá barras, indicando que o volume está muito baixo, mas quando o valor do controle deslizante estiver aumentando, a barra de volume também começará a aumentar..
if (valor <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ;
Coloque todos juntos
Tudo bem, caso você esteja confuso com todas as coisas acima, não seja. Aqui está o atalho. Coloque todos os seguintes códigos no seu documento.
Tudo bem, vamos agora ver o resultado no navegador.
Demonstração
Fonte de download
Conclusão
Hoje, criamos com sucesso um tema de interface do usuário mais elegante do jQuery, mas ao mesmo tempo também traduzimos com êxito uma interface de usuário do PSD para um controlador de volume funcional.
Esperamos que este tutorial inspire você e possa ajudá-lo a entender como transformar um PSD em um produto mais utilizável.
Por fim, se você tiver alguma dúvida sobre este tutorial, fique à vontade para adicioná-lo na seção de comentários abaixo.
