求源码！我想改把它改成用原生 js 来实现。
求源码！我想改把它改成用原生 js 来实现，目前项目中没有用到 jq，不想为了个星星而引入一个 jQuery。。。。。
5 回答
TypeScript代码可以吗?
/**
* 星级评分条类
*
* @class RatingBar
*/
class RatingBar
{
/**
* 默认设置
*
* @static
* @memberof RatingBar
*/
public static readonly defaults = {
mode: "LightEntire",
maxStar: 5,
star: 0,
OnSelect: () => { },
OnChosen: () => { },
};
public readonly mode = {
"LightEntire": this.LightEntire,
"LightHalf": this.LightHalf,
}
el: JQuery<HTMLElement>;
options: {
mode?: string, maxStar?: number, star?: number, OnSelect?: () => void, OnChosen?: () => void,
};
constructor(el: JQuery<HTMLElement>, options: { mode?: string, maxStar?: number, star?: number, OnSelect?: () => void, OnChosen?: () => void, })
{
options = $.extend({}, RatingBar.defaults, options);
options.mode = (!this.mode[options.mode]) ? "LightEntire" : options.mode;
options.mode = (options.star != Math.floor(options.star)) ? "LightHalf" : options.mode;
this.el = el;
this.options = options;
//初始化星星显示
this.LightHalf(options.star);
//绑定事件
this.BindEvent();
}
/**
* 绑定事件
*
* @memberof RatingBar
*/
public BindEvent()
{
this.el.on("mousemove", ".rating_item", (e) =>
{
this.OnMouseMove(e);
});
this.el.on("click", ".rating_item", (e) =>
{
this.OnClick(e);
});
this.el.on("mouseout", ".rating_item", (e) =>
{
this.OnMouseOut(e);
});
}
/**
* 清除绑定事件
*
* @memberof RatingBar
*/
public UnbindEvent()
{
this.el.off("mousemove");
this.el.off("click");
this.el.off("mouseout");
}
/**
* 点亮整颗星星
*
* @param {number} num 要点亮的星星数目
* @memberof RatingBar
*/
public LightEntire(num: number)
{
num = Math.floor(num); //防止传入的数不是整数
let item = this.el.find(".rating_item");
item.each(function(i)
{
item.eq(i).removeClass("show_half"); //清除半颗星
if (i < num)
{
item.eq(i).addClass("show_entire");
}
else
{
item.eq(i).removeClass("show_entire");
}
});
}
/**
* 点亮半颗星星
*
* @param {number} num 要点亮的星星数目
* @memberof RatingBar
*/
public LightHalf(num: number)
{
let count: number = Math.floor(num);
let isHalf: boolean = count !== num; //是否选择半颗
let item = this.el.find(".rating_item");
item.each((i) =>
{
this.LightEntire(count);
if (isHalf)
{
item.eq(count).addClass("show_half");
}
});
}
private OnMouseMove(e: JQuery.MouseMoveEvent<HTMLElement, undefined, any, any>)
{
let $self = $(e.currentTarget);
let num: number;
if (e.pageX - $self.offset().left < $self.width() / 2 && this.options.mode == "LightHalf") //半颗
{
num = $self.index() + 0.5;
}
else //整颗
{
num = $self.index() + 1;
}
this.LightHalf(num);
this.options.OnSelect();
}
private OnClick(e: JQuery.ClickEvent<HTMLElement, undefined, any, any>)
{
let $self = $(e.currentTarget);
let num: number;
if (e.pageX - $self.offset().left < $self.width() / 2 && this.options.mode == "LightHalf") //半颗
{
num = $self.index() + 0.5;
}
else //整颗
{
num = $self.index() + 1;
}
this.options.star = num;
this.options.OnChosen();
}
private OnMouseOut(e: JQuery.MouseOutEvent<HTMLElement, undefined, any, any>)
{
this.LightHalf(this.options.star);
}
}
let r1 = new RatingBar($("#r1"), {
OnSelect: () =>
{
console.log("select");
},
OnChosen: () =>
{
r1.UnbindEvent();
}
});
举报
0/150
提交
取消
