Sondaggio Dinamico

Un sondaggio con barre di progresso dinamiche gestito con jquery.

by Salvatore Rotondo

HTML

<form id="poll1">
    <div id="container">
        <span class="domanda">Qual è il tuo calciatore preferito?</span>
        <div><span>0</span><a href="javascript:void(0)">Vota</a>Baggio</div>
        <div><span>0</span><a href="javascript:void(0)">Vota</a>Ronaldo</div>
        <div><span>0</span><a href="javascript:void(0)">Vota</a>Messi</div>
    </div>
</form>

CSS

body{background-color:#444;}

    #container {
        margin-top: 20px;
        color: #fff;
    }
    #container .domanda {
        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: #F90;
        margin-bottom: 15px;
        padding: 10px;
        font-size: 34px;
        color: #ffffff;
        border-left: 20px solid #333;
        width: 400px;
        -webkit-border-radius: 0 10px 10px 0;
        -moz-border-radius: 0 10px 10px 0;
        border-radius: 0 10px 10px 0;
    }
    #container div a {
        border-radius: 10px;
        text-decoration: none;
        color: #f90;
        padding: 5px 15px;
        background: #333;
        margin: 0 20px;
    }
    #container div a:hover {
        color: #fff;
    }

JavaScript

(function($) {
    var settings = {
        ratings: 0,
        optRatings: {},
        maxBarWidth: null,
        callback: null
    };
    
    $.fn.extend({
        
        poll: function(s) {
            settings = $.extend(settings, s);
            
            if (settings.maxBarWidth == null)
                settings.maxBarWidth = $(this).find("div").width();
            
            return this.each(function() {
                $(this).poll_click_event();
            });
        },
        
        poll_click_event: function() {
            var Poll = $(this);
            
            $(this).find("div a").click(function(e) {
                e.preventDefault();
                var span = $(this).parent().find("span");
                
                settings.ratings += 1;
                $(span).html(parseInt($(span).html())+1);
                
                var toVote = $(this)
                    .parent()
                    .poll_utils_getOnlyText();
                
                if (typeof settings.optRatings[toVote] == 'undefined')
                    settings.optRatings[toVote] = 1;
                else
                    settings.optRatings[toVote] += 1;
                
                $(Poll).poll_bar_adjust();
                $(Poll).poll_make_hiddenInput();
                
                if (settings.callback != null)
                    settings.callback(settings.optRatings);
            });
        },
        
        poll_utils_getOnlyText: function() {
            return $(this)
                .clone()
                .children()
                .remove()
                .end()
                .text();
        },
        
        poll_bar_adjust: function() {
            var bars = $(this).find("div");

            for (var i = 0; i < bars.length; ++i) {
                var thisVote = $(bars[i]).poll_utils_getOnlyText();
                if (typeof settings.optRatings[thisVote] !== 'undefined') {
                    var rating =...