星级评分控件插件

标签：

/*****************************************
* score星级评分使用说明
* $("XXX").score();
* 参数:无
*
* 说明:元素所指向对象可为一个集合
* 元素可以是一个input type="text"文本框,若该文本框可编辑(即无readonly或disabled属性),则该星级评分可操作
* 若元素是其他标签或该文本框只读(即有readonly或disabled其中一个属性),则该星级评分为只读
*****************************************/
(function ($) {
$.extend($.fn, {
score: function (val) {
return $(this).each(function () {
var $this = $(this);
if ($this.parent().hasClass("score")) {
if (typeof val === ‘number‘) {
var $a = $this.parent();
var $g = $a.parent();
var $sp = $g.next();
var v = val;
if (v > 5) {
v %= 5;
}
if (v < 0) {
v = 0;
}
var f = Math.floor(v);
var p = Math.round((v - f) * 10);
v = f + p / 10
if ($this.is("input[type=‘text‘]")) {
$this.val(v);
}
else {
$this.text(v);
}
$a.css("width", v * 16);
$sp.html(‘<b style="font-size:14px;color:#F97A10;">‘ + f.toString() + ‘</b>.‘ + p.toString());
}
return;
}
var $wrapGray = $("<div></div>");
var maxCount = 5;
var nowCount = 0;
var readonly = false;
var $wrapAll = $("<div></div>");
$wrapAll.css({
width: 16 * maxCount + 26,
height: 15
});
$this.wrap($wrapAll);
$this.after(‘<span style="text-shadow:1px 1px 0px #FFF;"></span>‘);
var $scoreText = $this.next();
$scoreText.css({
float: "left",
"line-height": "15px",
"font-size": "12px",
color: "#F97A10",
"padding-left": 6
});
$wrapGray.css({
width: 16 * maxCount,
height: 15,
float: "left",
background: "url(/Content/themes/public/img/score.png) repeat-x top left"
});
if (typeof val === ‘number‘) {
var v = parseFloat(val);
if (!v) {
v = 0;
}
if ($this.is("input[type=‘text‘]")) {
$this.val(v);
}
else {
$this.text(v);
}
}
var getText = function () {
if ($this.is("input[type=‘text‘]")) {
nowCount = parseFloat($.trim($this.val()));
}
else {
readonly = true;
nowCount = parseFloat($.trim($this.text()));
}
if (!nowCount) {
nowCount = 0;
}
if (nowCount > maxCount)
nowCount = nowCount % maxCount;
}
var renderText = function () {
getText();
var flCount = Math.floor(nowCount);
var p = Math.round((nowCount - flCount) * 10);
$scoreText.html(‘<b style="font-size:14px;color:#F97A10;">‘ + flCount.toString() + ‘</b>.‘ + p.toString());
}
renderText();
$this.wrap($wrapGray);
var $wrapActive = $("<div class=‘score‘></div>");
$wrapActive.css({
width: 16 * nowCount,
height: 15,
background: "url(/Content/themes/public/img/score.png) repeat-x bottom left"
});
$this.wrap($wrapActive);
$this.css("display", "none");
if (!readonly) {
$wrapActive = $this.parent();
$wrapGray = $wrapActive.parent().css("cursor", "pointer");
$wrapGray.on({
mousedown: function (ev) {
if (!$this.attr("readonly") && !$this.is(":disabled")) {
nowCount = Math.round((ev.offsetX / 16) * 2) / 2;
if (nowCount > maxCount) {
nowCount = maxCount;
}
if (nowCount <= 0) {
nowCount = 0.5;
}
$this.val(nowCount);
$wrapActive.css("width", nowCount * 16);
renderText();
}
}
});
}
});
}
});
})(jQuery);

星级评分控件插件

标签：

原文地址：http://www.cnblogs.com/GuoLevy/p/4184928.html