Está aqui mais um tutorial jQuery com estilo para você! Um sistema de classificação (rating system) é uma parte importante dum website. Os usuários podem exprimir as suas ideias através da classificação do artigo ou tutorial no website que oferece esse sistema de classificação (rating system) para os usuários votarem.
Este sistema de classificação foi criado em AJAX, jQuery e PHP.
Espero que você goste do tutorial e que comente sobre este tutorial fantástico. Obrigado!
Veja aqui uma DEMO deste sistema de classificação em AJAX, jQuery e PHP.
Estrutura Da Base De Dados MySQL
CREATE TABLE IF NOT EXISTS `userip` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`userip` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
CREATE TABLE IF NOT EXISTS `ajax_rating` (
`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 `ajax_rating`
–
INSERT INTO `ajax_rating` (`id`, `liked`, `dislike`) VALUES
(1, 1, 1,);
Código jQuery
$(document).ready(function(){
$(‘button’).click(function(){
$(‘.message’).hide();
var a = $(this).attr(“id”);
showLoader();
if(a == “like”)
{
$(‘.greenBar’).animate( {
width: ‘15px’,
opacity: 1,
height: ‘60px’
} );
}
else
{
$(‘.redBar’).animate( {
width: ‘15px’,
opacity: 1,
height: ‘60px’
} );
}
$.post(“voting.php?value=”+a, {
}, function(response){
if(a == “like”)
{
$(‘.greenBar’).animate( {
width: ‘15px’,
opacity: 1,
height: parseInt(response)+’px’
} );
}
else
{
$(‘.redBar’).animate( {
width: ‘15px’,
opacity: 1,
height: parseInt(response)+’px’
} );
}
hideLoader();
});
});
//show loading bar
function showLoader(){
$(‘.search-background’).fadeIn(200);
}
//hide loading bar
function hideLoader(){
$(‘.message’).fadeIn();
$(‘.search-background’).fadeOut(200);
};
});
Eu usei a função do jQuery animate() para dar estilo ao sistema de classificação (rating system). A visualização a processar mostra que o processo está a decorrer. Trata-se dum sistema de classificação (rating system) atraente, usando jQuery e AJAX. Você pode integrá-lo no seu website. Descarregue o código e use este script!
CSS
/* 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:2px;
height:2.0833em;
overflow:visible;
padding:0 0.5em;
vertical-align:middle;
white-space:nowrap;
}
.search-background {
display:none;
font-size: 13px;
font-weight: bold;
width:50px; height:95px;
float:left;
position: absolute;
padding-top:20px;
padding-left:17px;
-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;
opacity:0.5;filter: alpha(opacity=50) ;
text-decoration: none;
}
.search-background {
background:#999999;
color:#FFFFFF;
text-shadow: #fff 0px 0px 20px;
}
.like_button{background:url(yes-dis.JPG) center left no-repeat; padding-left:15px;}
.like_button:hover{
background:url(yes-enb.JPG) center left no-repeat;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dislike_button{background:url(no-dis.JPG) center center no-repeat; padding-left:18px;}
.dislike_button:hover, .dislike_button:visited{
background:url(no-enb.JPG) center center no-repeat;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.ilikethis, .idislikethis, .totalstats{
display: none;
font-size: 1.0em;
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: center;
text-decoration: none;
width:60px;
background-color:#333333;
color:#FFFFFF;
text-shadow: #fff 0px 0px 20px;
}
.totalstatsbutton{ width:80px; vertical-align:top;background:#F6F6F6 none repeat scroll 0 0;}
.totalstatsbutton .greenBar{background-color:#DDDDDD; height:5px; margin-bottom:3px; height:6px;}
.totalstatsbutton .redbar{background-color:#DDDDDD; height:5px; height:6px;}
.greenBar{background-color:#AADA37; float:left; margin-bottom:3px; height:11px; margin-top:7px; margin-left:10px; width:15px;}
.redBar{background-color:#CF362F; height:8px; float:left; margin-bottom:3px; margin-top:7px; margin-left:12px; width:15px;}
.thumbDown div{ float:left; font-size:12px; }
.text_div{
width:500px; min-height:100px; float:left;
text-align:justify; padding:9px;
text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;
filter: dropshadow(color=#e5e5ee,offX=0,offY=1);
font-family:”Courier New”, Courier, monospace; font-size:12px;
-moz-border-radius: 6px;
margin-right:8px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
background-color:#CBD9EF;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
h2{text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;
filter: dropshadow(color=#e5e5ee,offX=0,offY=1);
font-family:”Courier New”, Courier, monospace;}
.rating_div{
width:70px; height:100px; float:left;
}
.message{ color:#0066CC;font-size:12px; display:none; padding:2px;
text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;
filter: dropshadow(color=#e5e5ee,offX=0,offY=1);
font-family:”Courier New”, Courier, monospace; font-size:12px;}
HTML
Aqui, eu estou a usar uma tabela separada para guardar o IP dos usuários que usam o sistema de classificação (rating system) para termos um registo dos usuários que já votaram e assegurarmos que não votam mais do que uma vez.
Download do código usado neste tutorial: Rating System Original Em AJAX – JQuery E PHP
(8 votes, average: 3.88 out of 5)
2 Responses
Muito legal o código!! Gostaria de saber como faço para inserir vários em uma mesma página para alterar um por um. Eu ja coloquei vários numa mesma página. Mas quando eu clico em um deles todos são alterados.
Se puder me responder por e-mail…
Obrigado!!
Hello!
Sorry, but I still have doubt about that article. I managed to insert the vote by ID, but when I click a button, all other buttons are executed. There are several comments, each comment has the buttons. But when I click on one of them all run at once. But it is only inserted in the database the value of the button clicked. I tried putting different ID's for each div on "rating_div_1", "rating_div_2" but the same problem occurs. Do not know if I should tamper with the onclick.
How do I run one button at a time?
Thank you!