HTML şi jQuery: bifarea opţiunilor


Am văzut recent aici şi cum am nevoie de chestionare online pentru un proiect (secret momentan 😉 ) m-am gândit să văd cât de uşor se poare replica sistemul de bifare a opţiunilor. Şi adevărul e că… nu e greu. Mai jos vedeţi deja în acţiune ceea ce şi mai jos va fi ca şi cod. De ce avem deci nevoie? De o clasă pentru div-urile ce includ opţiunile. Această clasă trebuie să aibă desigur şi o variantă pentru mouse over. Iar după ce am dat click, opţiunea trebuie să apară vizual ca bifată: vom folosi o altă clasă, similară dar cu elementele vizuale necesare ca să se vadă bifarea. Apropo: am exclus din start folosirea checkbox-urilor din HTML, precum şi a versiunilor grafice modificate, chiar şi cu pluginuri jQuery.

OK, am văzut, acum codul! Practic cele mai multe linii sunt dedicate CSS-ului. De dragul esteticii am pus colţuri rotunjite (se vor vedea bine pe navigatoarele moderne). Apoi vine partea HTML unde indic efectiv întrebarea şi opţiunile de răspuns. În fine, la final vine marea provocare: bifarea. Ei bine… se rezolvă din două linii de cod (57 şi 58). Desigur, mulţumită jQuery. Şi uite aşa am terminat totul. Nu e simplu? Ba da!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<title>Chestionar</title>
<style>
    .optiune {
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        width:300px;
        color: black;
        font-family: Verdana;
        font-size: 13px; 
        padding: 5px 5px 5px 35px;
        border: solid 2px black;
        margin: 2px;
        background: #f0f0f0 url("asterisk.png") no-repeat left center;
    }    
    .optiune:hover {
        border: solid 2px green;
        background: #cfcdce url("asterisk.png") no-repeat left center;
        cursor:pointer;
    }    
    .optiune2 {
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        width:300px;
        color: black;
        font-family: Verdana;
        font-size: 13px; 
        padding: 5px 5px 5px 35px;
        border: solid 2px black;
        margin: 2px;
        background: #c3deed url("accept.png") no-repeat left center;
    }    
    .optiune2:hover {
        border: solid 2px green;
        background: #90bdd8 url("accept.png") no-repeat left center;
        cursor:pointer;
    }
</style>
</head>
<body>
Bifaţi care sunt produse Google:
<div class="optiune">Bing</div>
<div class="optiune">Android</div>
<div class="optiune">iPhone</div>
<div class="optiune">Dacia</div>
<div class="optiune">Orkut</div>
<div class="optiune">YouTube</div>
<div class="optiune">Amazon</div>
<div class="optiune">Blogger</div>
<script>
    $("div").click(function () {
        $(this).toggleClass("optiune2");
    });
</script>
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

2 comentarii

  1. Ionut Staicu spune:

    Uite aici o variantă mai… funcțională.

    Cum ai făcut tu e ok, doar că nu prea poți trimite mai departe datele. :)

    Btw, pune și tu un stil diferit la link-urile din comentarii.

    Și scoate buton de reset de la comentarii 😉

  2. adi spune:

    Salut… am si eu o problema si poate ma puteti ajuta.
    Am de facut pentru scoala un site educativ si mi-am ales cateva materii la sfarsitul carora trebuie sa pun niste teste… nu as vrea cu baza de date si php pt ca nu am oriunde posibilitatea sa instalez un server.
    Am gasit un chestionar pe un site http://www.marplo.net/php-mysql/teste_php2.html iar administratorul zice ca am tot ce am nevoie in codul sursa fiind creeat doat cu jQuery si html… dar nu am reusit sa ma lamuresc cum functioneaza.
    Daca aveti voi vreo idee sau vreun script pt asa ceva v-as fi recunoscator :).
    Multumesc.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *