/** @Title: layui.rate 评分评星 @Author: star1029 @License:MIT */ layui.define('jquery',function(exports){ "use strict"; var $ = layui.jquery //外部接口 ,rate = { config: {} ,index: layui.rate ? (layui.rate.index + 10000) : 0 //设置全局项 ,set: function(options){ var that = this; that.config = $.extend({}, that.config, options); return that; } //事件监听 ,on: function(events, callback){ return layui.onevent.call(this, MOD_NAME, events, callback); } } //操作当前实例 ,thisRate = function(){ var that = this ,options = that.config; return { setvalue: function(value){ that.setvalue.call(that, value); } ,config: options } } //字符常量 ,MOD_NAME = 'rate',ELEM_VIEW = 'layui-rate', ICON_RATE = 'layui-icon-rate', ICON_RATE_SOLID = 'layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon-rate-half' ,ICON_SOLID_HALF = 'layui-icon-rate-solid layui-icon-rate-half', ICON_SOLID_RATE = 'layui-icon-rate-solid layui-icon-rate', ICON_HALF_RATE = 'layui-icon-rate layui-icon-rate-half' //构造器 ,Class = function(options){ var that = this; that.index = ++rate.index; that.config = $.extend({}, that.config, rate.config, options); that.render(); }; //默认配置 Class.prototype.config = { length: 5 //初始长度 ,text: false //是否显示评分等级 ,readonly: false //是否只读 ,half: false //是否可以半星 ,value: 0 //星星选中个数 ,theme: '' }; //评分渲染 Class.prototype.render = function(){ var that = this ,options = that.config ,style = options.theme ? ('style="color: '+ options.theme + ';"') : ''; options.elem = $(options.elem); //如果没有选择半星的属性,却给了小数的数值,统一向上或向下取整 if(parseInt(options.value) !== options.value){ if(!options.half){ options.value = (Math.ceil(options.value) - options.value) < 0.5 ? Math.ceil(options.value): Math.floor(options.value) } } //组件模板 var temp = '' + (options.text ? (''+ options.value + '星') : '') + ''; //开始插入替代元素 var othis = options.elem ,hasRender = othis.next('.' + ELEM_VIEW); //生成替代元素 hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender that.elemTemp = $(temp); options.span = that.elemTemp.next('span'); options.setText && options.setText(options.value); othis.html(that.elemTemp); othis.addClass("layui-inline"); //如果不是只读,那么进行触控事件 if(!options.readonly) that.action(); }; //评分重置 Class.prototype.setvalue = function(value){ var that = this ,options = that.config ; options.value = value ; that.render(); }; //li触控事件 Class.prototype.action = function(){ var that = this ,options = that.config ,_ul = that.elemTemp ,wide = _ul.find("i").width(); _ul.children("li").each(function(index){ var ind = index + 1 ,othis = $(this); //点击 othis.on('click', function(e){ //将当前点击li的索引值赋给value options.value = ind; if(options.half){ //获取鼠标在li上的位置 var x = e.pageX - $(this).offset().left; if(x <= wide / 2){ options.value = options.value - 0.5; } } if(options.text) _ul.next("span").text(options.value + "星"); options.choose && options.choose(options.value); options.setText && options.setText(options.value); }); //移入 othis.on('mousemove', function(e){ _ul.find("i").each(function(){ $(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF) }); _ul.find("i:lt(" + ind + ")").each(function(){ $(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE) }); // 如果设置可选半星,那么判断鼠标相对li的位置 if(options.half){ var x = e.pageX - $(this).offset().left; if(x <= wide / 2){ othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID) } } }) //移出 othis.on('mouseleave', function(){ _ul.find("i").each(function(){ $(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF) }); _ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){ $(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE) }); //如果设置可选半星,根据分数判断是否有半星 if(options.half){ if(parseInt(options.value) !== options.value){ _ul.children("li:eq(" + Math.floor(options.value) + ")").children("i").addClass(ICON_RATE_HALF).removeClass(ICON_SOLID_RATE) } } }) }) }; //事件处理 Class.prototype.events = function(){ var that = this ,options = that.config; }; //核心入口 rate.render = function(options){ var inst = new Class(options); return thisRate.call(inst); }; exports(MOD_NAME, rate); })