Checklist amigável em JQuery

wordpress base de dados
WordPress – Atualizar base de dados após mudar de domínio
25 Outubro, 2013
desfoque photoshop
Como fazer um efeito de desfoque numa imagem no Photoshop CS6
30 Outubro, 2013
checklist

Hoje, neste artigo, vamos ver como é possível transformar uma simples lista com checkboxs (checklist) numa lista mais amigável e visualmente atrativa usando apenas HTML, CSS e JQuery.

Todos os que trabalham ou gostam da área de webdesign sabem que os olhos é mais de metade dá força para o utilizador dizer que o website é ou não bom, então seguindo esta lógica, podemos transformar coisas simples, em coisas mais elaboradas e visualmente mais atraentes para o utilizador.

Para este artigo escolhi um exemplo simples, uma lista com checkboxs (checklist) mas tentando torna-la o mais atrativa possível, sem que fosse demorada de fazer por parte do programador ou designer. O resultado a que chegamos foi, na nossa opinião, excelente… Simples, agradável e fácil de se realizar!

HTML

Antes de mais nada realizamos uma lista simples com algumas chekbox, formando assim uma checklist.

<ul class="lista">
    <li>
        <input id="check-1" name="check" type="checkbox">
        <label for="check-1">Criarestilosnet.com
    </li>
    <li>
        <input id="check-2" name="check" type="checkbox">
        <label for="check-2">Criarestilosnet.com
    </li>
    <li>
        <input id="check-3" name="check" type="checkbox">
        <label for="check-3">Criarestilosnet.com
    </li>
</ul>

CSS

Com o Cascading Style Sheets (CSS) dá-se forma e cor ao nosso habitual checklist

/* CSS reset */
* { margin: 0;  padding: 0; list-style: none; border: 0;  text-decoration: none;}

input, label {
    vertical-align: middle;
}

/* firefox */
div:after, ol:after, li:after, form:after, ul:after, dl:after,q:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    height:0;
    overflow:hidden;
}

.lista li {
    border-bottom:1px solid #fff;
    padding:10px;
    color:#000;
    background-color:#f7f7f4;
}
.lista li {
    background-color:#f7f7f4;
}
.lista li:hover {
    background-color:#e3e3dc;
}
.lista li label {
    cursor:pointer;
    color:#333;
    font-size:1.2em;
    line-height:1.3em;
}
.lista li:hover label {
    color:#000;
}
.lista input[type="checkbox"], .multi-column-check input[type="checkbox"] {
    cursor:pointer;margin-right:5px;
}
.lista li.checked {
    background: #e5f8ce url(visto.png) no-repeat 10px center;
    padding-left:32px;
}
.lista .checked input[type="checkbox"] {
    display: none;
}
.lista li.checked:hover input[type="checkbox"] {
    display: inline !important;
}
.lista li.checked:hover{
    background: #e5f8ce none !important;padding-left:10px;
}

JQuery

Dá-mos os toques suaves com o JQuery, dando logo outra vida ao que parecia ‘só mais um’.

$(document).ready(function() {
//reconhecendo o checkbox e ativando a li
    $(".lista").find(":checked").parent().toggleClass("checked");
    $(".lista").find(":disabled").parent().toggleClass("disabled");
    $(".lista :checkbox").click(function () {
        $(this).parent().toggleClass("checked");
    });
});

Pode realizar o download do arquivo, aqui.

Acha que esta técnica da outra vida aos formulários? Usa outra técnica? Comente! Até a próxima.

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *