SummArg | Cursos y recursos para webmasters

07/08/2011

Encuestas con Simple Vote, basado en jQuery

Un script absolutamente sencillo. Cada voto que detecta, expande 1 el ancho de la barra correspondiente. Este script no tiene por finalidad guardar los datos de las votaciones sino mostrar el efecto animado que se puede lograr con jQuery.

<!DOCTYPE html>
<html>
<head>
<title>JQuery Simple Vote</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#container div a").click(function() {
        $(this).parent().animate({
           width: '+=100px'
        }, 500);
        $(this).prev().html(parseInt($(this).prev().html()) + 1);
        return false;
    });
});
</script>
<style type="text/css">
    * {
        font-family: Arial, "Free Sans";
    }
    #container {
        margin-top: 20px;
        color: #fff;
    }
    #container #question {
        display: block;
        padding: 20px;
        font-weight: bold;
        letter-spacing: -3px;
        margin-bottom: 20px;
        padding: 10px;
        font-size: 40px;
    }
    #container div {
        font-weight: bold;
        letter-spacing: -3px;
        background: #0099cc;
        margin-bottom: 15px;
        padding: 10px;
        font-size: 34px;
        color: #ffffff;
        border-left: 20px solid #333;
        width: 400px;
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0 0.5em 0.5em 0;
        border-radius: 0 1.5em 1.5em 0;
    }
    #container div a {
        border-radius: 0.3em;
        text-decoration: none;
        color: #0099cc;
        padding: 5px 15px;
        background: #333;
        margin: 0 20px;
    }
    #container div a:hover {
        color: #fff;
    }
    body {
        margin: 0;
        padding: 0;
        background: #ffffff url('trentanove.gif') repeat right top;
    }
</style>
</head>
<body>
  <div id="container">
      <span id="question">What is your favorite server side language?</span>
      <div><span>0</span><a href="">Vote</a>PHP</div>
      <div><span>0</span><a href="">Vote</a>Ruby</div>
      <div><span>0</span><a href="">Vote</a>Java</div>
      <div><span>0</span><a href="">Vote</a>ASP</div>
      <div><span>0</span><a href="">Vote</a>Perl</div>
      <div><span>0</span><a href="">Vote</a>ColdFusion</div>
  </div>
</body>
</html>

Demo | Página del autor

Dejar un comentario