Checklist amigável em JQuery

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.