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>