123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- /**
- @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 = '<ul class="layui-rate" '+ (options.readonly ? 'readonly' : '') +'>';
- for(var i = 1;i <= options.length;i++){
- var item = '<li class="layui-inline"><i class="layui-icon '
- + (i>Math.floor(options.value)?ICON_RATE:ICON_RATE_SOLID)
- + '" '+ style +'></i></li>';
- if(options.half){
- if(parseInt(options.value) !== options.value){
- if(i == Math.ceil(options.value)){
- temp = temp + '<li><i class="layui-icon layui-icon-rate-half" '+ style +'></i></li>';
- }else{
- temp = temp + item
- }
- }else{
- temp = temp + item
- }
- }else{
- temp = temp +item;
- }
- }
- temp += '</ul>' + (options.text ? ('<span class="layui-inline">'+ options.value + '星') : '') + '</span>';
- //开始插入替代元素
- 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);
- })
|