Jquery+PHP+MySQLで簡単に設置出来るお洒落な投票システム Super Ajax Polling

ポーリングシステムや投票システムは非常にWebサイトでは一般的です。投票はあなたのサイトやブログや、ユーザーの注意を取得し、手持ちの製品について、あなたのアイデアを取得する手助けになります。

■デモページ

■サンプルダウンロード

database

CREATE TABLE IF NOT EXISTS `polling` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `liked` int(11) NOT NULL,
  `dislike` int(11) NOT NULL,
  `average` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
 
--
-- Dumping data for table `polling`
--
 
INSERT INTO `polling` (`id`, `liked`, `dislike`, `average`) VALUES
(1, 1, 1, 1);

CREATE TABLE IF NOT EXISTS `polling_ip` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userip` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
 
--
-- Dumping data for table `polling_ip`
--

JQUERY CODE

// <![CDATA[	
$(document).ready(function() {
 
	$('.totalstatsbutton').livequery("mouseenter", function(e){
		$('.tooltip3').show();
		$('.totalstats').fadeIn(200);
	}).livequery("mouseleave", function(e){
		$('.tooltip3').hide();
		$('.totalstats').fadeOut(200);
	});
});
 
$(document).ready(function(){	
 
	$('#Send').click(function(){
 
        var vote = $("input[@name='radio_name']:checked").val();
		showLoader();
		$.post("voting.php?value="+vote,{
		}, function(response){
			hideLoader();
			$('#wrap').html(unescape(response));				
		});
	});	
 
	//show loading bar
	function showLoader(){
		$('.search-background').fadeIn(200);
	}
	//hide loading bar
	function hideLoader(){
		$('.search-background').fadeOut(200);
	};
 
});

CSS CODE

/* CSS Document */
button {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	background:#F6F6F6 none repeat scroll 0 0;
	border:1px solid #CCCCCC;
	cursor:pointer;
	float:left; margin-left:10px;
	height:2.0833em;
	overflow:visible;
	padding:0 0.5em;
	vertical-align:middle;
	white-space:nowrap;
}
#wrap{
	border:solid #e5eecc 1px; width:200px; background:#e5eecc;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.tooltip{ height:13px;display: none;width:120px; text-align:left;overflow:visible;opacity:0.7;filter:alpha(opacity=40)}
.tooltip2{ height:13px;display: none;width:140px; text-align:right; overflow:visible;opacity:0.7;filter:alpha(opacity=20)}
.tooltip3{ height:13px;display: none;width:270px; text-align:right; overflow:visible;opacity:0.7;filter:alpha(opacity=40)}
 
#poll_quiz{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#fff}
#poll_quiz label{ width:150px; border:solid #669933 1px; padding:5px; background-color:#669933;}

#options{ text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; padding:6px;}

.totalstats{
		display: none;
		font-size: 0.8em;
		height:17px;
		padding:7px;
		-moz-border-radius: 6px; 
		-webkit-border-radius: 6px;
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		text-align: left;
		text-decoration: none;
		width:60px;
		background-color:#333333;
		color:#FFFFFF;
		text-shadow: #fff 0px 0px 20px;
	}
 
.totalstatsbutton{ width:180px; vertical-align:top;background:#F6F6F6 none repeat scroll 0 0; height:40px; cursor:auto}
.totalstatsbutton .greenBar{background-color:#AADA37;  height:5px; margin-bottom:3px; height:6px;}		
.totalstatsbutton .redbar{background-color:#CF362F;  height:5px; margin-bottom:3px;height:6px;}		
.totalstatsbutton .bluebar{background-color:#0099CC;  height:5px; margin-bottom:3px;height:6px;}	

 
#poll_result{ text-align:center; padding-top:12px; vertical-align:bottom}
#poll_result label{ float:left;font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; width:49px;}
#poll_result div{ float:left}
#poll_result .greenBar2{background-color:#AADA37;  width:20px; margin-left:40px; height:6px;}	
#poll_result .redbar2{background-color:#CF362F;  width:20px; margin-left:26px;height:6px;}		
#poll_result .bluebar2{background-color:#0099CC;  width:20px; margin-left:26px;height:6px;}	

#voting_result{ border:solid #666666 1px; height:120px; margin-top:19px;-moz-border-radius: 6px; 
		-webkit-border-radius: 6px; width:500px; margin-left:12px; display:none
		}
 
#Send{ border:#CC0000 solid 1px;width:60px; background:#CC0000; color:#FFFFFF; cursor:pointer; padding:4px 12px 4px 12px; margin:10px 8px 6px 6px;}

.search-background {
		display: none;
		font-size: 13px;
		font-weight: bold;
		height:100px;
		position: absolute;
		padding-top:80px;
		-moz-border-radius: 6px; 
		-webkit-border-radius: 6px;
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		text-align: center;
		opacity:0.5;filter: alpha(opacity=50) ;
		text-decoration: none;
		width:200px;
	}
 
.search-background {
		 background:#999999;
		color:#FFFFFF;
		text-shadow: #fff 0px 0px 20px;
	}
 
search-background label{	
 
	border:solid #66FF00 1px;
}

HTML CODE

<div id="poll_quiz"><label>Vote about 99Points.info</label></div>
 
	<div id="wrap">
		<div class="search-background">
			<label><img src="loading.gif" alt="" /></label>
		</div>
 
		<div align="left" style="height:0px; margin-bottom:8px;">
			<div class="tooltip3">
				<?php include ('update_tooltip.php')?>
			</div>
		</div>
 
		<br clear="all" />
 
		<div id="update_count">
			<?php include ('update_box.php')?>
		</div>
 
		<br clear="all" />
		<div id="options">
			<input type="radio" name="user_rating" checked="checked" value="good" /> Good
			<br />
			<input type="radio" name="user_rating" value="bad" /> Not Good
			<br />
			<input type="radio" name="user_rating" value="average" /> Average
			<br />
			<input value="Send" type="button" id="Send">
 
		</div>
	</div>