98 lines
2.8 KiB
PHP
98 lines
2.8 KiB
PHP
<?php
|
|
require_once("Rate.php");
|
|
$rate = new Rate();
|
|
$result = $rate->getAllPost("1");
|
|
|
|
?>
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>PHP Dynamic Star Rating using jQuery</TITLE>
|
|
<style>
|
|
body{width:610;}
|
|
.rating-table {width: 100%;border-spacing: initial;margin: 20px 0px;word-break: break-word;table-layout: auto;line-height:1.8em;color:#333;}
|
|
.rating-table th {background: #999;padding: 5px;text-align: left;color:#FFF;}
|
|
.rating-table td {border-bottom: #f0f0f0 1px solid;background-color: #ffffff;padding: 5px;}
|
|
.rating-table td div.feed_title{text-decoration: none;color:#00d4ff;font-weight:bold;}
|
|
.rating-table ul{margin:0;padding:0;}
|
|
.rating-table li{cursor:pointer;list-style-type: none;display: inline-block;color: #F0F0F0;text-shadow: 0 0 1px #666666;font-size:20px;}
|
|
.rating-table .highlight, .rating-table .selected {color:#F4B30A;text-shadow: 0 0 1px #F48F0A;}
|
|
</style>
|
|
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
|
|
<script>function highlightStar(obj,id) {
|
|
removeHighlight(id);
|
|
$('.rating-table #tutorial-'+id+' li').each(function(index) {
|
|
$(this).addClass('highlight');
|
|
if(index == $('.rating-table #tutorial-'+id+' li').index(obj)) {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
function removeHighlight(id) {
|
|
$('.rating-table #tutorial-'+id+' li').removeClass('selected');
|
|
$('.rating-table #tutorial-'+id+' li').removeClass('highlight');
|
|
}
|
|
|
|
function addRating(obj,id) {
|
|
$('.rating-table #tutorial-'+id+' li').each(function(index) {
|
|
$(this).addClass('selected');
|
|
$('#tutorial-'+id+' #rating').val((index+1));
|
|
if(index == $('.rating-table #tutorial-'+id+' li').index(obj)) {
|
|
return false;
|
|
}
|
|
});
|
|
$.ajax({
|
|
url: "add_rating.php",
|
|
data:'id='+id+'&rating='+$('#tutorial-'+id+' #rating').val(),
|
|
type: "POST"
|
|
});
|
|
}
|
|
|
|
function resetRating(id) {
|
|
if($('#tutorial-'+id+' #rating').val() != 0) {
|
|
$('.rating-table #tutorial-'+id+' li').each(function(index) {
|
|
$(this).addClass('selected');
|
|
if((index+1) == $('#tutorial-'+id+' #rating').val()) {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
} </script>
|
|
|
|
</HEAD>
|
|
<BODY>
|
|
<table class="rating-table">
|
|
<tbody>
|
|
<?php
|
|
if(!empty($result)) {
|
|
$i=0;
|
|
foreach ($result as $tutorial) {
|
|
?>
|
|
<tr>
|
|
<td valign="top">
|
|
|
|
<div id="tutorial-<?php echo $tutorial["id"]; ?>">
|
|
<input type="hidden" name="rating" id="rating" value="<?php echo $tutorial["rating"]; ?>" />
|
|
<ul onMouseOut="resetRating(<?php echo $tutorial["id"]; ?>);">
|
|
<?php
|
|
for($i=1;$i<=10;$i++) {
|
|
$selected = "";
|
|
if(!empty($tutorial["rating"]) && $i<=$tutorial["rating"]) {
|
|
$selected = "selected";
|
|
}
|
|
?>
|
|
<li class='<?php echo $selected; ?>' onmouseover="highlightStar(this,<?php echo $tutorial["id"]; ?>);" onmouseout="removeHighlight(<?php echo $tutorial["id"]; ?>);" onClick="addRating(this,<?php echo $tutorial["id"]; ?>);">★</li>
|
|
<?php } ?>
|
|
<ul>
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</tbody>
|
|
</table>
|
|
</BODY>
|
|
</HTML>
|