我已经遵循了这个很棒的教程,以获取"达到星星"评级系统:教程演示
这是完全有效的,我已经做了必要的将星形形式保存到MySQL表中的必要条件。现在,我想在桌子上显示带有教程的星级系统在我的桌子中注册的星值。典型的$starsvalue = 4;
然后显示4个有色星星,最后一个是空的。
目前,我不知道如何以$starsvalue
的结果显示星星。任何帮助非常欢迎。
二手形式:
echo "<form id="ratingsForm" name="starsrating" method="POST">";
echo "<div class="stars">";
echo "<input type="radio" name="star" class="star-1" id="star-1" value="1" onclick="this.form.submit()"/>";
echo "<label class="star-1" for="star-1">1</label>";
echo "<input type="radio" name="star" class="star-2" id="star-2" value="2" onclick="this.form.submit()"/>";
echo "<label class="star-2" for="star-2">2</label>";
echo "<input type="radio" name="star" class="star-3" id="star-3" value="3" onclick="this.form.submit()"/>";
echo "<label class="star-3" for="star-3">3</label>";
echo "<input type="radio" name="star" class="star-4" id="star-4" value="4" onclick="this.form.submit()"/>";
echo "<label class="star-4" for="star-4">4</label>";
echo "<input type="radio" name="star" class="star-5" id="star-5" value="5" onclick="this.form.submit()"/>";
echo "<label class="star-5" for="star-5">5</label>";
echo "<span></span>";
echo "</div>";
echo "<div style="visibility:hidden"><Input type=submit name="choix" value="Valider"></div>";
echo "</form>";
使用的CSS:
body {
padding: 50px;
}
form .stars {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
form .stars input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
width: 20%;
}
form .stars label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
form .stars label:hover ~ span {
background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
width: 100% !important;
}
form .stars label.star-4:hover ~ span {
width: 80% !important;
}
form .stars label.star-3:hover ~ span {
width: 60% !important;
}
form .stars label.star-2:hover ~ span {
width: 40% !important;
}
form .stars label.star-1:hover ~ span {
width: 20% !important;
}
form .stars span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
*更新 *
按建议尝试raty,但我无法使星星显现。CSS和JS文件似乎在好地方。我想我不明白如何将其配置为设置"星星"图像文件夹和其他参数
我不知道我应该在raty的网页上非常常见的thoss代码吗?
$('div')。raty({ 编号:function(){ 返回$(this).attr('data-number'); }});
我的代码:
<link rel="stylesheet" href="./raty/lib/jquery.raty.css"/>
<link rel="stylesheet" href="./raty/stylesheets/labs.css" media="screen" type="text/css"/>
<script src="./raty/vendor/jquery.js"></script><script src="./raty/lib/jquery.raty.js"></script>
<script src="./raty/javascripts/labs.js" type="text/javascript"></script>
<div class="clearfix"></div>
<article>
<div class="body">
<h1>Default</h1>
<p>You need just to have a <code>div</code> to build the Raty.</p>
<div id="default"></div>
<div class="highlight"><pre><span class="nt"><div></div></span>
</pre></div>
<div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s1">'div'</span><span class="p">).</span><span class="nx">raty</span><span class="p">();</span>
</pre></div>
根据教程,如果广播按钮为检查了,因此您将看到黄星。
$starsvalue=4;
echo "<form id="ratingsForm" name="starsrating" method="POST">";
echo "<div class="stars">";
for ($i = 1; $i <= 5; $i++) {
echo "<input type="radio" name="star" class="star-$i" id="star-$i" value="$i" ";
if ($i === $starsvalue) {
echo " checked='checked' ";
}
echo "onclick="this.form.submit()"/>";
echo "<label class="star-$i" for="star-$i">$i</label>";
}
echo "<span></span>";
echo "</div>";
echo "<div style="visibility:hidden"><Input type=submit name="choix" value="Valider"></div>";
echo "</form>";
这是我用raty制作的源代码。
步骤1:http://github.com/wbotelhos/raty/archive/2.7.0.zip i下载了它,提取后,我将文件夹重命名为raty。
。步骤2:我将HTML文件放置在此Raty文件夹的旁边。
<link href="raty/demo/stylesheets/labs.css" media="screen" rel="stylesheet" type="text/css">
<link href="raty/lib/jquery.raty.css" media="screen" rel="stylesheet" type="text/css">
<script src="raty/vendor/jquery.js"></script>
<script src="raty/lib/jquery.raty.js"></script>
<script src="raty/demo/javascripts/labs.js" type="text/javascript"></script>
<div data-number="5"></div>
<script>
$('div').raty({
number:$(this).attr('data-number'),
half : true,
path : null,
starHalf : 'raty/demo/images/star-half-mono.png',
starOff : 'raty/lib/images/star-off.png',
starOn : 'raty/lib/images/star-on.png'
});
</script>
也许Labs.css和labs.js并不有用,但是截至现在我只是复制了它,所以也要考虑一下。
编辑
对于选定的值假设$starvalue = 4
<script>
$('div').raty({
number:$(this).attr('data-number'),
half : true,
path : null,
starHalf : 'raty/demo/images/star-half-mono.png',
starOff : 'raty/lib/images/star-off.png',
starOn : 'raty/lib/images/star-on.png',
score: <?php echo $starvalue; ?>
});
</script>