首页 > 代码库 > 非常使用的js组件
非常使用的js组件
1.实现商城评分小星星
/**
* JS评分效果
*/
function Score(options) {
this.config = {
selector: ‘.star‘, // 评分容器
renderCallback: null, // 渲染页面后回调
callback: null // 点击评分回调
};
this.cache = {
aMsg: [
"很不满意|差得太离谱",
"不满意|部分有破损",
"一般|质量一般",
"满意|质量不错",
"非常满意|质量非常好"
],
iStar: 0,
iScore: 0
};
var scoreResult = 0;
this.init = function (options) {
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config,
_cache = self.cache;
self._renderHTML();
};
this._renderHTML = function () {
var self = this,
_config = self.config;
var html = ‘<span class="des"></span>‘ +
‘<p class="star-p hidden"></p>‘;
$(_config.selector).each(function (index, item) {
$(item).append(html);
$(item).wrap($(‘<div class="parentCls" style="position:relative"></div>‘));
var parentCls = $(item).closest(‘.parentCls‘);
self._bindEnv(parentCls);
_config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
});
};
this._bindEnv = function (parentCls) {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.selector + ‘ li‘, parentCls).each(function (index, item) {
var score = index + 1;
// 鼠标移上
$(item).mouseover(function (e) {
var offsetLeft = $(‘ul‘, parentCls)[0].offsetLeft;
ismax(index + 1);
// $(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).removeClass(‘hidden‘);
$(‘p‘, parentCls).css({‘left‘: index * $(this).width() + 12 + ‘px‘});
// var html = ‘<em>‘ +
// ‘<b>‘ + score + ‘</b>分 ‘ + _cache.aMsg[index].split(‘|‘)[0] + ‘‘ +
// ‘</em>‘ + _cache.aMsg[index].split(‘|‘)[1];
// $(‘p‘, parentCls).html(html);
});
// 鼠标移出
$(item).mouseout(function () {
ismax();
!$(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).addClass(‘hidden‘);
});
// 鼠标点击
$(item).click(function (e) {
var index = $(_config.selector + ‘ li‘, parentCls).index($(this));
_cache.iStar = index + 1;
!$(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).addClass(‘hidden‘);
var html = ‘<strong>‘ +
score +
‘分</strong>‘ + _cache.aMsg[index].split(‘|‘)[1];
$(‘.des‘, parentCls).html(html);
_config.callback && $.isFunction(_config.callback) && _config.callback({starAmount: _cache.iStar});
scoreResult=score;
});
});
function ismax(iArg) {
_cache.iScore = iArg || _cache.iStar;
var lis = $(_config.selector + ‘ li‘, parentCls);
for (var i = 0; i < lis.length; i++) {
lis[i].className = i < _cache.iScore ? "on" : "";
}
}
}
this.getScore = function(){
return scoreResult;
}
}
HTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/Public/Review/Assets/review.css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="http://www.mamicode.com/Public/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/Public/Review/Assets/score.js" ></script>
<script type="text/javascript" src="http://www.mamicode.com/Public/js/jquery.enplaceholder.js" ></script>
<script type="text/javascript" src="http://www.mamicode.com/Public/Review/Assets/review.js" ></script>
<title>商家评价</title>
</head>
<body>
<div class="body">
<div class="title">
<span class="titleText">我要点评</span>
</div>
<form id="regForm" class="form" name="regForm" action="/Review/Review/save" method="post" >
<!-- <div class="navi">
<!–<span>商家名称</span>–>
<input type="text" id="seller" name="seller_name" class="input" placeholder="请输入商家名称" />
<input type="hidden" id="userId" name = "uid" value="http://www.mamicode.com/{$uid}" />
</div>-->
<div class="navi">
<input type="hidden" id="uid" name = "uid" value="http://www.mamicode.com/{$uid}" />
<input type="text" id="nickName" name="nickName" class="input" placeholder="请输入用户昵称" />
</div>
<div id="nickTip" class="sellerTip"></div>
<div class="content">
<div class="textarea">
<textarea id="reviewContent" name="reviewContent" class="input" placeholder="请输入评价内容"></textarea>
</div>
</div>
<div id="contentTip" class="sellerTip"></div>
<div class="star">
<div>
<span>总体评分</span>
</div>
<div>
<div class ="list">
<ul>
<li value="http://www.mamicode.com/1"><a href="javascript:;">1</a></li>
<li value="http://www.mamicode.com/2"><a href="javascript:;">2</a></li>
<li value="http://www.mamicode.com/3"><a href="javascript:;">3</a></li>
<li value="http://www.mamicode.com/4"><a href="javascript:;">4</a></li>
<li value="http://www.mamicode.com/5"><a href="javascript:;">5</a></li>
</ul>
</div>
<input type="hidden" id="score" name = "score" value="http://www.mamicode.com/0" />
</div>
</div>
<div class="centerBtn">
<a href="javascript:saveHandler()">
<img src="http://www.mamicode.com/Public/img/bts/submit.png">
</a>
</div>
</form>
</div>
</body>
</html>
css文件
* {
margin: 0;
padding: 0;
font-size: 15px;
}
ul, li {
list-style: none;
}
.star {
position: relative;
height: 24px;
margin: 10px auto 0;
}
.title {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
background: #fcfcfc;
font-size: 20px;
font-weight: bold;
color: #5c5c5c;
background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
padding: 13px;
text-align: center;
}
.titleText {
text-align: center;
}
.star span {
float: left;
height: 19px;
line-height: 19px;
padding-right: 20px;
}
.star ul {
margin: 0 10px;
}
.star li {
float: left;
width: 24px;
height: 22px;
text-indent: -9999px;
background: url(‘/Public/img/star.png‘) no-repeat;
cursor: pointer;
padding-left: 5px;
}
.star li.on {
background-position: 0 -28px;
}
.star p {
background: url(‘/Public/img/icon.gif‘) no-repeat;
padding: 10px 10px 0;
position: absolute;
top: 20px;
width: 159px;
height: 60px;
z-index: 100;
}
.star p em {
color: #FF6600;
display: block;
font-style: normal;
}
.star strong {
color: #ff6600;
padding-left: 50px;
}
.hidden {
display: none;
}
.des {
padding-left: 60px;
height: 24px;
padding-top: 5px;
}
.sellerTip {
text-align: left;
height: 12px;
font-size: 13px;
margin-top: -5px;
}
#contentTip {
margin-top: 20px;
}
.centerBtn {
padding-top: 22px;
text-align: center;
}
.form{
padding:0px 25px 0px 10px;
margin-top: 10px
}
.form input {
width: 100%;
height: 30px;
}
.textarea textarea {
width: 100%;
height: 150px;
}
.navi {
padding-top: 10px;
}
.content {
padding-top: 10px;
height: 150px;
}
.input {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
border-radius: 4px;
color: #555555;
display: inline-block;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
}
textarea:focus, input:focus {
border-color: rgba(82, 168, 236, 0 sss .8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0 none;
border-radius: 4px;
}