Простое голосование с помощью jQuery

автор: 29 августа, 2011

Простое голосование с помощью jQuery
  • Добавить комментарии
  • Печать
  • Добавить в избранные

Этот короткий пост и простая идея о создании системы голосования с помощью анимации jQuery.

Такая реализация подойдет тем, кто использует много изображений в своей системе голосования.

А сама идея состоит в том, чтобы изменять свойство ширины элемента DIV с помощью анимации на jQuery.
Смотрим.

Поскольку все просто, то мы не стали разделять коды и выкладывать исходники на скачивание.
Просто зацените код.

Весь код (HTML, JQuery, CSS)

<!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>

Источник: superdit.com

Тэги: ,

Нет комментариев на “Простое голосование с помощью jQuery”

добавить комментарий

Написать ответ

» Подписаться на комментарии к этой статье по RSS