Bootstrap图标实现移动端的星星评分功能
2016-04-30 16:09
405 查看
利用Bootstrap图标实现星星评分功能：
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>评星</title>
<link href="Styles/bootstrap-cerulean.min.css" rel="stylesheet" type="text/css" />
<style>
.pf .glyphicon {
color: orange;
user-select: none;
padding: 0px 10px;
}
.pf li {
padding: 10px 0px;
font-size:16px;
}
</style>
</head>
<body style="background-color:#FFFFFF;">
<div class="pblockm" id="d1406010801010000002" data-rh-caption="块样式">
<br><br><br>
<ul class="pf">
<li data-rh-score="0">
<span class="title" id="star1">总体</span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="tip"></span>
</li>
<li data-rh-score="0">
<span class="title" id="star2">菜品</span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="tip"></span>
</li>
<li data-rh-score="0">
<span class="title" id="star3">服务</span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="tip"></span>
</li>
</ul>
</div>
<button type="button" name="btnSubmit" class="btnSubmit" id="btnSubmit">提交</button>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script>
var tip=['','1分','2分','3分','4分','5分'];
$('.pf').on('mousedown','.glyphicon',function(){
if($(this).hasClass('glyphicon-star')){
var score = 0;
$(this).parent().attr('data-rh-score' ,score);
$(this).addClass('glyphicon-star-empty').removeClass('glyphicon-star').siblings('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');
$(this).nextAll('.tip').text(tip[0]);
}else{
var score = $(this).index();
$(this).parent().attr('data-rh-score' ,score);
$(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');
$(this).nextAll('.tip').text(tip[score]);
}
});
// var fs1 = $('#star1').nextAll('.rater-star-result').text();
</script>
</body>
</html>
效果：
源码下载路径：
Bootstrap图标实现移动端的星星评分功能
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>评星</title>
<link href="Styles/bootstrap-cerulean.min.css" rel="stylesheet" type="text/css" />
<style>
.pf .glyphicon {
color: orange;
user-select: none;
padding: 0px 10px;
}
.pf li {
padding: 10px 0px;
font-size:16px;
}
</style>
</head>
<body style="background-color:#FFFFFF;">
<div class="pblockm" id="d1406010801010000002" data-rh-caption="块样式">
<br><br><br>
<ul class="pf">
<li data-rh-score="0">
<span class="title" id="star1">总体</span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="tip"></span>
</li>
<li data-rh-score="0">
<span class="title" id="star2">菜品</span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="tip"></span>
</li>
<li data-rh-score="0">
<span class="title" id="star3">服务</span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="tip"></span>
</li>
</ul>
</div>
<button type="button" name="btnSubmit" class="btnSubmit" id="btnSubmit">提交</button>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script>
var tip=['','1分','2分','3分','4分','5分'];
$('.pf').on('mousedown','.glyphicon',function(){
if($(this).hasClass('glyphicon-star')){
var score = 0;
$(this).parent().attr('data-rh-score' ,score);
$(this).addClass('glyphicon-star-empty').removeClass('glyphicon-star').siblings('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');
$(this).nextAll('.tip').text(tip[0]);
}else{
var score = $(this).index();
$(this).parent().attr('data-rh-score' ,score);
$(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');
$(this).nextAll('.tip').text(tip[score]);
}
});
// var fs1 = $('#star1').nextAll('.rater-star-result').text();
</script>
</body>
</html>
效果：
源码下载路径：
Bootstrap图标实现移动端的星星评分功能
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- bootstrap初试进度条
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- Bootstrap 3.3.4 发布，Web 前端 UI 框架
- 移动端的长按事件
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 在 Linux 中如何移动文件
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- angular 指令简述
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)