Botão de busca com jQuery e CSS3

botao de busca com jquery e css3

Botão de busca com jQuery e CSS3

Este formulário de busca é muito bonito e fácil de ser manipulado, contudo vale lembrar dos problemas com relação ao nosso querido Internet Explorer, como suas versões mais antigas não rodam o CSS3, não poderemos contar com todo o poder do plugin.

Este tutorial promete levar o formulário de busca para outro nível. Para ver sua versão original em inglês ou fazer o download é só clicar aqui.

simple-style2

 

 

 

 

 

 

 

 

 

 

Com base na imagem acima, o elemento HTML será composto por 4 elementos, um div para os elementos de capa, um texto de entrada, um botão de entrada para botão de busca e uma pesquisa de imagens. Todos eles vão ser empilhados uns aos outros quando a div capa está no fundo da pilha e pesquisa de imagens no topo. Aqui está o HTML e CSS:

HTML


CSS3

.wrapper-simple {  
    text-align: center;  
    margin: 0 auto;  
    display: block;  
    width: 60px;  
    height: 45px;  
    padding: 10px 5px;  
    background: -webkit-gradient(linear, left top, left bottombottom, from(#f5fafe), to(#e2edf4));  
    border-radius: 5px;  
    box-shadow: inset rgba(255, 254, 255, 1) 0 0.1em 2px,  
                    #9bb6c9 0 1px 2px;  
    position: relative;  
}  

.wrapper-simple input[type=submit] {  
    margin-top: .2em;  
    z-index: 2;  
    position: relative;  
    vertical-align: top;  
    height: 43px;  
    min-width: 55px;  
    border-radius: 3px;  
    border: 1px solid #aa7818;  
    background: -webkit-gradient(linear, left top, left bottombottom, from(#ffb700), to(#ff8c00));  
    box-shadow: inset rgba(255, 255, 255, .5) 0 0.1em 0.1em;  
    cursor: pointer;  
}  

    .wrapper-simple input[type=submit]:active {  
        box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;  
    }  

    .wrapper-simple input[type=submit]:hover {  
        background: -webkit-gradient(linear, left top, left bottombottom, from(#ffcb48), to(#ff9c23));  
    }  

.wrapper-simple input[type=text] {  
    font-family: Arial;  
    font-weight: bold;  
    color: #1a3d51;  
    background: #d8e6ef;  
    border-radius:2px;  
    padding: 10px 10px 15px 10px;  
    width: 250px;  
    border: 0;  
    font-size: 16px;  
    text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;  
    box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;  
    position: absolute;  
    width: 1px;  
    z-index: 2;  
    padding-left: 2em;  
    margin-left: .2em;  
}  

.wrapper-simple img {  
    position: absolute;  
    top: 1.5em;  
    left: 1.5em;  
    z-index: 4;  
}

jQuery

Agora vamos ler o evento, clique no botão de busca e animar o formulário usando jQuery.

$('.wrapper-simple input[type=submit]').toggle(function(){  

    $('.wrapper-simple').animate({'width':'300px'})  
      .end().find('.wrapper-simple input[type=text]').animate({'width': '250px'})  
      .end().find('.wrapper-simple img').animate({'marginLeft': '-5px'})  
      .end().find(this).animate({'marginLeft':'22em'}).attr('value', 'CANCEL');  

}, function() {  

    $('.wrapper-simple').animate({'width':'60px'})  
      .end().find('.wrapper-simple input[type=text]').animate({'width': '1px'})  
      .end().find('.wrapper-simple img').animate({'marginLeft': '0'})  
      .end().find(this).animate({'marginLeft':'0'}).attr('value', '');  

});

Clique do usuário alternância script. Primeiro clique irá alargar o wrapper div e de entrada de texto, mova o botão de pesquisa para a borda de entrada de texto e mover-se a pesquisa de imagens para preencher o espaço deixado em branco antes do texto de entrada. Segundo clique voltará ao normal.