第三次配置
This commit is contained in:
star
parent
db82cc3695
commit
53e3951331
@ -16,62 +16,34 @@ body{padding:20px;}
|
|||||||
<div class="layui-container">
|
<div class="layui-container">
|
||||||
<div class="layui-row">
|
<div class="layui-row">
|
||||||
<!-- 基础评分用法 -->
|
<!-- 基础评分用法 -->
|
||||||
<div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
|
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
|
||||||
<h3>基础用法</h3>
|
<h3>基础用法</h3>
|
||||||
<hr>
|
<hr>
|
||||||
<ul class="layui-rate-primary">
|
<div id="test1"></div>
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 半星评分用法 -->
|
<!-- 半星评分用法 -->
|
||||||
<div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
|
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
|
||||||
<h3>选中半星</h3>
|
<h3>选中半星</h3>
|
||||||
<hr>
|
<hr>
|
||||||
<ul class="layui-rate-half">
|
<div id="test2"></div>
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 显示提示文字 -->
|
<!-- 显示提示文字 -->
|
||||||
<div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
|
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
|
||||||
<h3>显示提示文字</h3>
|
<h3>显示提示文字</h3>
|
||||||
<hr>
|
<hr>
|
||||||
<ul class="layui-rate-text">
|
<div id="test3"></div>
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
</ul>
|
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 只读 -->
|
<!-- 只读 -->
|
||||||
<div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
|
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
|
||||||
<h3>只读</h3>
|
<h3>只读</h3>
|
||||||
<hr>
|
<hr>
|
||||||
<ul class="layui-rate-read">
|
<div id="test4"></div>
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="test1"></div>
|
|
||||||
<div id="test2"></div>
|
|
||||||
<div id="test3"></div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -82,20 +54,31 @@ body{padding:20px;}
|
|||||||
layui.use(['rate'], function(){
|
layui.use(['rate'], function(){
|
||||||
var rate = layui.rate;
|
var rate = layui.rate;
|
||||||
|
|
||||||
//设置全局
|
//渲染
|
||||||
rate.set({
|
rate.render({
|
||||||
score: 3.5
|
elem: '#test1',
|
||||||
});
|
length: 7,
|
||||||
|
value: 4
|
||||||
|
})
|
||||||
var ins = rate.render({
|
rate.render({
|
||||||
elem: '#test1'
|
elem: '#test2',
|
||||||
|
length: 6,
|
||||||
|
value: 2,
|
||||||
|
half: true
|
||||||
|
})
|
||||||
|
rate.render({
|
||||||
|
elem: '#test3',
|
||||||
|
length: 5,
|
||||||
|
value: 3,
|
||||||
|
text: true
|
||||||
|
})
|
||||||
|
rate.render({
|
||||||
|
elem: '#test4',
|
||||||
|
length: 8,
|
||||||
|
value: 5,
|
||||||
|
reader: true
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
rate.primary(".layui-rate-primary","li");
|
|
||||||
rate.half(".layui-rate-half","li");
|
|
||||||
rate.text(".layui-rate-text","li");
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1038,10 +1038,10 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
|||||||
|
|
||||||
/** 评分组件 **/
|
/** 评分组件 **/
|
||||||
.layui-icon-rate,.layui-icon-rate-solid{font-size: 24px;color: #FF7F00;}
|
.layui-icon-rate,.layui-icon-rate-solid{font-size: 24px;color: #FF7F00;}
|
||||||
.layui-rate{height: 120px;border: 1px solid #EEE;border-radius: 5px;padding: 20px;margin-top: 10px;margin-bottom: 10px;transition: 300ms;}
|
.layui-rate-div{height: 120px;border: 1px solid #EEE;border-radius: 5px;padding: 20px;margin-top: 10px;margin-bottom: 10px;transition: 300ms;}
|
||||||
.layui-rate:hover{box-shadow: 0 0 10px #CCC; transition: 300ms;}
|
.layui-rate-div:hover{box-shadow: 0 0 10px #CCC; transition: 300ms;}
|
||||||
.layui-rate-primary,.layui-rate-half,.layui-rate-text,.layui-rate-read{display: inline-block;list-style: none;padding: 20px;}
|
.layui-rate{display: inline-block;list-style: none;padding: 20px;}
|
||||||
.layui-rate-primary li,.layui-rate-half li,.layui-rate-text li:hover{cursor: pointer;}
|
.layui-rate li:hover{cursor: pointer;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -23,7 +23,8 @@ layui.define('jquery',function(exports){
|
|||||||
}
|
}
|
||||||
|
|
||||||
//字符常量
|
//字符常量
|
||||||
,ICON_RATE = 'layui-icon-rate', ICON_RATA_SOLID = 'layui-icon-rate-solid'
|
,MOD_NAME= 'rate', ICON_RATE = 'layui-icon layui-icon-rate', ICON_RATE_SOLID = 'layui-icon layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon layui-icon-rate-half'
|
||||||
|
|
||||||
|
|
||||||
//构造器
|
//构造器
|
||||||
,Class = function(options){
|
,Class = function(options){
|
||||||
@ -35,12 +36,11 @@ layui.define('jquery',function(exports){
|
|||||||
|
|
||||||
//默认配置
|
//默认配置
|
||||||
Class.prototype.config = {
|
Class.prototype.config = {
|
||||||
limit: 10 //每页显示的数量
|
length: 5, //初始长度
|
||||||
,loading: true //请求数据时，是否显示loading
|
text: false, //是否显示评分等级
|
||||||
,cellMinWidth: 60 //所有单元格默认最小宽度
|
reader: false, //是否只读
|
||||||
,text: {
|
half: false, //是否可以半星
|
||||||
none: '无数据'
|
value: 5, //星星选中个数
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//评分渲染
|
//评分渲染
|
||||||
@ -48,85 +48,80 @@ layui.define('jquery',function(exports){
|
|||||||
var that = this
|
var that = this
|
||||||
,options = that.config;
|
,options = that.config;
|
||||||
|
|
||||||
/*
|
var temp='<ul class="layui-rate">';
|
||||||
|
for(var i=1;i<=options.length;i++){
|
||||||
|
temp+='<li class="layui-inline"><i class="layui-icon '+(i>options.value?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
|
||||||
|
}
|
||||||
|
temp+='</ul><span></span>';
|
||||||
|
|
||||||
div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
|
$(options.elem).after(temp);
|
||||||
<h3>只读</h3>
|
|
||||||
<hr>
|
|
||||||
<ul class="layui-rate-read">
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
*/
|
if(!options.reader) that.draw();
|
||||||
|
|
||||||
var obj = {
|
};
|
||||||
primary:function(e,x){
|
|
||||||
$(e+' > '+x).each(function(index){
|
//li点击事件
|
||||||
var ind=index;
|
Class.prototype.draw=function(){
|
||||||
|
var that = this
|
||||||
|
,options = that.config
|
||||||
|
,_ul=$(options.elem).next("ul");
|
||||||
|
_ul.children("li").each(function(index){
|
||||||
|
var ind=index+1;
|
||||||
|
|
||||||
|
//点击
|
||||||
|
$(this).click(function(){
|
||||||
|
options.value=ind;
|
||||||
|
|
||||||
|
if(options.text) _ul.next("span").text(options.value+"分");
|
||||||
|
})
|
||||||
|
|
||||||
|
//移入
|
||||||
$(this).mouseover(function(){
|
$(this).mouseover(function(){
|
||||||
|
_ul.find("i").each(function(){
|
||||||
|
$(this)[0].className=ICON_RATE;
|
||||||
|
})
|
||||||
|
if(options.half){
|
||||||
|
$(this).prevAll("li").children("i").each(function(){
|
||||||
|
$(this)[0].className=ICON_RATE_SOLID;
|
||||||
|
})
|
||||||
|
if(){
|
||||||
|
|
||||||
}),
|
}
|
||||||
$(this).mouseout(function(){
|
}else{
|
||||||
|
_ul.find("i:lt("+ind+")").each(function(){
|
||||||
}),
|
$(this)[0].className=ICON_RATE_SOLID;
|
||||||
$(this).click(function(){
|
|
||||||
$(this).children("i").addClass(ICON_RATA_SOLID).removeClass(ICON_RATE)
|
|
||||||
$(this).prevAll().each(function(){
|
|
||||||
$(this).children("i").addClass(ICON_RATA_SOLID).removeClass(ICON_RATE)
|
|
||||||
})
|
|
||||||
$(this).nextAll().each(function(){
|
|
||||||
$(this).children("i").addClass(ICON_RATE).removeClass(ICON_RATA_SOLID)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
half:function(e,x){
|
|
||||||
|
|
||||||
},
|
|
||||||
text:function(e,x){
|
|
||||||
$(e+' > '+x).each(function(index){
|
|
||||||
var ind=index;
|
|
||||||
$(this).click(function(){
|
|
||||||
$(this).children("i").addClass(ICON_RATA_SOLID).removeClass(ICON_RATE)
|
|
||||||
$(this).prevAll().each(function(){
|
|
||||||
$(this).children("i").addClass(ICON_RATA_SOLID).removeClass(ICON_RATE)
|
|
||||||
})
|
|
||||||
$(this).nextAll().each(function(){
|
|
||||||
$(this).children("i").addClass(ICON_RATE).removeClass(ICON_RATA_SOLID)
|
|
||||||
})
|
|
||||||
$(e).next("span").text(ind+1);
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
//移出
|
||||||
|
$(this).mouseout(function(){
|
||||||
|
_ul.find("i").each(function(){
|
||||||
|
$(this)[0].className=ICON_RATE;
|
||||||
|
})
|
||||||
|
_ul.find("i:lt("+options.value+")").each(function(){
|
||||||
|
$(this)[0].className=ICON_RATE_SOLID;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
//事件处理
|
//事件处理
|
||||||
Class.prototype.events = function(){
|
Class.prototype.events = function(){
|
||||||
|
var that = this
|
||||||
|
,options = that.config;
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//核心接口
|
|
||||||
rate.render = function(options){
|
|
||||||
var inst = new Class(options);
|
|
||||||
return thisTable.call(inst);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
//核心入口
|
//核心入口
|
||||||
rate.render = function(options){
|
rate.render = function(options){
|
||||||
var inst = new Class(options);
|
var inst = new Class(options);
|
||||||
return thisTable.call(inst);
|
return inst;
|
||||||
};
|
};
|
||||||
|
|
||||||
exports('rate', rate);
|
exports(MOD_NAME, rate);
|
||||||
})
|
})
|
||||||
Loading…
Reference in New Issue
Block a user