/*****************************************
* 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);
星级评分控件插件
时间: 2024-10-09 19:18:01
星级评分控件插件的相关文章
Android星星评分控件RatingBar的使用
在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里主要需要指定的是总星星数量,和当前的值,也就是总级别跟当前级别的量. <RatingBar android:id="@+id/ratingBar" android:numStars="5" //总级别,总分,星星个数 android:rating=&q
Web用户控件开发--星型评分控件
本文中分享一个实现简单,使用方便的星型评分控件. 一:贴几张测试图片先: 二.星型评分控件的实现: RatingBar.ascx: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RatingBar.ascx.cs" Inherits="UserControls.Controls.RatingBar" %> <style type=&q
Android自定义评分控件:RatingStarView
RatingStarView Android自定义的评分控件,类似RatingBar那样的,使用星星图标(full.half.empty)作为rating值的“评分/打分控件”. 效果图 图1:RatingStarView控件支持的特性: 半颗星支持(实际支持任意小数) 填充色.底色.描边色 指定高度,宽度自适应 拐角弧度.描边宽度.星星间距 肥胖指数(star thickness),越胖越可爱 点击评分(不支持半颗星) 实现思路 下面是RatingStarView的实现设计. 如何画一颗星 S
Android自定义星星评分控件,高效
下面为控件的实现历程: 此控件高效,直接使用ondraw绘制,先亮照: 由于Android自身的星星评分控件样式可以改,但是他的大小不好调整的缺点,只能用small normal这样的style调整,自定义不强,因此击发了我自定义星星控件的欲望. 星星评分控件的设计,大体规划为: 需要两张图片,一颗亮星星,一颗空星星:(当然图片不一定是星星,其他图片也可以,现在实验就用星星就好了)星星数量,间距可以自定义,星星的最小步进为0.1,在用户使用的时候与Android自带的方法一样. 星星控件大体分为
android进度条、滑动条和评分控件
所谓进度条.滑动条和评分控件,在手机应用中,相信你见过加载游戏时.更新应用时等情况,屏幕出现一条进度栏,这里称之为进度条:当你调节音量时出现的这里即称作滑动条:而评分控件,当你在淘宝给卖家评价时出现的类似5星评价,这里即称作评分控件,下面将分别详细说明这三种控件的基础使用方法. 一.ProgressBar进度条控件 1. 首先ProgressBar进度条给出了两种样式,分别是progressBarStyleLarge和progressBarStyleHorizontal,此次主要以progres
iOS 类似美团或饿了么评价中的星星评分控件
1.做的好几个项目都用到了评分控件,可以用来展示评分,也可以用来写评分,图片和间距大小都可以定制,之前就已经简单封装了一个,现在把它分享出来,有需要的拿去用. 2.下面是展示截图: image.png image.png 3.代码 https://github.com/alan12138/Custom-Control/tree/master/StarView 原文地址:https://www.cnblogs.com/alan12138/p/9634916.html
组件 控件 插件
组件.插件.控件的区别 控件:是编程中用到的,按钮就算是一个控件,窗口也是等等 组件:是软件的一部分.软件的组成部分. 插件:网页中用到的,flash插件,没有它浏览器不能播放flash. 首先范围最广的应该是组件,英文component,提起组件我们不应该把他和具体的技术,什么dll文件,ocx控件,activex等等联系起来,因为组件仅仅是一个概念,如果非要解释的话,那就是凡是在软件开发中用到了软件的复用,被复用的部分都可以称为组件.构件的英文也是component,所以说构件和组件其实是一
cocos2dx3.2利用ProgressTimer组合成评分控件
一.制作背景 现在很多游戏或者应用需要评分,就是一般来说满分10分,一般用星星来表示. 那么cocos2dx里面如何制作评分这样的控件呢? 我的打算是进度条组合成就行了. 二.材料准备 如上图所示,即2颗小星星即可. 三.最终效果 四.代码实现 ///////////////////////////////////////////////////////////////////////////////// /***************************ScoreBar Class***
DOM案例五星评分控件
模仿网页上评分的五个五星. 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .r 7 { 8 color:red; 9 } 10 .b 11 { 12 color:black; 13 } 14 </st