我在网上看到了一个教程 - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System - 用于制作CSS星级评分系统。
在页面上他们有这段代码:
<ul class="rating">
<li><a href="#" title="1 Star">1</a></li>
<li><a href="#" title="2 Stars">2</a></li>
<li><a href="#" title="3 Stars">3</a></li>
<li><a href="#" title="4 Stars">4</a></li>
<li><a href="#" title="5 Stars">5</a></li>
</ul>
据我所知,这只是一个清单。如何将其集成到我的表单中,以便将星级评定的信息提交到数据库。我目前的表格代码如下:
<p>Quality</p>
<input type="radio" name="ratingquality" value="1">
<input type="radio" name="ratingquality" value="2">
<input type="radio" name="ratingquality" value="3">
<input type="radio" name="ratingquality" value="4">
<input type="radio" name="ratingquality" value="5">
答案 0 :(得分:23)
这很容易使用,只需复制粘贴代码即可。您可以在后台使用自己的星形图片。
我创建了一个变量var userRating
。你可以使用这个变量从星星中获取价值。
享受!! :)
$(document).ready(function(){
// Check Radio-box
$(".rating input:radio").attr("checked", false);
$('.rating input').click(function () {
$(".rating span").removeClass('checked');
$(this).parent().addClass('checked');
});
$('input:radio').change(
function(){
var userRating = this.value;
alert(userRating);
});
});
.rating {
float:left;
width:300px;
}
.rating span { float:right; position:relative; }
.rating span input {
position:absolute;
top:0px;
left:0px;
opacity:0;
}
.rating span label {
display:inline-block;
width:30px;
height:30px;
text-align:center;
color:#FFF;
background:#ccc;
font-size:30px;
margin-right:2px;
line-height:30px;
border-radius:50%;
-webkit-border-radius:50%;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
background:#F90;
color:#FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
<span><input type="radio" name="rating" id="str5" value="5"><label for="str5"></label></span>
<span><input type="radio" name="rating" id="str4" value="4"><label for="str4"></label></span>
<span><input type="radio" name="rating" id="str3" value="3"><label for="str3"></label></span>
<span><input type="radio" name="rating" id="str2" value="2"><label for="str2"></label></span>
<span><input type="radio" name="rating" id="str1" value="1"><label for="str1"></label></span>
</div>
答案 1 :(得分:4)
这个怎么样?我需要完全相同的东西,我必须从头开始创建一个。它是PURE CSS,可以在IE9中使用+无需改进即可。
演示:http://www.d-k-j.com/Articles/Web_Development/Pure_CSS_5_Star_Rating_System_with_Radios/
<ul class="form">
<li class="rating">
<input type="radio" name="rating" value="0" checked /><span class="hide"></span>
<input type="radio" name="rating" value="1" /><span></span>
<input type="radio" name="rating" value="2" /><span></span>
<input type="radio" name="rating" value="3" /><span></span>
<input type="radio" name="rating" value="4" /><span></span>
<input type="radio" name="rating" value="5" /><span></span>
</li>
</ul>
CSS:
.form {
margin:0;
}
.form li {
list-style:none;
}
.hide {
display:none;
}
.rating input[type="radio"] {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
cursor:pointer;
width:17px;
}
.rating span {
width:24px;
height:16px;
line-height:16px;
padding:1px 22px 1px 0; /* 1px FireFox fix */
background:url(stars.png) no-repeat -22px 0;
}
.rating input[type="radio"]:checked + span {
background-position:-22px 0;
}
.rating input[type="radio"]:checked + span ~ span {
background-position:0 0;
}
答案 2 :(得分:3)
以下是如何在不使用javascript(仅限html和css)的情况下将CSS星级评分整合到HTML表单中:
<强> CSS:强>
.txt-center {
text-align: center;
}
.hide {
display: none;
}
.clear {
float: none;
clear: both;
}
.rating {
width: 90px;
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
position: relative;
}
.rating > label {
float: right;
display: inline;
padding: 0;
margin: 0;
position: relative;
width: 1.1em;
cursor: pointer;
color: #000;
}
.rating > label:hover,
.rating > label:hover ~ label,
.rating > input.radio-btn:checked ~ label {
color: transparent;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating > input.radio-btn:checked ~ label:before,
.rating > input.radio-btn:checked ~ label:before {
content: "\2605";
position: absolute;
left: 0;
color: #FFD700;
}
<强> HTML:强>
<div class="txt-center">
<form>
<div class="rating">
<input id="star5" name="star" type="radio" value="5" class="radio-btn hide" />
<label for="star5">☆</label>
<input id="star4" name="star" type="radio" value="4" class="radio-btn hide" />
<label for="star4">☆</label>
<input id="star3" name="star" type="radio" value="3" class="radio-btn hide" />
<label for="star3">☆</label>
<input id="star2" name="star" type="radio" value="2" class="radio-btn hide" />
<label for="star2">☆</label>
<input id="star1" name="star" type="radio" value="1" class="radio-btn hide" />
<label for="star1">☆</label>
<div class="clear"></div>
</div>
</form>
</div>
请查看demo
答案 3 :(得分:2)
CSS:
.rate-container > i {
float: right;
}
.rate-container > i:HOVER,
.rate-container > i:HOVER ~ i {
color: gold;
}
HTML:
<div class="rate-container">
<i class="fa fa-star "></i>
<i class="fa fa-star "></i>
<i class="fa fa-star "></i>
<i class="fa fa-star "></i>
<i class="fa fa-star "></i>
</div>
答案 4 :(得分:0)
我将立刻说出你无法通过严格的CSS单选按钮实现他们的外观。
但是,您可以坚持使用您发布的示例中的列表样式,并将anchors
替换为可点击的spans
,这会触发javascript事件,从而通过该事件将该评级保存到您的数据库中阿贾克斯。
如果你走了那条路线,你可能还想把cookie保存到用户机器上,这样他们就无法一遍又一遍地提交到你的数据库。这会阻止他们至少提交一次,直到他们删除了他们的cookie。
但当然有很多方法可以解决这个问题。这只是其中之一。希望有所帮助。
答案 5 :(得分:0)
这是solution。
HTML:
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>
CSS:
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
希望这有帮助。