update
This commit is contained in:
贤心
parent
72253f671e
commit
e2a2c08402
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "layui",
|
||||
"main": "src/layui.js",
|
||||
"version": "2.3.0",
|
||||
"version": "2.4.0",
|
||||
"homepage": "https://github.com/sentsin/layui",
|
||||
"authors": [
|
||||
"sentsin <xu@sentsin.com>"
|
||||
|
||||
94
examples/colorpicker.html
Normal file
94
examples/colorpicker.html
Normal file
@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>颜色拾取器 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style type="text/css">
|
||||
#test1,#test2,#test3,#test4,#test5,#test6{margin-left: 50px; margin-top: 70px;}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
body{padding:20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-container">
|
||||
<div class="layui-row">
|
||||
<div>
|
||||
<div id="test1"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="test2"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="test3"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="test4"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="test5"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="test6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('colorpicker', function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
colorpicker.render({
|
||||
elem: '#test1'
|
||||
,predefine: true //开启预定义颜色
|
||||
,prededata: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
|
||||
,change: function(color){
|
||||
console.log(color)
|
||||
}
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#test2'
|
||||
,bgcolor: 'rgba(218, 121, 157, 0.5)' //设置默认色
|
||||
,predefine: true
|
||||
,alpha: true //开启透明度
|
||||
,format: 'rgb'
|
||||
,change: function(color){
|
||||
console.log(color)
|
||||
}
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#test3'
|
||||
,bgcolor: '#06eaee'
|
||||
,alpha: true
|
||||
,format: 'rgb' //设置输入显示格式为rgb
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#test4'
|
||||
,bgcolor: '#06eeb8'
|
||||
,predefine: true //开启预定义色
|
||||
,format: 'rgb'
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#test5'
|
||||
,bgcolor: '#ffd900'
|
||||
,predefine: true
|
||||
,size: 'mini'
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#test6'
|
||||
,bgcolor: '#F00'
|
||||
,predefine: true
|
||||
,prededata: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
|
||||
,size: 'xs'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -108,11 +108,11 @@ body{padding: 10px;}
|
||||
<option value="音乐">音乐</option>
|
||||
<option value="旅行">旅行</option>
|
||||
<option value="读书">读书</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="1">layer</option>
|
||||
<option value="2" disabled>laydate</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="4">layim</option>
|
||||
<option value="5">laypage</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
@ -210,7 +210,7 @@ layui.use('form', function(){
|
||||
,'phone': 11111111111
|
||||
,'email': 'xu@sentsin.com'
|
||||
,'password': 123123
|
||||
,'quiz': 2
|
||||
//,'quiz': 2
|
||||
,'interest': 3
|
||||
,'like[write]': true
|
||||
//,'open': false
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。"
|
||||
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
|
||||
,"experience": "7"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": 0
|
||||
|
||||
75
examples/json/table/demo3.json
Normal file
75
examples/json/table/demo3.json
Normal file
@ -0,0 +1,75 @@
|
||||
{
|
||||
"status": 200
|
||||
,"message": ""
|
||||
,"total": 3000000
|
||||
,"data": {
|
||||
"list": [{
|
||||
"id": "10001"
|
||||
,"username": "杜甫3"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
|
||||
,"experience": "7"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": 0
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10002"
|
||||
,"username": "李白3"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
|
||||
,"experience": "9"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
,"LAY_CHECKED": true
|
||||
}, {
|
||||
"id": "10003"
|
||||
,"username": "王勃"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "8"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10004"
|
||||
,"username": "李清照"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "女"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "6"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10005"
|
||||
,"username": "冰心"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "女"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "64"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10006"
|
||||
,"username": "贤心"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "65"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}]
|
||||
}
|
||||
}
|
||||
55
examples/slider.html
Normal file
55
examples/slider.html
Normal file
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>滑块 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding:20px;}
|
||||
p{font-size: 18px; margin: 20px 0 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-container">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs8">
|
||||
<p>默认滑块</p>
|
||||
<div id="slideTest1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use('slider', function(){
|
||||
var slider = layui.slider;
|
||||
slider.render({
|
||||
elem: '#slideTest1'
|
||||
// ,min: 0 //最小值
|
||||
// ,max: 100 //最大值
|
||||
// ,value: 40 //初始值
|
||||
// ,step: 10 //间隔值
|
||||
// ,showstep: true //间隔点
|
||||
// ,tips: false //关闭提示文本
|
||||
// ,input: true //输入框
|
||||
// ,range: true //范围选择
|
||||
// ,sliderValue: function(value){ //回调实时显示当前值
|
||||
// console.log(value)
|
||||
// }
|
||||
// ,setTips: function(value){ //自定义提示文本
|
||||
// return '离世界末日还有' + value + '天';
|
||||
// }
|
||||
// ,vertical: true //垂直滑块，默认横向
|
||||
// ,height: '400' //配合 vertical 参数使用，默认200px
|
||||
// ,disabled: true //禁用滑块
|
||||
// ,color: '#2F4056' //主题色
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -15,11 +15,13 @@ body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
|
||||
<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
|
||||
<button class="layui-btn" data-type="isAll">验证是否全选</button>
|
||||
</div>
|
||||
<script type="text/html" id="toolbarDemo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<table id="test" lay-filter="test"></table>
|
||||
|
||||
@ -46,7 +48,8 @@ body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
|
||||
<table id="test2" lay-filter="test2"></table>
|
||||
|
||||
<table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
|
||||
<div style="display: none1;">
|
||||
<table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
|
||||
@ -61,9 +64,9 @@ body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
<th lay-data="{field:'zone', width:200}">区</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}">
|
||||
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{field:'username'}" rowspan="3">联系人</th>
|
||||
@ -85,16 +88,16 @@ body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
<th lay-data="{field:'house', width:150}">单元</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<table id="demo"></table>
|
||||
<table id="demo"></table>
|
||||
|
||||
|
||||
<div class="layui-btn-group">
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn" data-type="parseTable">转化为数据表格</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="layui-table" lay-skin="line" lay-filter="parse-table-demo">
|
||||
<table class="layui-table" lay-skin="line" lay-filter="parse-table-demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{checkbox:true}"></th>
|
||||
@ -123,9 +126,9 @@ body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
<td>人生就像是一场修行c</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<table class="layui-table" lay-filter="parse-table-demo">
|
||||
<table class="layui-table" lay-filter="parse-table-demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<td rowspan="2" lay-data="{field:'louceng'}">楼层</td>
|
||||
@ -162,12 +165,8 @@ body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
<td>102</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script type="text/html" id="toolbarDemo">
|
||||
<i class="layui-icon" data-type="add"></i>
|
||||
<i class="layui-icon" data-type="delete"></i>
|
||||
</script>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script src="../src/layui.js" charset="utf-8"></script>
|
||||
<script>
|
||||
@ -175,30 +174,75 @@ layui.use('table', function(){
|
||||
var table = layui.table;
|
||||
|
||||
//渲染
|
||||
table.render({
|
||||
window.ins1 = table.render({
|
||||
elem: '#test'
|
||||
,height: 350
|
||||
,height: 400
|
||||
,title: '用户数据表'
|
||||
,url: 'json/table/demo1.json'
|
||||
//,size: 'sm'
|
||||
,page: {
|
||||
|
||||
}
|
||||
,totalRow: true
|
||||
,limit: 30
|
||||
,toolbar: '#toolbarDemo'
|
||||
,cols: [[
|
||||
{type: 'checkbox', fixed: 'left'}
|
||||
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
|
||||
{type: 'radio', fixed: 'left'}
|
||||
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
|
||||
,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
|
||||
,{field:'email', title:'邮箱', width:150}
|
||||
,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(x){
|
||||
return '<em>'+ x.email +'</em>'
|
||||
}}
|
||||
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
|
||||
,{field:'city', title:'城市', width:100}
|
||||
,{field:'sign', title:'签名'}
|
||||
,{field:'experience', title:'积分', width:80, sort: true}
|
||||
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
|
||||
,{field:'ip', title:'IP', width:120}
|
||||
,{field:'logins', title:'登入次数', width:100, sort: true}
|
||||
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
|
||||
,{field:'joinTime', title:'加入时间', width:120}
|
||||
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
|
||||
]]
|
||||
/*
|
||||
,response: {
|
||||
statusName: 'status'
|
||||
,statusCode: 200
|
||||
}
|
||||
,parseData: function(res){
|
||||
return {
|
||||
"status": res.status
|
||||
,"msg": res.message
|
||||
,"count": res.total
|
||||
,"data": res.data.list
|
||||
};
|
||||
}
|
||||
*/
|
||||
});
|
||||
|
||||
//工具栏事件
|
||||
table.on('toolbar(test)', function(obj){
|
||||
var checkStatus = table.checkStatus(obj.config.id);
|
||||
switch(obj.event){
|
||||
case 'add':
|
||||
layer.msg('添加');
|
||||
break;
|
||||
case 'update':
|
||||
layer.msg('编辑');
|
||||
break;
|
||||
case 'delete':
|
||||
layer.msg('删除');
|
||||
break;
|
||||
case 'getCheckData':
|
||||
var data = checkStatus.data;
|
||||
layer.alert(JSON.stringify(data));
|
||||
break;
|
||||
case 'getCheckLength':
|
||||
var data = checkStatus.data;
|
||||
layer.msg('选中了：'+ data.length + ' 个');
|
||||
break;
|
||||
case 'isAll':
|
||||
layer.msg(checkStatus.isAll ? '全选': '未全选')
|
||||
break;
|
||||
};
|
||||
});
|
||||
|
||||
table.render({
|
||||
@ -212,21 +256,20 @@ layui.use('table', function(){
|
||||
,last: false
|
||||
,layout: ['limit', 'prev', 'page', 'next', 'count'] //自定义分页布局
|
||||
}
|
||||
,height: 300
|
||||
//,height: 300
|
||||
,cellMinWidth: 80
|
||||
//,skin: 'line'
|
||||
,cols: [[
|
||||
{type:'numbers'}
|
||||
,{type: 'radio'}
|
||||
,{field:'id', title:'ID', unresize: true, sort: true}
|
||||
,{field:'username', title:'用户名', templet: '#usernameTpl'}
|
||||
,{field:'email', title:'邮箱', edit: 'select'}
|
||||
,{field:'sex', title:'性别', edit: 'switch', templet: '#switchTpl', minWidth: 85, align:'center'}
|
||||
,{field:'email', title:'邮箱'}
|
||||
,{field:'sex', title:'性别', templet: '#switchTpl', minWidth: 85, align:'center'}
|
||||
,{field:'lock', title:'是否锁定', templet: '#checkboxTpl', minWidth: 110, align:'center'}
|
||||
,{field:'city', title:'城市'}
|
||||
]]
|
||||
});
|
||||
|
||||
|
||||
//监听表格行点击
|
||||
table.on('tr', function(obj){
|
||||
console.log(obj)
|
||||
@ -238,21 +281,28 @@ layui.use('table', function(){
|
||||
});
|
||||
|
||||
//监听表格单选框选择
|
||||
table.on('radio(test2)', function(obj){
|
||||
table.on('radio(test)', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
//监听表格单选框选择
|
||||
table.on('rowDouble(test)', function(obj){
|
||||
console.log(obj);
|
||||
});
|
||||
|
||||
//监听单元格编辑
|
||||
table.on('edit(test2)', function(obj){
|
||||
table.on('edit(test)', function(obj){
|
||||
var value = obj.value //得到修改后的值
|
||||
,data = obj.data //得到所在行所有键值
|
||||
,field = obj.field; //得到字段
|
||||
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
//监听工具条
|
||||
//监听行工具事件
|
||||
table.on('tool(test)', function(obj){
|
||||
var data = obj.data;
|
||||
//console.log(obj)
|
||||
if(obj.event === 'del'){
|
||||
layer.confirm('真的删除行么', function(index){
|
||||
obj.del();
|
||||
@ -261,10 +311,10 @@ layui.use('table', function(){
|
||||
} else if(obj.event === 'edit'){
|
||||
layer.prompt({
|
||||
formType: 2
|
||||
,value: data.username
|
||||
,value: data.email
|
||||
}, function(value, index){
|
||||
obj.update({
|
||||
username: value
|
||||
email: value
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
@ -275,7 +325,7 @@ layui.use('table', function(){
|
||||
table.on('sort(test)', function(obj){
|
||||
console.log(this, obj.field, obj.type)
|
||||
|
||||
//return;
|
||||
return;
|
||||
//服务端排序
|
||||
table.reload('test', {
|
||||
initSort: obj
|
||||
@ -287,6 +337,8 @@ layui.use('table', function(){
|
||||
});
|
||||
});
|
||||
|
||||
//return;
|
||||
|
||||
//直接赋值数据
|
||||
table.render({
|
||||
elem: '#demo'
|
||||
@ -406,21 +458,7 @@ layui.use('table', function(){
|
||||
|
||||
|
||||
var $ = layui.jquery, active = {
|
||||
getCheckData: function(){
|
||||
var checkStatus = table.checkStatus('test')
|
||||
,data = checkStatus.data;
|
||||
layer.alert(JSON.stringify(data));
|
||||
}
|
||||
,getCheckLength: function(){
|
||||
var checkStatus = table.checkStatus('test')
|
||||
,data = checkStatus.data;
|
||||
layer.msg('选中了：'+ data.length + ' 个');
|
||||
}
|
||||
,isAll: function(){
|
||||
var checkStatus = table.checkStatus('test');
|
||||
layer.msg(checkStatus.isAll ? '全选': '未全选')
|
||||
}
|
||||
,parseTable: function(){
|
||||
parseTable: function(){
|
||||
table.init('parse-table-demo', {
|
||||
limit: 3
|
||||
});
|
||||
@ -428,12 +466,6 @@ layui.use('table', function(){
|
||||
,add: function(){
|
||||
table.addRow('test')
|
||||
}
|
||||
,delete: function(){
|
||||
layer.confirm('确认删除吗？', function(index){
|
||||
table.deleteRow('test')
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
};
|
||||
$('i').on('click', function(){
|
||||
var type = $(this).data('type');
|
||||
|
||||
@ -88,9 +88,10 @@ layui.use('upload', function(){
|
||||
|
||||
var uploadInst = upload.render({
|
||||
elem: '#test1'
|
||||
,url: '/upload/'
|
||||
,url: 'http://httpbin.org/image'
|
||||
,size: 2000 //限制文件大小，单位 KB
|
||||
,accept: 'file'
|
||||
//,accept: 'file'
|
||||
,method: 'get'
|
||||
,fileAccept: 'image/*'
|
||||
,exts: "jpg|png|gif|bmp|jpeg|pdf"
|
||||
,data: { //额外参数
|
||||
|
||||
@ -30,7 +30,7 @@ var argv = require('minimist')(process.argv.slice(2), {
|
||||
]
|
||||
|
||||
//模块
|
||||
,mods = 'laytpl,laypage,laydate,jquery,layer,element,upload,form,tree,table,carousel,rate,util,flow,layedit,code'
|
||||
,mods = 'laytpl,laypage,laydate,jquery,layer,element,upload,slider,form,tree,table,carousel,rate,util,flow,colorpicker,layedit,code'
|
||||
|
||||
//发行版本目录
|
||||
,releaseDir = './release/zip/layui-v' + pkg.version
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "layui-src",
|
||||
"realname": "layui",
|
||||
"version": "2.3.0",
|
||||
"version": "2.4.0",
|
||||
"independents": {
|
||||
"layim": "3.7.7"
|
||||
"layim": "3.7.8"
|
||||
},
|
||||
"description": "Classic modular front-end component library",
|
||||
"main": "layui.js",
|
||||
|
||||
@ -20,7 +20,7 @@ input,button,textarea,select,optgroup,option{font-family: inherit; font-size: in
|
||||
pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}
|
||||
|
||||
/** 初始化全局标签 **/
|
||||
body{line-height: 24px; font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;}
|
||||
body{line-height: 24px; font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;}
|
||||
hr{height: 1px; margin: 10px 0; border: 0; clear: both;}
|
||||
a{color: #333; text-decoration:none; }
|
||||
a:hover{color: #777;}
|
||||
@ -207,7 +207,9 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.layui-icon-cellphone:before{content:"\e678"}
|
||||
.layui-icon-screen-full:before{content:"\e622";}
|
||||
.layui-icon-screen-restore:before{content:"\e758";}
|
||||
|
||||
.layui-icon-cols:before{content:"\e610";}
|
||||
.layui-icon-export:before{content:"\e67d";}
|
||||
.layui-icon-print:before {content:"\e66d";}
|
||||
|
||||
/* 基本布局 */
|
||||
.layui-main{position: relative; width: 1140px; margin: 0 auto;}
|
||||
@ -594,7 +596,7 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
|
||||
.layui-form-select dl dd{padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
||||
.layui-form-select dl dt{font-size: 12px; color: #999;}
|
||||
.layui-form-select dl dd{cursor: pointer;}
|
||||
.layui-form-select dl dd:hover{background-color: #f2f2f2;}
|
||||
.layui-form-select dl dd:hover{background-color: #f2f2f2; -webkit-transition: .5s all; transition: .5s all;}
|
||||
.layui-form-select .layui-select-group dd{padding-left: 20px;}
|
||||
.layui-form-select dl dd.layui-select-tips{padding-left: 10px !important; color: #999;}
|
||||
.layui-form-select dl dd.layui-this{background-color: #5FB878; color: #fff;}
|
||||
@ -621,9 +623,9 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
|
||||
.layui-form-checked i, .layui-form-checked:hover i{color: #5FB878;}
|
||||
.layui-form-item .layui-form-checkbox{margin-top: 4px;}
|
||||
|
||||
/* 复选框-原始风格 */.layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; border: none!important; margin-right: 0; padding-right: 0; background: none;}
|
||||
.layui-form-checkbox[lay-skin="primary"] span{float: right; padding-right: 15px; line-height: 18px; background: none; color: #666;}
|
||||
.layui-form-checkbox[lay-skin="primary"] i{position: relative; top: 0; width: 16px; height: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
|
||||
/* 复选框-原始风格 */.layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 28px; padding-right: 0; background: none;}
|
||||
.layui-form-checkbox[lay-skin="primary"] span{padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #666;}
|
||||
.layui-form-checkbox[lay-skin="primary"] i{right: auto; left: 0; width: 16px; height: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
|
||||
.layui-form-checkbox[lay-skin="primary"]:hover i{border-color: #5FB878; color: #fff;}
|
||||
.layui-form-checked[lay-skin="primary"] i{border-color: #5FB878; background-color: #5FB878; color: #fff;}
|
||||
.layui-checkbox-disbaled[lay-skin="primary"] span{background: none!important; color: #c2c2c2;}
|
||||
@ -759,6 +761,8 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
|
||||
.layui-table thead tr,
|
||||
.layui-table-header,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-total tr,
|
||||
.layui-table-patch,
|
||||
.layui-table-mend,
|
||||
.layui-table[lay-even] tr:nth-child(even),
|
||||
@ -771,11 +775,14 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
|
||||
.layui-table[lay-skin="line"],
|
||||
.layui-table[lay-skin="row"],
|
||||
.layui-table-view,
|
||||
.layui-table-header,
|
||||
.layui-table-tool,
|
||||
.layui-table-header,
|
||||
.layui-table-col-set,
|
||||
.layui-table-total,
|
||||
.layui-table-page,
|
||||
.layui-table-fixed-r,
|
||||
.layui-table-tips-main{border-width: 1px; border-style: solid; border-color: #e6e6e6;}
|
||||
.layui-table-tips-main,
|
||||
.layui-table-grid-down{border-width: 1px; border-style: solid; border-color: #e6e6e6;}
|
||||
|
||||
.layui-table th, .layui-table td{position: relative; padding: 9px 15px; min-height: 20px; line-height: 20px; font-size: 14px;}
|
||||
|
||||
@ -802,23 +809,43 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
|
||||
.layui-table-view .layui-table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;}
|
||||
.layui-table-view .layui-table th,
|
||||
.layui-table-view .layui-table td{padding: 5px 0; border-top: none; border-left: none;}
|
||||
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span{cursor: pointer;}
|
||||
.layui-table-view .layui-table td{cursor: default;}
|
||||
.layui-table-view .layui-form-checkbox[lay-skin="primary"] i{width: 18px; height: 18px;}
|
||||
.layui-table-view .layui-form-radio{padding: 0;}
|
||||
.layui-table-view .layui-form-radio>i{margin: 0; font-size: 20px;}
|
||||
.layui-table-init{position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 10;}
|
||||
.layui-table-init .layui-icon{position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -15px; font-size: 30px; color: #c2c2c2;}
|
||||
.layui-table-header{border-width: 0; border-bottom-width: 1px; overflow: hidden;}
|
||||
.layui-table-header .layui-table{margin-bottom: -1px;}
|
||||
|
||||
.layui-table-tool .layui-inline[lay-event]{position: relative; width: 26px; height: 26px; padding: 5px; line-height: 16px; margin-right: 10px; text-align: center; color: #333; border: 1px solid #ccc; cursor: pointer; -webkit-transition: .5s all; transition: .5s all;}
|
||||
.layui-table-tool .layui-inline[lay-event]:hover{border: 1px solid #999;}
|
||||
.layui-table-tool-temp{padding-right: 120px;}
|
||||
.layui-table-tool-self{position: absolute; right: 17px; top: 10px;}
|
||||
.layui-table-tool .layui-table-tool-self .layui-inline[lay-event]{margin: 0 0 0 10px;}
|
||||
.layui-table-tool-panel{position: absolute; top: 29px; left: -1px; padding: 5px 0; min-width: 150px; min-height: 40px; border: 1px solid #d2d2d2; text-align: left; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
|
||||
.layui-table-tool-panel li{padding: 0 10px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: .5s all; transition: .5s all;}
|
||||
.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"]{width: 100%;}
|
||||
.layui-table-tool-panel li:hover{background-color: #f2f2f2;}
|
||||
.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"]{padding-left: 28px;}
|
||||
.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] i{position: absolute; left: 0; top: 0;}
|
||||
.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span{padding: 0;}
|
||||
.layui-table-tool .layui-table-tool-self .layui-table-tool-panel{left: auto; right: -1px;}
|
||||
|
||||
.layui-table-col-set{position: absolute; right: 0; top: 0; width: 20px; height: 100%; border-width: 0; border-left-width: 1px; background-color: #fff;}
|
||||
|
||||
.layui-table-sort{width: 10px; height: 20px; margin-left: 5px; cursor: pointer!important;}
|
||||
.layui-table-sort .layui-edge{position: absolute; left: 5px; border-width: 5px;}
|
||||
.layui-table-sort .layui-table-sort-asc{top: 4px; border-top: none; border-bottom-style: solid; border-bottom-color: #b2b2b2;}
|
||||
.layui-table-sort .layui-table-sort-asc{top: 3px; border-top: none; border-bottom-style: solid; border-bottom-color: #b2b2b2;}
|
||||
.layui-table-sort .layui-table-sort-asc:hover{border-bottom-color: #666;}
|
||||
.layui-table-sort .layui-table-sort-desc{bottom: 4px; border-bottom: none; border-top-style: solid; border-top-color: #b2b2b2;}
|
||||
.layui-table-sort .layui-table-sort-desc{bottom: 5px; border-bottom: none; border-top-style: solid; border-top-color: #b2b2b2;}
|
||||
.layui-table-sort .layui-table-sort-desc:hover{border-top-color: #666;}
|
||||
.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc{border-bottom-color: #000;}
|
||||
.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc{border-top-color: #000;}
|
||||
|
||||
.layui-table-cell{height: 28px; line-height: 28px; padding: 0 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
|
||||
.layui-table-cell .layui-form-checkbox[lay-skin="primary"],
|
||||
.layui-table-cell .layui-form-radio[lay-skin="primary"]{top: -1px; vertical-align: middle;}
|
||||
.layui-table-cell .layui-form-radio{padding-right: 0px}
|
||||
.layui-table-cell .layui-form-radio>i{margin-right: 0px;}
|
||||
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: -1px; padding: 0;}
|
||||
.layui-table-cell .layui-table-link{color: #01AAED;}
|
||||
|
||||
.laytable-cell-checkbox,
|
||||
@ -827,15 +854,19 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
|
||||
.laytable-cell-numbers{padding: 0; text-align: center;}
|
||||
|
||||
.layui-table-body{position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px;}
|
||||
.layui-table-body .layui-none{line-height: 40px; text-align: center; color: #999;}
|
||||
.layui-table-fixed{position: absolute; left: 0; top: 0;}
|
||||
.layui-table-body .layui-none{line-height: 26px; padding: 15px; text-align: center; color: #999;}
|
||||
.layui-table-fixed{position: absolute; left: 0; top: 0; z-index: 101;}
|
||||
.layui-table-fixed .layui-table-body{overflow: hidden;}
|
||||
.layui-table-fixed-l{box-shadow: 0 -1px 8px rgba(0,0,0,.08);}
|
||||
.layui-table-fixed-r{left: auto; right: -1px; border-width: 0; border-left-width: 1px; box-shadow: -1px 0 8px rgba(0,0,0,.08);}
|
||||
.layui-table-fixed-r .layui-table-header{position: relative; overflow: visible;}
|
||||
.layui-table-mend{position: absolute; right: -49px; top: 0; height: 100%; width: 50px;}
|
||||
|
||||
.layui-table-tool{position: relative; width: 100%; height: 50px; line-height: 30px; padding: 10px 15px; border-width: 0; border-bottom-width: 1px;}
|
||||
.layui-table-tool{position: relative; z-index: 999; width: 100%; min-height: 50px; line-height: 30px; padding: 10px 15px; border-width: 0; border-bottom-width: 1px;}
|
||||
.layui-table-tool .layui-btn-container .layui-btn{margin-bottom: 0;}
|
||||
|
||||
.layui-table-total{margin-bottom: -1px; border-width: 0; border-top-width: 1px; overflow: hidden;}
|
||||
|
||||
|
||||
.layui-table-page{position: relative; width: 100%; padding: 7px 7px 0; border-width: 0; border-top-width: 1px; height: 41px; margin-bottom: -1px; font-size: 12px;}
|
||||
.layui-table-page>div{height: 26px;}
|
||||
@ -863,13 +894,18 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #C9C9C9;}
|
||||
.layui-table-view .layui-form-checkbox,
|
||||
.layui-table-view .layui-form-radio{top: 0; margin: 0; box-sizing: content-box;}
|
||||
.layui-table-view .layui-form-checkbox{top: -1px; height: 26px; line-height: 26px;}
|
||||
.layui-table-view .layui-form-checkbox i{height: 26px;}
|
||||
|
||||
/* 展开溢出的单元格 */
|
||||
.layui-table-grid .layui-table-cell{overflow: visible;}
|
||||
.layui-table-grid-down{position: absolute; top: 0; right: 0; width: 26px; line-height: 28px; height: 100%; padding: 5px 0; border-width: 0; border-left-width: 1px; text-align: center; background-color: #fff; color: #999; cursor: pointer;}
|
||||
.layui-table-grid-down:hover{background-color: #fbfbfb;}
|
||||
|
||||
body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.1);}
|
||||
.layui-table-tips-main{margin: -44px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #333;}
|
||||
.layui-table-tips-c{position: absolute; right: -3px; top: -12px; width: 18px; height: 18px; padding: 3px; text-align: center; font-weight: 700; border-radius: 100%; font-size: 14px; cursor: pointer; background-color: #666;}
|
||||
.layui-table-tips-c:hover{background-color: #999;}
|
||||
|
||||
body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.12);}
|
||||
.layui-table-tips-main{margin: -44px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #666;}
|
||||
.layui-table-tips-c{position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #666; border-radius: 50%; color: #fff;}
|
||||
.layui-table-tips-c:hover{background-color: #777;}
|
||||
.layui-table-tips-c:before{position: relative; right: -2px;}
|
||||
|
||||
/** 文件上传 **/
|
||||
.layui-upload-file{display: none!important; opacity: .01; filter: Alpha(opacity=1);}
|
||||
@ -883,19 +919,6 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-upload-wrap{position: relative; display: inline-block; vertical-align: middle;}
|
||||
.layui-upload-wrap .layui-upload-file{display: block!important; position: absolute; left: 0; top: 0; z-index: 10; font-size: 100px; width: 100%; height: 100%; opacity: .01; filter: Alpha(opacity=1); cursor: pointer;}
|
||||
|
||||
/** 评分组件 By star1029 **/
|
||||
.layui-rate,
|
||||
.layui-rate *{display: inline-block; vertical-align: middle;}
|
||||
.layui-rate{list-style: none; padding: 10px 5px 10px 0; font-size: 0;}
|
||||
.layui-rate li i.layui-icon{ font-size: 20px; color: #FFB800;}
|
||||
.layui-rate li i.layui-icon{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
|
||||
.layui-rate[readonly] li i:hover{cursor: default; transform: scale(1);}
|
||||
|
||||
/** 代码修饰器 **/
|
||||
.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}
|
||||
|
||||
|
||||
/** 树组件（重写中） **/
|
||||
.layui-tree{line-height: 26px;}
|
||||
.layui-tree li{text-overflow: ellipsis; overflow:hidden; white-space: nowrap;}
|
||||
@ -912,6 +935,10 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-tree-drag{display: none; position: absolute; left: -666px; top: -666px; background-color: #f2f2f2; padding: 5px 10px; border: 1px dotted #000; white-space: nowrap}
|
||||
.layui-tree-drag i{padding-right: 5px;}
|
||||
|
||||
/** 代码修饰器 **/
|
||||
.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}
|
||||
|
||||
|
||||
/** 导航菜单 **/
|
||||
.layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;}
|
||||
.layui-nav *{font-size: 14px;}
|
||||
@ -1106,7 +1133,6 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-carousel[lay-anim="fade"]>*[carousel-item]>.layui-this.layui-carousel-left,
|
||||
.layui-carousel[lay-anim="fade"]>*[carousel-item]>.layui-this.layui-carousel-right{opacity: 0}
|
||||
|
||||
|
||||
/** fixbar **/
|
||||
.layui-fixbar{position: fixed; right: 15px; bottom: 15px; z-index: 9999;}
|
||||
.layui-fixbar li{width: 50px; height: 50px; line-height: 50px; margin-bottom: 1px; text-align:center; cursor: pointer; font-size:30px; background-color: #9F9F9F; color:#fff; border-radius: 2px; opacity: 0.95;}
|
||||
@ -1122,6 +1148,83 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
||||
.layui-util-face ul li{cursor: pointer; float: left; border: 1px solid #e8e8e8; height: 22px; width: 26px; overflow: hidden; margin: -1px 0 0 -1px; padding: 4px 2px; text-align: center;}
|
||||
.layui-util-face ul li:hover{position: relative; z-index: 2; border: 1px solid #eb7350; background: #fff9ec;}
|
||||
|
||||
|
||||
|
||||
/** 评分组件 By star1029 **/
|
||||
.layui-rate,
|
||||
.layui-rate *{display: inline-block; vertical-align: middle;}
|
||||
.layui-rate{padding: 10px 5px 10px 0; font-size: 0;}
|
||||
.layui-rate li i.layui-icon{ font-size: 20px; color: #FFB800;}
|
||||
.layui-rate li i.layui-icon{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
|
||||
.layui-rate[readonly] li i:hover{cursor: default; transform: scale(1);}
|
||||
|
||||
/** 颜色选择器 By star1029 **/
|
||||
.layui-colorpicker{width: 26px; height: 26px; border: 1px solid #EEE; padding: 5px; border-radius: 2px; line-height: 24px; display: inline-block; cursor: pointer;}
|
||||
.layui-colorpicker.layui-colorpicker-lg{width: 34px; height: 34px; line-height: 32px;}
|
||||
.layui-colorpicker.layui-colorpicker-sm{width: 24px; height: 24px; line-height: 22px;}
|
||||
.layui-colorpicker.layui-colorpicker-xs{width: 22px; height: 22px; line-height: 20px;}
|
||||
.layui-colorpicker .layui-colorpicker-trigger-bgcolor{display: block; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
|
||||
.layui-colorpicker .layui-colorpicker-trigger-span{display: block; height: 100%; box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); border-radius: 2px; text-align: center;}
|
||||
.layui-colorpicker .layui-colorpicker-trigger-i{display: inline-block; color: #FFF; font-size: 12px;}
|
||||
.layui-colorpicker .layui-colorpicker-trigger-i.layui-icon-close{color: #CCC;}
|
||||
|
||||
.layui-colorpicker-main{width: 280px; padding: 7px; background: #FFF; border: 1px solid #EEE; border-radius: 2px; position: absolute; z-index: 4999;}
|
||||
.layui-colorpicker-main-wrapper{height: 180px; position: relative;}
|
||||
.layui-colorpicker-main-wrapper .colorpicker-basis{width: 260px; height: 100%; position: relative;}
|
||||
.layui-colorpicker-main-wrapper .colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #FFF, hsla(0,0%,100%,0));}
|
||||
.layui-colorpicker-main-wrapper .colorpicker-basis-black{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #000, transparent);}
|
||||
.layui-colorpicker-main-wrapper .colorpicker-basis-cursor{width: 5px; height: 5px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: -3px; right: -3px;}
|
||||
.layui-colorpicker-main-wrapper .colorpicker-side{position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);}
|
||||
.layui-colorpicker-main-wrapper .colorpicker-side-slider{width: 100%; height: 5px; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; left: 0;}
|
||||
.layui-colorpicker-main-alpha{display: none; height: 12px; margin-top: 7px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
|
||||
.layui-colorpicker-main-alpha .colorpicker-alpha-bgcolor{height: 100%; position: relative;}
|
||||
.layui-colorpicker-main-alpha .colorpicker-alpha-slider{width: 5px; height: 100%; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; top: 0;}
|
||||
.layui-colorpicker-main-pre{padding-top: 7px; font-size: 0;}
|
||||
.layui-colorpicker-main-pre .colorpicker-pre{width: 20px; height: 20px; border-radius: 2px; display: inline-block; margin-left: 6px; margin-bottom: 7px; cursor: pointer;}
|
||||
.layui-colorpicker-main-pre .colorpicker-pre:nth-child(11n+1){margin-left: 0;}
|
||||
.layui-colorpicker-main-pre .colorpicker-pre.isalpha{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
|
||||
.layui-colorpicker-main-pre .colorpicker-pre.selected{box-shadow: 0 0 3px 2px #0ad2c1;}
|
||||
.layui-colorpicker-main-pre .colorpicker-pre > div{height: 100%; border-radius: 2px;}
|
||||
.layui-colorpicker-main-input{padding-top: 7px;}
|
||||
.layui-colorpicker-main-input div.layui-inline{margin-right: 22px; font-size: 12px;}
|
||||
.layui-colorpicker-main-input input.layui-input{height: 30px; border-radius: 2px; color: #777;}
|
||||
|
||||
|
||||
/** 滑块 By star1029 **/
|
||||
.layui-slider{height: 4px; background: #e2e2e2; border-radius: 3px; position: relative; z-index: 999;}
|
||||
.layui-slider .layui-slider-bar{border-radius: 3px; position: absolute; z-index: 777; height: 100%;}
|
||||
.layui-slider .layui-slider-step{width: 4px; height: 4px; border-radius: 50%; background: #FFF; position: absolute; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
|
||||
.layui-slider .layui-slider-wrap{width: 36px; height: 36px; position: absolute; top: -16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 888; text-align: center;}
|
||||
.layui-slider .layui-slider-wrap .layui-slider-wrap-btn{width: 12px; height: 12px; border-radius: 50%; background: #FFF; display: inline-block; vertical-align: middle; cursor: pointer; transition: 0.3s;}
|
||||
.layui-slider .layui-slider-wrap:after{content: ""; height: 100%; display: inline-block; vertical-align: middle;}
|
||||
.layui-slider .layui-slider-wrap .layui-slider-wrap-btn:hover, .layui-slider .layui-slider-wrap .layui-slider-wrap-btn.hover{transform: scale(1.2);}
|
||||
.layui-slider .layui-slider-tips{white-space:nowrap; display: none; position: absolute; top: -42px; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
|
||||
.layui-slider > span{display: none; position: absolute; top: -17px; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #000 transparent transparent transparent;}
|
||||
.layui-slider-input{width: 70px; height: 32px; border: 1px solid #AAA; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -15px;}
|
||||
.layui-slider-input .layui-slider-input-btn{display: none; position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #AAA;}
|
||||
.layui-slider-input .layui-slider-input-btn i{cursor: pointer; position: absolute; right: 0; bottom: 0; width: 20px; height: 50%; font-size: 12px; line-height: 16px; text-align: center;}
|
||||
.layui-slider-input .layui-slider-input-btn i:first-child{top: 0; border-bottom: 1px solid #AAA;}
|
||||
.layui-slider-input .layui-slider-input-txt{height: 100%; font-size: 14px;}
|
||||
.layui-slider-input .layui-slider-input-txt input{height: 100%; border: none;}
|
||||
.layui-slider-input.hover{border-color: #009688;}
|
||||
.layui-slider-input .layui-slider-input-btn i:hover{color: #009688;}
|
||||
/*垂直滑块*/
|
||||
.layui-slider.layui-slider-vertical{width: 4px; margin-left: 34px;}
|
||||
.layui-slider.layui-slider-vertical .layui-slider-bar{width: 4px;}
|
||||
.layui-slider.layui-slider-vertical .layui-slider-step{top: auto; left: 0px; -webkit-transform: translateY(50%); transform: translateY(50%);}
|
||||
.layui-slider.layui-slider-vertical .layui-slider-wrap{top: auto; left: -16px; -webkit-transform: translateY(50%); transform: translateY(50%);}
|
||||
.layui-slider.layui-slider-vertical .layui-slider-tips{top: auto; left: 2px; z-index: 1000;}
|
||||
.layui-slider.layui-slider-vertical > span{top: auto; left: 2px; z-index: 1000;}
|
||||
@media \0screen{
|
||||
.layui-slider .layui-slider-wrap-btn{margin-left: -20px;}
|
||||
.layui-slider.layui-slider-vertical .layui-slider-wrap-btn{margin-left: 0; margin-bottom: -20px;}
|
||||
.layui-slider.layui-slider-vertical .layui-slider-tips{margin-left: -8px;}
|
||||
.layui-slider > span{margin-left: 8px;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** 动画 **/
|
||||
.layui-anim{-webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
|
||||
.layui-anim.layui-icon{display: inline-block;}
|
||||
@ -1202,3 +1305,5 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
||||
}
|
||||
.layui-anim-fadeout{-webkit-animation-name: layui-fadeout; animation-name: layui-fadeout}
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
@ -462,6 +462,15 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
|
||||
<glyph glyph-name="cellphone" unicode="" d="M785.066667 896H238.933333a102.4 102.4 0 0 1-102.4-102.4v-819.2a102.4 102.4 0 0 1 102.4-102.4h546.133334a102.4 102.4 0 0 1 102.4 102.4V793.6a102.4 102.4 0 0 1-102.4 102.4zM238.933333 827.733333h546.133334a34.133333 34.133333 0 0 0 34.133333-34.133333v-648.533333H204.8V793.6a34.133333 34.133333 0 0 0 34.133333 34.133333z m546.133334-887.466666H238.933333a34.133333 34.133333 0 0 0-34.133333 34.133333v102.4h614.4v-102.4a34.133333 34.133333 0 0 0-34.133333-34.133333zM512 8.53333299999997m-34.133333 0a34.133333 34.133333 0 1 1 68.266666 0 34.133333 34.133333 0 1 1-68.266666 0ZM426.666667 725.333333h170.666666a17.066667 17.066667 0 0 1 0 34.133334h-170.666666a17.066667 17.066667 0 0 1 0-34.133334z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="print" unicode="" d="M843.946667 603.733333h-47.36V725.333333a90.026667 90.026667 0 0 1-94.72 85.333334H312.32a81.493333 81.493333 0 0 1-85.333333-85.333334v-121.6H170.666667a81.493333 81.493333 0 0 1-85.333334-85.333333v-325.12a89.173333 89.173333 0 0 1 85.333334-93.866667h56.746666v-52.48a89.6 89.6 0 0 1 89.6-89.6h389.973334a89.6 89.6 0 0 1 89.6 89.6v52.48h47.36a97.706667 97.706667 0 0 1 94.72 93.866667V518.4a90.026667 90.026667 0 0 1-94.72 85.333333zM279.466667 725.333333a30.72 30.72 0 0 0 32.853333 33.706667h389.546667c18.773333 0 42.666667-11.52 42.666666-33.706667v-121.6H279.466667z m465.066666-678.4a37.546667 37.546667 0 0 0-37.546666-37.973333H317.013333a37.546667 37.546667 0 0 0-37.546666 37.973333v170.666667a37.546667 37.546667 0 0 0 37.546666 38.4h389.973334a37.546667 37.546667 0 0 0 37.546666-37.973333z m142.506667 146.346667a45.653333 45.653333 0 0 0-42.666667-42.666667h-47.786666v66.133334a89.6 89.6 0 0 1-89.6 89.6H317.013333a89.6 89.6 0 0 1-89.6-89.6v-65.28H170.666667a37.546667 37.546667 0 0 0-33.28 42.666666v324.266667A31.146667 31.146667 0 0 0 170.666667 552.106667h673.28c19.2 0 42.666667-11.52 42.666666-33.706667z m-640 281.173333h-37.546667a13.226667 13.226667 0 0 0 0 26.026667h38.826667a13.226667 13.226667 0 1 0 0-26.026667z m94.293333 0H298.666667a13.226667 13.226667 0 1 0 0 26.026667h42.666666a13.226667 13.226667 0 0 0 0-26.026667z m426.666667-116.48H248.32a13.226667 13.226667 0 0 0 0 26.026667H768a13.226667 13.226667 0 0 0 0-26.026667z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="cols" unicode="" d="M128 448h384V832H128z m64 320h256v-256H192zM576 832v-384h384V832z m320-320H640V768h256zM192 384h64v-384H192zM384 384h64v-384H384zM640 384h64v-384H640zM832 384h64v-384h-64z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="export" unicode="" d="M896.4374528 479.830016c0 26.673152-21.6236032 48.2967552-48.2967552 48.2967552H630.8069376c-26.673152 0-48.2967552-21.6236032-48.2967552-48.2967552v-83.04831147H384.69522773l-2.71428266 5.36849067c-41.336832 87.44686933-35.95195733 204.128256 150.601728 199.94487467v-108.91537067l172.19037866 164.757504L532.58267307 822.7110912v-106.57245867c-228.64418133 5.70709333-263.651328-183.517184-157.433856-314.01028266l4.6891008-5.34664534h-88.46595414c-26.673152 0-48.2967552-21.6236032-48.2967552-48.2967552v-66.78882986h-98.43616426c-26.673152 0-40.4258816-21.6236032-30.71781547-48.2967552l79.10304427-217.33485227c9.70806613-26.673152 39.20145067-48.2967552 65.87460266-48.2967552h603.70670934c23.75898453 0 37.2506624 17.16169387 33.05745066 39.76178347 0.4980736 2.77108053 0.77441707 5.619712 0.77441707 8.53497173v463.765504z m-60.37067093-306.4528896l-21.8464256 60.02223787c-9.70806613 26.673152-39.20145067 48.2967552-65.87460267 48.2967552H303.44697173v30.56708266c0 13.336576 10.81125547 24.14783147 24.14783147 24.14783147h315.28605013v107.1972352c0 13.336576 10.81125547 24.14783147 24.14783147 24.14783147h144.88917333c13.336576 0 24.14783147-10.81125547 24.14783147-24.14783147v-270.2311424z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
|
||||
|
Before Width: | Height: | Size: 271 KiB After Width: | Height: | Size: 274 KiB |
Binary file not shown.
Binary file not shown.
537
src/lay/modules/colorpicker.js
Normal file
537
src/lay/modules/colorpicker.js
Normal file
@ -0,0 +1,537 @@
|
||||
/**
|
||||
|
||||
@Title: layui.colorpicker 颜色选择器
|
||||
@Author: star1029
|
||||
@License：MIT
|
||||
|
||||
*/
|
||||
|
||||
layui.define('jquery',function(exports){
|
||||
"use strict";
|
||||
var $ = layui.jquery
|
||||
|
||||
//外部接口
|
||||
,colorpicker = {
|
||||
config: {}
|
||||
,index: layui.colorpicker ? (layui.colorpicker.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, 'colorpicker', events, callback);
|
||||
}
|
||||
}
|
||||
|
||||
//字符常量
|
||||
,MOD_NAME = 'colorpicker', ELEM_VIEW = 'layui-colorpicker', ELEM_MAIN = 'layui-colorpicker-main', ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close'
|
||||
,PICKER_TRIG_SPAN = 'layui-colorpicker-trigger-span', PICKER_TRIG_I = 'layui-colorpicker-trigger-i', PICKER_SIDE = 'colorpicker-side', PICKER_SIDE_SLIDER = 'colorpicker-side-slider'
|
||||
,PICKER_BASIS = 'colorpicker-basis', PICKER_ALPHA_BG = 'colorpicker-alpha-bgcolor', PICKER_ALPHA_SLIDER = 'colorpicker-alpha-slider', PICKER_BASIS_CUR = 'colorpicker-basis-cursor', PICKER_INPUT = 'layui-colorpicker-main-input'
|
||||
|
||||
//构造器
|
||||
,Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++colorpicker.index;
|
||||
that.config = $.extend({}, that.config, colorpicker.config, options);
|
||||
that.render();
|
||||
}
|
||||
|
||||
//RGB转HSB
|
||||
,RGBToHSB = function(rgb){
|
||||
var hsb = {h:0, s:0, b:0};
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
var delta = max - min;
|
||||
hsb.b = max;
|
||||
hsb.s = max != 0 ? 255*delta/max : 0;
|
||||
if(hsb.s != 0){
|
||||
if(rgb.r == max){
|
||||
hsb.h = (rgb.g - rgb.b) / delta;
|
||||
}else if(rgb.g == max){
|
||||
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
}else{
|
||||
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
}
|
||||
}else{
|
||||
hsb.h = -1;
|
||||
};
|
||||
if(max == min){
|
||||
hsb.h = 0;
|
||||
};
|
||||
hsb.h *= 60;
|
||||
if(hsb.h < 0) {
|
||||
hsb.h += 360;
|
||||
};
|
||||
hsb.s *= 100/255;
|
||||
hsb.b *= 100/255;
|
||||
return hsb;
|
||||
}
|
||||
|
||||
//HEX转HSB
|
||||
,HEXToHSB = function(hex){
|
||||
var hex = hex.indexOf('#') > -1 ? hex.substring(1) : hex;
|
||||
if(hex.length == 3){
|
||||
var num = hex.split("");
|
||||
hex = num[0]+num[0]+num[1]+num[1]+num[2]+num[2]
|
||||
};
|
||||
hex = parseInt(hex, 16);
|
||||
var rgb = {r:hex >> 16, g:(hex & 0x00FF00) >> 8, b:(hex & 0x0000FF)};
|
||||
return RGBToHSB(rgb);
|
||||
}
|
||||
|
||||
//HSB转RGB
|
||||
,HSBToRGB = function(hsb){
|
||||
var rgb = {};
|
||||
var h = hsb.h;
|
||||
var s = hsb.s*255/100;
|
||||
var b = hsb.b*255/100;
|
||||
if(s == 0){
|
||||
rgb.r = rgb.g = rgb.b = b;
|
||||
}else{
|
||||
var t1 = b;
|
||||
var t2 = (255 - s) * b /255;
|
||||
var t3 = (t1 - t2) * (h % 60) /60;
|
||||
if(h == 360) h = 0;
|
||||
if(h < 60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
||||
else if(h < 120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
||||
else if(h < 180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
||||
else if(h < 240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
||||
else if(h < 300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
||||
else if(h < 360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
||||
}
|
||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||
}
|
||||
|
||||
//HSB转HEX
|
||||
,HSBToHEX = function(hsb){
|
||||
var rgb = HSBToRGB(hsb);
|
||||
var hex = [
|
||||
rgb.r.toString(16)
|
||||
,rgb.g.toString(16)
|
||||
,rgb.b.toString(16)
|
||||
];
|
||||
$.each(hex, function(nr, val){
|
||||
if(val.length == 1){
|
||||
hex[nr] = '0' + val;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
}
|
||||
|
||||
//转化成所需rgb格式
|
||||
,RGBSTo = function(rgbs){
|
||||
var regexp = /[0-9]{1,3}/g;
|
||||
var re = rgbs.match(regexp);
|
||||
return {r:re[0], g:re[1], b:re[2]};
|
||||
};
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
bgcolor: '' //默认颜色，默认没有
|
||||
,size: '' //选择器大小
|
||||
,alpha: false //是否开启透明度
|
||||
,format: 'hex' //颜色显示/输入格式，可选 rgb,hex
|
||||
,predefine: false //预定义颜色是否开启
|
||||
,prededata: ['#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1','#1e90ff','#c71585','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)','rgb(250, 212, 0)','rgba(144, 240, 144, 0.5)','rgb(0, 186, 189)','rgba(31, 147, 255, 0.73)']
|
||||
};
|
||||
|
||||
//下拉框渲染
|
||||
Class.prototype.render = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,temp = '<div class="layui-colorpicker layui-colorpicker-'+ options.size +'">'
|
||||
,span = '<span class="'+ ((options.format == 'rgb' && options.alpha) ? 'layui-colorpicker-trigger-bgcolor' : '') +'">' +
|
||||
'<span class="layui-colorpicker-trigger-span '+ (options.format == 'rgb' ? (options.alpha ? 'rgba' : 'torgb') : '') +'"' +
|
||||
'style="background:'+ (options.bgcolor ? (options.bgcolor.match(/[0-9]{1,3}/g).length > 3 ?
|
||||
( options.alpha && options.format == 'rgb' ? options.bgcolor : ('#' + HSBToHEX(RGBToHSB(RGBSTo(options.bgcolor)))) ) : options.bgcolor ) :'') +'">';
|
||||
span += '<i class="layui-icon layui-colorpicker-trigger-i '+ (options.bgcolor ? ICON_PICKER_DOWN : ICON_PICKER_CLOSE) +'"></i></span></span>';
|
||||
temp += span + '</div>';
|
||||
|
||||
//开始插入替代元素
|
||||
var othis = $(options.elem)
|
||||
,hasRender = othis.next('.' + ELEM_VIEW);
|
||||
|
||||
othis.css("display","inline-block");
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||
|
||||
that.elemTemp = $(temp);
|
||||
othis.html(that.elemTemp);
|
||||
|
||||
that.trigger();
|
||||
};
|
||||
|
||||
//颜色选择器插入
|
||||
Class.prototype.show = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,span = $(options.elem)[0];
|
||||
var pre = '';
|
||||
$.each(options.prededata, function(index, value){
|
||||
pre += '<div class="colorpicker-pre '+ (value.match(/[0-9]{1,3}/g).length > 3 ? 'isalpha' : '') +'"><div style="background:'+ value +'"></div></div>'
|
||||
});
|
||||
var elem = that.elem = '<div id="layui-colorpicker'+ that.index +'" class="layui-colorpicker-main"><div class="layui-colorpicker-main-wrapper"><div class="colorpicker-basis"><div class="colorpicker-basis-white"></div><div class="colorpicker-basis-black"></div>' +
|
||||
'<div class="colorpicker-basis-cursor"></div></div><div class="colorpicker-side"><div class="colorpicker-side-slider"></div></div></div><div class="layui-colorpicker-main-alpha" style="display: '+ (options.alpha ? 'block' : 'none') +'"><div class="colorpicker-alpha-bgcolor">' +
|
||||
'<div class="colorpicker-alpha-slider"></div></div></div><div class="layui-colorpicker-main-pre">'+ (options.predefine ? pre :'') +'</div><div class="layui-colorpicker-main-input"><div class="layui-inline"><input type="text" class="layui-input">' +
|
||||
'</input></div><button class="empty layui-btn layui-btn-primary layui-btn-sm">清空</button><button class="confirm layui-btn layui-btn-sm">确定</button></div></div>';
|
||||
|
||||
if($('.layui-colorpicker-main').length && Class.thisElemInd == that.index){
|
||||
that.remove(Class.thisElemInd);
|
||||
}else{
|
||||
if($('.layui-colorpicker-main').length && Class.thisElemInd != that.index && Class.thisElemInd){
|
||||
$('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_SPAN)[0].style.background = Class.bgcolor ;
|
||||
if(!Class.bgcolor){ $('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE) }
|
||||
};
|
||||
that.remove(Class.thisElemInd);
|
||||
//插入到body
|
||||
$('body').append(elem);
|
||||
};
|
||||
Class.thisElemInd = that.index;
|
||||
Class.bgcolor = $('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_SPAN)[0].style.background;
|
||||
|
||||
//根据下拉框的top来判断颜色选择框出现的位置
|
||||
var _top = span.getBoundingClientRect().top
|
||||
,_left = span.getBoundingClientRect().left
|
||||
,_height = span.offsetHeight
|
||||
,_width = span.offsetWidth
|
||||
,bodyheight = window.innerHeight
|
||||
,bodywidth = window.innerWidth
|
||||
,height = $('.layui-colorpicker-main').outerHeight()
|
||||
,width = $('.layui-colorpicker-main').outerWidth()
|
||||
,top,left;
|
||||
//得到选择器的left偏移量
|
||||
left = bodywidth - _left - _width;
|
||||
if(left < _left && left < (width - _width)/2){
|
||||
left = bodywidth - width;
|
||||
}else if(_left < left && _left < (width - _width)/2){
|
||||
left = 0;
|
||||
}else{
|
||||
left = _left - (width - _width)/2;
|
||||
};
|
||||
//得到选择器的top偏移量
|
||||
top = bodyheight - _top - _height;
|
||||
if(top - height < 20){
|
||||
top = _top - height - 2;
|
||||
$('.layui-colorpicker-main').css({"top":top - 11, "left":left});
|
||||
$('.layui-colorpicker-main').animate({top: top + 1});
|
||||
}else{
|
||||
top = _top + _height;
|
||||
$('.layui-colorpicker-main').css({"top":top + 16, "left":left});
|
||||
$('.layui-colorpicker-main').animate({top: top + 1});
|
||||
};
|
||||
};
|
||||
|
||||
//颜色选择器移除
|
||||
Class.prototype.remove = function(index){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,elem = $('#layui-colorpicker'+ (index || that.index));
|
||||
elem.remove();
|
||||
return that;
|
||||
};
|
||||
|
||||
//颜色选择器显示隐藏
|
||||
Class.prototype.trigger = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
//绑定呼出控件事件
|
||||
,showEvent = function(elem){
|
||||
elem.on('click' , function(){
|
||||
//event.stopPropagation();
|
||||
that.show();
|
||||
if($('.layui-colorpicker-main').length){
|
||||
that.val($(this).find('.' + PICKER_TRIG_SPAN)[0]);
|
||||
that.side(that.index - 1);
|
||||
that.events(that.index - 1, $(this).find('.' + PICKER_TRIG_SPAN)[0].style.background);
|
||||
};
|
||||
});
|
||||
};
|
||||
showEvent($(options.elem));
|
||||
};
|
||||
|
||||
//颜色选择器赋值
|
||||
Class.prototype.val = function(e){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,bgcolor = e.style.backgroundColor;
|
||||
//判断是否有背景颜色
|
||||
if(bgcolor){
|
||||
//转化成hsb格式
|
||||
var hsb = RGBToHSB(RGBSTo(bgcolor));
|
||||
//同步滑块的位置及颜色选择器的选择
|
||||
that.select(hsb.h, hsb.s, hsb.b);
|
||||
//如果格式要求为rgb
|
||||
if($(e).hasClass('torgb')){
|
||||
$('.' + PICKER_INPUT).find('input').val(bgcolor);
|
||||
};
|
||||
//如果格式要求为rgba
|
||||
if($(e).hasClass('rgba')){
|
||||
var rgb = RGBSTo(bgcolor);
|
||||
//如果开启透明度而没有设置，则给默认值
|
||||
if(bgcolor.match(/[0-9]{1,3}/g).length == 3){
|
||||
$('.' + PICKER_INPUT).find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 1)');
|
||||
$('.' + PICKER_ALPHA_SLIDER).css("left", 280);
|
||||
}else{
|
||||
$('.' + PICKER_INPUT).find('input').val(bgcolor);
|
||||
var left = bgcolor.slice(bgcolor.lastIndexOf(",") + 1, bgcolor.length - 1) * 280;
|
||||
$('.' + PICKER_ALPHA_SLIDER).css("left", left);
|
||||
};
|
||||
//设置span背景色
|
||||
$('.' + PICKER_ALPHA_BG)[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))';
|
||||
};
|
||||
|
||||
}else{
|
||||
//如果没有背景颜色则默认到最初始的状态
|
||||
that.select(0,100,100);
|
||||
$('.' + PICKER_INPUT).find('input').val("");
|
||||
$('.' + PICKER_ALPHA_BG)[0].style.background = '';
|
||||
$('.' + PICKER_ALPHA_SLIDER).css("left", 280);
|
||||
}
|
||||
};
|
||||
|
||||
//颜色选择器滑动/点击
|
||||
Class.prototype.side = function(ind){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,side = $('.' + PICKER_SIDE)
|
||||
,slider = $('.' + PICKER_SIDE_SLIDER)
|
||||
,basis = $('.' + PICKER_BASIS)
|
||||
,choose = $('.' + PICKER_BASIS_CUR)
|
||||
,alphacolor = $('.' + PICKER_ALPHA_BG)
|
||||
,alphaslider = $('.' + PICKER_ALPHA_SLIDER)
|
||||
,_h = slider[0].offsetTop/180*360
|
||||
,_b = 100 - (choose[0].offsetTop + 3)/180*100
|
||||
,_s = (choose[0].offsetLeft + 3)/260*100
|
||||
,_a = Math.round(alphaslider[0].offsetLeft/280*100)/100
|
||||
,span = $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)
|
||||
,i = $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I)
|
||||
,pre = $('.layui-colorpicker-main-pre').children('.colorpicker-pre').children('div')
|
||||
,torgb,rgba
|
||||
,change = function(x,y,z,a){
|
||||
that.select(x, y, z);
|
||||
var rgb = HSBToRGB({h:x, s:y, b:z});
|
||||
i.addClass(ICON_PICKER_DOWN).removeClass(ICON_PICKER_CLOSE);
|
||||
span[0].style.background = 'rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')';
|
||||
if(torgb){
|
||||
$('.' + PICKER_INPUT).find('input').val('rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')');
|
||||
};
|
||||
if(rgba){
|
||||
var left = 0;
|
||||
left = a * 280;
|
||||
alphaslider.css("left", left);
|
||||
$('.' + PICKER_INPUT).find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')');
|
||||
span[0].style.background = 'rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')';
|
||||
alphacolor[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))'
|
||||
};
|
||||
//回调更改的颜色
|
||||
options.change && options.change($('.' + PICKER_INPUT).find('input').val());
|
||||
}
|
||||
,up = function(){
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
if(span.hasClass('torgb')) torgb = true;
|
||||
if(span.hasClass('rgba')) rgba = true;
|
||||
//右侧主色选择
|
||||
slider.on('mousedown', function(e){
|
||||
var oldtop = this.offsetTop
|
||||
,oldy = e.clientY;
|
||||
var move = function(e){
|
||||
var top = oldtop + (e.clientY - oldy)
|
||||
,maxh = side[0].offsetHeight;
|
||||
if(top < 0)top = 0;
|
||||
if(top > maxh)top = maxh;
|
||||
var h = top/180*360;
|
||||
_h = h;
|
||||
change(h, _s, _b, _a);
|
||||
e.preventDefault();
|
||||
};
|
||||
document.onmousemove = move;
|
||||
document.onmouseup = up;
|
||||
e.preventDefault();
|
||||
});
|
||||
side.on('click', function(e){
|
||||
var top = e.clientY - $(this).offset().top;
|
||||
if(top < 0)top = 0;
|
||||
if(top > this.offsetHeight)top = this.offsetHeight;
|
||||
var h = top/180*360;
|
||||
_h = h;
|
||||
change(h, _s, _b, _a);
|
||||
e.preventDefault();
|
||||
})
|
||||
//中间颜色选择
|
||||
choose.on('mousedown', function(e){
|
||||
var oldtop = this.offsetTop
|
||||
,oldleft = this.offsetLeft
|
||||
,oldy = e.clientY
|
||||
,oldx = e.clientX;
|
||||
var move = function(e){
|
||||
var top = oldtop + (e.clientY - oldy)
|
||||
,left = oldleft + (e.clientX - oldx)
|
||||
,maxh = basis[0].offsetHeight - 3
|
||||
,maxw = basis[0].offsetWidth - 3;
|
||||
if(top < -3)top = -3;
|
||||
if(top > maxh)top = maxh;
|
||||
if(left < -3)left = -3;
|
||||
if(left > maxw)left = maxw;
|
||||
var s = (left + 3)/260*100
|
||||
,b = 100 - (top + 3)/180*100;
|
||||
_b = b;
|
||||
_s = s;
|
||||
change(_h, s, b, _a);
|
||||
e.preventDefault();
|
||||
};
|
||||
document.onmousemove = move;
|
||||
document.onmouseup = up;
|
||||
e.preventDefault();
|
||||
});
|
||||
basis.on('click', function(e){
|
||||
var top = e.clientY - $(this).offset().top - 3
|
||||
,left = e.clientX - $(this).offset().left - 3
|
||||
if(top < -3)top = -3;
|
||||
if(top > this.offsetHeight - 3)top = this.offsetHeight - 3;
|
||||
if(left < -3)left = -3;
|
||||
if(left > this.offsetWidth - 3)left = this.offsetWidth - 3;
|
||||
var s = (left + 3)/260*100
|
||||
,b = 100 - (top + 3)/180*100;
|
||||
_b = b;
|
||||
_s = s;
|
||||
change(_h, s, b, _a);
|
||||
e.preventDefault();
|
||||
});
|
||||
//底部透明度选择
|
||||
alphaslider.on('mousedown', function(e){
|
||||
var oldleft = this.offsetLeft
|
||||
,oldx = e.clientX;
|
||||
var move = function(e){
|
||||
var left = oldleft + (e.clientX - oldx)
|
||||
,maxw = alphacolor[0].offsetWidth;
|
||||
if(left < 0)left = 0;
|
||||
if(left > maxw)left = maxw;
|
||||
var a = Math.round(left /280*100) /100;
|
||||
_a = a;
|
||||
change(_h, _s, _b, a);
|
||||
e.preventDefault();
|
||||
};
|
||||
document.onmousemove = move;
|
||||
document.onmouseup = up;
|
||||
e.preventDefault();
|
||||
});
|
||||
alphacolor.on('click', function(e){
|
||||
var left = e.clientX - $(this).offset().left
|
||||
if(left < 0)left = 0;
|
||||
if(left > this.offsetWidth)left = this.offsetWidth;
|
||||
var a = Math.round(left /280*100) /100;
|
||||
_a = a;
|
||||
change(_h, _s, _b, a);
|
||||
e.preventDefault();
|
||||
});
|
||||
//预定义颜色选择
|
||||
pre.each(function(){
|
||||
$(this).on('click', function(){
|
||||
$(this).parent('.colorpicker-pre').addClass('selected').siblings().removeClass('selected');
|
||||
var color = this.style.backgroundColor
|
||||
,hsb = RGBToHSB(RGBSTo(color))
|
||||
,a = color.slice(color.lastIndexOf(",") + 1, color.length - 1),left;
|
||||
_h = hsb.h;
|
||||
_s = hsb.s;
|
||||
_b = hsb.b;
|
||||
if(color.match(/[0-9]{1,3}/g).length == 3) a = 1;
|
||||
_a = a;
|
||||
left = a * 280;
|
||||
change(hsb.h, hsb.s, hsb.b, a);
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
//颜色选择器hsb转换
|
||||
Class.prototype.select = function(h,s,b){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,hex = HSBToHEX({h:h, s:100, b:100})
|
||||
,color = HSBToHEX({h:h, s:s, b:b})
|
||||
,sidetop = h/360*180
|
||||
,top = 180 - b/100*180 - 3
|
||||
,left = s/100*260 - 3;
|
||||
//滑块的top
|
||||
$('.' + PICKER_SIDE_SLIDER).css("top", sidetop);
|
||||
//颜色选择器的背景
|
||||
$('.' + PICKER_BASIS)[0].style.background = '#' + hex;
|
||||
//选择器的top left
|
||||
$('.' + PICKER_BASIS).find('.' + PICKER_BASIS_CUR).css({"top": top, "left": left});
|
||||
//选中的颜色
|
||||
$('.' + PICKER_INPUT).find('input').val('#' + color);
|
||||
};
|
||||
|
||||
//颜色选择器输入
|
||||
Class.prototype.events = function(ind, color){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,hide = function(){
|
||||
$('.' + PICKER_ALPHA_BG)[0].style.background = '';
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '';
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
|
||||
};
|
||||
//点击确认按钮
|
||||
$('.' + PICKER_INPUT).find('.confirm').on('click', function(){
|
||||
var value = $('.' + PICKER_INPUT).find('input').val()
|
||||
,hsb = {};
|
||||
if(value.indexOf(',') > -1){
|
||||
hsb = RGBToHSB(RGBSTo(value));
|
||||
that.select(hsb.h, hsb.s, hsb.b);
|
||||
$('.' + PICKER_INPUT).find('input').val(value);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '#' + HSBToHEX(hsb);
|
||||
if(value.match(/[0-9]{1,3}/g).length > 3 && $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN).hasClass('rgba')){
|
||||
var left = value.slice(value.lastIndexOf(",") + 1, value.length - 1) * 280;
|
||||
$('.' + PICKER_ALPHA_SLIDER).css("left", left);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = value;
|
||||
};
|
||||
}else{
|
||||
hsb = HEXToHSB(value);
|
||||
that.select(hsb.h, hsb.s, hsb.b);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '#' + HSBToHEX(hsb);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN);
|
||||
};
|
||||
color = value;
|
||||
options.change && options.change($('.' + PICKER_INPUT).find('input').val());
|
||||
that.remove(ind + 1);
|
||||
});
|
||||
//点击清空按钮
|
||||
$('.' + PICKER_INPUT).find('.empty').on('click', function(){
|
||||
hide();
|
||||
color = '';
|
||||
that.remove(ind + 1);
|
||||
});
|
||||
//点击页面其他地方
|
||||
$(document).off().on('click', function(event){
|
||||
var main = $('.' + ELEM_MAIN)
|
||||
,item = $('.' + ELEM_VIEW)
|
||||
,value = $('.' + PICKER_INPUT).find('input').val();
|
||||
if(!main.is(event.target) && main.has(event.target).length === 0 && main.length && !item.is(event.target) && item.has(event.target).length === 0 && item.length){
|
||||
if(!color){ hide(); }
|
||||
else{
|
||||
var hsb = RGBToHSB(RGBSTo(color));
|
||||
that.select(hsb.h, hsb.s, hsb.b);
|
||||
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = color;
|
||||
if(value.indexOf(',') > -1){
|
||||
$('.' + PICKER_INPUT).find('input').val(color);
|
||||
};
|
||||
};
|
||||
that.remove(ind + 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//核心入口
|
||||
colorpicker.render = function(options){
|
||||
var inst = new Class(options);
|
||||
};
|
||||
|
||||
exports(MOD_NAME, colorpicker);
|
||||
})
|
||||
@ -153,7 +153,12 @@ layui.define('layer', function(exports){
|
||||
if(top + dlHeight > $win.height() && top >= dlHeight){
|
||||
reElem.addClass(CLASS + 'up');
|
||||
}
|
||||
}, hideDown = function(choose){
|
||||
|
||||
followScroll();
|
||||
}
|
||||
|
||||
//隐藏下拉
|
||||
,hideDown = function(choose){
|
||||
reElem.removeClass(CLASS+'ed ' + CLASS+'up');
|
||||
input.blur();
|
||||
nearElem = null;
|
||||
@ -166,6 +171,27 @@ layui.define('layer', function(exports){
|
||||
input && input.val(initValue);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//定位下拉滚动条
|
||||
,followScroll = function(){
|
||||
var thisDd = dl.children('dd.'+ THIS);
|
||||
|
||||
if(!thisDd[0]) return;
|
||||
|
||||
var posTop = thisDd.position().top
|
||||
,dlHeight = dl.height()
|
||||
,ddHeight = thisDd.height();
|
||||
|
||||
//若选中元素在滚动条不可见底部
|
||||
if(posTop > dlHeight){
|
||||
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
|
||||
}
|
||||
|
||||
//若选择玄素在滚动条不可见顶部
|
||||
if(posTop < 0){
|
||||
dl.scrollTop(posTop + dl.scrollTop() - 5);
|
||||
}
|
||||
};
|
||||
|
||||
//点击标题区域
|
||||
@ -201,56 +227,53 @@ layui.define('layer', function(exports){
|
||||
}
|
||||
|
||||
//标注 dd 的选中状态
|
||||
var setThisDd = function(prevNext, thisElem){
|
||||
var nearDd, cacheNearElem;
|
||||
var setThisDd = function(prevNext, thisElem1){
|
||||
var nearDd, cacheNearElem
|
||||
e.preventDefault();
|
||||
|
||||
//得到当前队列元素
|
||||
thisElem = function(){
|
||||
if(thisElem && thisElem[0]){
|
||||
return thisElem;
|
||||
var thisElem = function(){
|
||||
var thisDd = dl.children('dd.'+ THIS);
|
||||
|
||||
//如果是搜索状态，且按 Down 键，且当前可视 dd 元素在选中元素之前，
|
||||
//则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素，以保证递归不中断
|
||||
if(dl.children('dd.'+ HIDE)[0] && prevNext === 'next'){
|
||||
var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')')
|
||||
,firstIndex = showDd.eq(0).index();
|
||||
if(firstIndex >=0 && firstIndex < thisDd.index() && !showDd.hasClass(THIS)){
|
||||
return showDd.eq(0).prev()[0] ? showDd.eq(0).prev() : dl.children(':last');
|
||||
}
|
||||
}
|
||||
|
||||
if(thisElem1 && thisElem1[0]){
|
||||
return thisElem1;
|
||||
}
|
||||
if(nearElem && nearElem[0]){
|
||||
return nearElem;
|
||||
}
|
||||
return dds.eq(index);
|
||||
|
||||
return thisDd;
|
||||
//return dds.eq(index);
|
||||
}();
|
||||
|
||||
cacheNearElem = thisElem[prevNext](); //当前元素的附近元素
|
||||
nearDd = thisElem[prevNext]('dd'); //当前元素的 dd 元素
|
||||
nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); //当前可视元素的 dd 元素
|
||||
|
||||
//如果附近的元素不存在，则停止执行
|
||||
if(!cacheNearElem[0]) return;
|
||||
//如果附近的元素不存在，则停止执行，并清空 nearElem
|
||||
if(!cacheNearElem[0]) return nearElem = null;
|
||||
|
||||
//记录附近的元素，让其成为下一个当前元素
|
||||
nearElem = thisElem[prevNext]();
|
||||
|
||||
//如果附近不是 dd ，或者附近的 dd 元素是禁用状态，则进入递归查找
|
||||
if(!nearDd[0] || nearDd.hasClass(DISABLED)){
|
||||
if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){
|
||||
return setThisDd(prevNext, nearElem);
|
||||
}
|
||||
|
||||
//标注样式
|
||||
nearDd.addClass(THIS).siblings().removeClass(THIS);
|
||||
|
||||
//定位滚动条
|
||||
var ddThis = dl.children('dd.layui-this')
|
||||
,posTop = ddThis.position().top
|
||||
,dlHeight = dl.height()
|
||||
,ddHeight = ddThis.height();
|
||||
|
||||
//若选中元素在滚动条不可见底部
|
||||
if(posTop > dlHeight){
|
||||
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
|
||||
}
|
||||
|
||||
//若选择玄素在滚动条不可见顶部
|
||||
if(posTop < 0){
|
||||
dl.scrollTop(posTop + dl.scrollTop());
|
||||
}
|
||||
nearDd.addClass(THIS).siblings().removeClass(THIS); //标注样式
|
||||
followScroll(); //定位滚动条
|
||||
};
|
||||
|
||||
|
||||
if(keyCode === 38) setThisDd('prev'); //Up 键
|
||||
if(keyCode === 40) setThisDd('next'); //Down 键
|
||||
|
||||
@ -297,6 +320,8 @@ layui.define('layer', function(exports){
|
||||
if(value === ''){
|
||||
dl.find('.'+NONE).remove();
|
||||
}
|
||||
|
||||
followScroll(); //定位滚动条
|
||||
};
|
||||
|
||||
if(isSearch){
|
||||
|
||||
@ -287,7 +287,7 @@ Class.pt.creat = function(){
|
||||
layer.closeAll('dialog');
|
||||
break;
|
||||
case 2:
|
||||
var content = config.content = conType ? config.content : [config.content||'http://layer.layui.com', 'auto'];
|
||||
var content = config.content = conType ? config.content : [config.content||'', 'auto'];
|
||||
config.content = '<iframe scrolling="'+ (config.content[1]||'auto') +'" allowtransparency="true" id="'+ doms[4] +''+ times +'" name="'+ doms[4] +''+ times +'" onload="this.className=\'\';" class="layui-layer-load" frameborder="0" src="' + config.content[0] + '"></iframe>';
|
||||
break;
|
||||
case 3:
|
||||
|
||||
322
src/lay/modules/slider.js
Normal file
322
src/lay/modules/slider.js
Normal file
@ -0,0 +1,322 @@
|
||||
/**
|
||||
|
||||
@Title: layui.slider 滑块
|
||||
@Author: star1029
|
||||
@License：MIT
|
||||
|
||||
*/
|
||||
|
||||
layui.define(['jquery', 'form'], function(exports){
|
||||
"use strict";
|
||||
var $ = layui.jquery
|
||||
,form = layui.form
|
||||
|
||||
//外部接口
|
||||
,slider = {
|
||||
config: {}
|
||||
,index: layui.slider ? (layui.slider.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);
|
||||
}
|
||||
}
|
||||
|
||||
//字符常量
|
||||
,MOD_NAME = 'slider', ELEM_VIEW = 'layui-slider', SLIDER_BAR = 'layui-slider-bar', SLIDER_WRAP = 'layui-slider-wrap', SLIDER_WRAP_BTN = 'layui-slider-wrap-btn'
|
||||
,SLIDER_TIPS = 'layui-slider-tips', SLIDER_INPUT = 'layui-slider-input', SLIDER_INPUT_TXT = 'layui-slider-input-txt', SLIDER_INPUT_BTN = 'layui-slider-input-btn'
|
||||
|
||||
//构造器
|
||||
,Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++slider.index;
|
||||
that.config = $.extend({}, that.config, slider.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
min: 0 //最小值
|
||||
,max: 100 //最大值，默认100
|
||||
,value: 0 //初始值，默认为0
|
||||
,step: 1 //间隔值
|
||||
,showstep: false //间隔点开启
|
||||
,tips: true //文字提示，开启
|
||||
,input: false //输入框，关闭
|
||||
,range: false //范围选择，与输入框不能同时开启，默认关闭
|
||||
,vertical: false //垂直滑块，默认横向
|
||||
,height: 200 //配合 vertical 参数使用，默认200px
|
||||
,disabled: false //滑块禁用，默认关闭
|
||||
,color: '#009688' //主题颜色
|
||||
};
|
||||
|
||||
//滑块渲染
|
||||
Class.prototype.render = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
|
||||
//最小值为零
|
||||
options.min = options.min < 0 ? 0 : options.min;
|
||||
|
||||
//判断是否开启双滑块
|
||||
if(options.range){
|
||||
options.value = typeof(options.value) == 'object' ? options.value : [options.min, options.value];
|
||||
var minValue = Math.min(options.value[0], options.value[1])
|
||||
,maxValue = Math.max(options.value[0], options.value[1]);
|
||||
options.value[0] = minValue > options.min ? minValue : options.min;
|
||||
options.value[1] = maxValue > options.min ? maxValue : options.min;
|
||||
options.value[0] = options.value[0] > options.max ? options.max : options.value[0];
|
||||
options.value[1] = options.value[1] > options.max ? options.max : options.value[1];
|
||||
var scaleFir = Math.floor((options.value[0] - options.min) / (options.max - options.min) * 100)
|
||||
,scaleSec = Math.floor((options.value[1] - options.min) / (options.max - options.min) * 100)
|
||||
,scale = scaleSec - scaleFir + '%';
|
||||
scaleFir = scaleFir + '%';
|
||||
scaleSec = scaleSec + '%';
|
||||
}else{
|
||||
options.value = typeof(options.value) == 'object' ? Math.min(options.value[0], options.value[1]) : options.value;
|
||||
options.value = options.value > options.min ? options.value : options.min;
|
||||
var scale = Math.floor((options.value - options.min) / (options.max - options.min) * 100) + '%';
|
||||
};
|
||||
|
||||
//如果禁用，颜色为统一的灰色
|
||||
var color = options.disabled ? '#c2c2c2' : options.color;
|
||||
|
||||
//滑块
|
||||
var temp = '<div class="layui-slider '+ (options.vertical ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="layui-slider-tips"></div><span></span>' : '') +
|
||||
'<div class="layui-slider-bar" style="background:'+ color +'; '+ (options.vertical ? 'height' : 'width') +':'+ scale +';'+ (options.vertical ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
|
||||
'<div class="layui-slider-wrap-btn" style="border: 2px solid '+ color +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ color +';"></div></div>' : '') +'</div>';
|
||||
|
||||
var othis = $(options.elem)
|
||||
,hasRender = othis.next('.' + ELEM_VIEW);
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||
that.elemTemp = $(temp);
|
||||
|
||||
//把数据缓存到滑块上
|
||||
if(options.range){
|
||||
that.elemTemp.find('.' + SLIDER_WRAP).eq(0).data('value', options.value[0]);
|
||||
that.elemTemp.find('.' + SLIDER_WRAP).eq(1).data('value', options.value[1]);
|
||||
}else{
|
||||
that.elemTemp.find('.' + SLIDER_WRAP).data('value', options.value);
|
||||
};
|
||||
|
||||
//插入替代元素
|
||||
othis.html(that.elemTemp);
|
||||
|
||||
//垂直滑块
|
||||
if(options.vertical){
|
||||
that.elemTemp.height(options.height + 'px');
|
||||
};
|
||||
|
||||
//显示间断点
|
||||
if(options.showstep){
|
||||
var number = (options.max - options.min) / options.step, item = '';
|
||||
for(var i = 1; i < number + 1; i++) {
|
||||
var step = i * 100 / number;
|
||||
if(step < 100){
|
||||
item += '<div class="layui-slider-step" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ step +'%"></div>'
|
||||
}
|
||||
};
|
||||
that.elemTemp.append(item);
|
||||
};
|
||||
|
||||
//插入输入框
|
||||
if(options.input && !options.range){
|
||||
othis.css("position","relative");
|
||||
othis.append('<div class="layui-slider-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>');
|
||||
othis.find('.' + SLIDER_INPUT_TXT).children('input').val(options.value);
|
||||
if(!options.vertical) that.elemTemp.css("width", "80%");
|
||||
if(options.vertical) that.elemTemp.next('.' + SLIDER_INPUT).css({"left":0, "top":"auto", "bottom":"-45px"});
|
||||
};
|
||||
|
||||
//给未禁止的滑块滑动事件
|
||||
if(!options.disabled){
|
||||
that.slide();
|
||||
}else{
|
||||
that.elemTemp.find('.' + SLIDER_WRAP_BTN).css("cursor", "not-allowed");
|
||||
};
|
||||
|
||||
//划过滑块显示数值
|
||||
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
|
||||
var sliderWidth = options.vertical ? options.height : that.elemTemp[0].offsetWidth
|
||||
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
|
||||
,tipsLeft = options.vertical ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft
|
||||
,left = tipsLeft / sliderWidth * 100
|
||||
,value = $(this).parent().data('value')
|
||||
,tipsTxt = options.setTips ? options.setTips(value) : value;
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
|
||||
if(options.vertical){
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"30px", "display":"inline-block"});
|
||||
that.elemTemp.children('span').css({"bottom":left + '%', "margin-bottom":"18px", "display":"inline-block"});
|
||||
}else{
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "display":"inline-block"});
|
||||
that.elemTemp.children('span').css({"left":left + '%', "display":"inline-block"});
|
||||
};
|
||||
}).on('mouseout', function(){
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
|
||||
that.elemTemp.children('span').css("display", "none");
|
||||
});
|
||||
};
|
||||
|
||||
//滑块滑动
|
||||
Class.prototype.slide = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,sliderAct = that.elemTemp
|
||||
,sliderWidth = options.vertical ? options.height : sliderAct[0].offsetWidth
|
||||
,sliderWrap = sliderAct.find('.' + SLIDER_WRAP)
|
||||
,sliderTxt = sliderAct.next('.' + SLIDER_INPUT)
|
||||
,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val()
|
||||
,step = 100 / ((options.max - options.min) / Math.ceil(options.step))
|
||||
,change = function(offsetValue, index){
|
||||
if(Math.ceil(offsetValue) * step > 100){
|
||||
offsetValue = Math.ceil(offsetValue) * step
|
||||
}else{
|
||||
offsetValue = Math.round(offsetValue) * step
|
||||
};
|
||||
offsetValue = offsetValue > 100 ? 100: offsetValue;
|
||||
sliderWrap.eq(index).css((options.vertical ?'bottom':'left'), offsetValue + '%');
|
||||
var firLeft = valueTo(sliderWrap[0].offsetLeft)
|
||||
,secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
|
||||
if(options.vertical){
|
||||
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"30px"});
|
||||
sliderAct.children('span').css({"bottom":offsetValue + '%', "margin-bottom":"18px"});
|
||||
firLeft = valueTo(sliderWidth - sliderWrap[0].offsetTop - sliderWrap.height());
|
||||
secLeft = options.range ? valueTo(sliderWidth - sliderWrap[1].offsetTop - sliderWrap.height()) : 0;
|
||||
}else{
|
||||
sliderAct.find('.' + SLIDER_TIPS).css("left",offsetValue + '%');
|
||||
sliderAct.children('span').css("left",offsetValue + '%');
|
||||
};
|
||||
firLeft = firLeft > 100 ? 100: firLeft;
|
||||
secLeft = secLeft > 100 ? 100: secLeft;
|
||||
var minLeft = Math.min(firLeft, secLeft)
|
||||
,wrapWidth = Math.abs(firLeft - secLeft);
|
||||
if(options.vertical){
|
||||
sliderAct.find('.' + SLIDER_BAR).css({"height":wrapWidth + '%', "bottom":minLeft + '%'});
|
||||
}else{
|
||||
sliderAct.find('.' + SLIDER_BAR).css({"width":wrapWidth + '%', "left":minLeft + '%'});
|
||||
};
|
||||
var selfValue = options.min + Math.round((options.max - options.min) * offsetValue / 100);
|
||||
options.sliderValue && options.sliderValue(selfValue);
|
||||
inputValue = selfValue;
|
||||
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(inputValue);
|
||||
sliderWrap.eq(index).data('value', selfValue);
|
||||
selfValue = options.setTips ? options.setTips(selfValue) : selfValue;
|
||||
sliderAct.find('.' + SLIDER_TIPS).html(selfValue);
|
||||
}
|
||||
,valueTo = function(value){
|
||||
var oldLeft = value / sliderWidth * 100 / step
|
||||
,left = Math.round(oldLeft) * step;
|
||||
if(value == sliderWidth){
|
||||
left = Math.ceil(oldLeft) * step;
|
||||
};
|
||||
return left;
|
||||
};
|
||||
|
||||
//滑块滑动
|
||||
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
|
||||
$(this).on('mousedown', function(e){
|
||||
e = e || window.event;
|
||||
var oldleft = $(this).parent()[0].offsetLeft
|
||||
,oldx = e.clientX;
|
||||
if(options.vertical){
|
||||
oldleft = sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()
|
||||
oldx = e.clientY;
|
||||
};
|
||||
$(document).on('mousemove', function(e){
|
||||
e = e || window.event;
|
||||
var left = oldleft + (options.vertical ? (oldx - e.clientY) : (e.clientX - oldx));
|
||||
if(left < 0)left = 0;
|
||||
if(left > sliderWidth)left = sliderWidth;
|
||||
var reaLeft = left / sliderWidth * 100 / step;
|
||||
change(reaLeft, index);
|
||||
$(this).addClass('hover');
|
||||
sliderAct.find('.' + SLIDER_TIPS).css("display", "inline-block");
|
||||
sliderAct.children('span').css("display", "inline-block");
|
||||
e.preventDefault();
|
||||
}).on('mouseup', function(e){
|
||||
$(document).off('mousemove');
|
||||
$(document).off('mouseup');
|
||||
$(this).removeClass('hover');
|
||||
sliderAct.find('.' + SLIDER_TIPS).css("display", "none");
|
||||
sliderAct.children('span').css("display", "none");
|
||||
});
|
||||
});
|
||||
});
|
||||
sliderAct.on('click', function(e){
|
||||
var main = $('.' + SLIDER_WRAP_BTN);
|
||||
if(!main.is(event.target) && main.has(event.target).length === 0 && main.length){
|
||||
var left = options.vertical ? (sliderWidth - e.clientY + $(this).offset().top):(e.clientX - $(this).offset().left), index;
|
||||
if(left < 0)left = 0;
|
||||
if(left > sliderWidth)left = sliderWidth;
|
||||
var reaLeft = left / sliderWidth * 100 / step;
|
||||
if(options.range){
|
||||
if(options.vertical){
|
||||
index = Math.abs(left - parseInt($(sliderWrap[0]).css('bottom'))) > Math.abs(left - parseInt($(sliderWrap[1]).css('bottom'))) ? 1 : 0;
|
||||
}else{
|
||||
index = Math.abs(left - sliderWrap[0].offsetLeft) > Math.abs(left - sliderWrap[1].offsetLeft) ? 1 : 0;
|
||||
}
|
||||
}else{
|
||||
index = 0;
|
||||
};
|
||||
change(reaLeft, index);
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
//输入框
|
||||
sliderTxt.hover(
|
||||
function(){
|
||||
$(this).addClass("hover");
|
||||
$(this).children('.' + SLIDER_INPUT_BTN).fadeIn('fast');
|
||||
},
|
||||
function(){
|
||||
$(this).removeClass("hover");
|
||||
$(this).children('.' + SLIDER_INPUT_BTN).fadeOut('fast');
|
||||
}
|
||||
);
|
||||
sliderTxt.children('.' + SLIDER_INPUT_BTN).children('i').each(function(index){
|
||||
$(this).on('click', function(){
|
||||
if(index == 1){
|
||||
inputValue = inputValue - step < options.min ? options.min : inputValue - step;
|
||||
}else{
|
||||
inputValue = Number(inputValue) + step > options.max ? options.max : Number(inputValue) + step;
|
||||
};
|
||||
var inputScale = (inputValue - options.min) / (options.max - options.min) * 100 / step;
|
||||
change(inputScale, 0);
|
||||
});
|
||||
});
|
||||
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
|
||||
if(e.keyCode === 13){
|
||||
e.preventDefault();
|
||||
var realValue = this.value;
|
||||
realValue = isNaN(realValue) ? 0 : realValue;
|
||||
realValue = realValue < options.min ? options.min : realValue;
|
||||
realValue = realValue > options.max ? options.max : realValue;
|
||||
this.value = realValue;
|
||||
var inputScale = (realValue - options.min) / (options.max - options.min) * 100 / step
|
||||
change(inputScale, 0);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//事件处理
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
};
|
||||
|
||||
//核心入口
|
||||
slider.render = function(options){
|
||||
var inst = new Class(options);
|
||||
};
|
||||
|
||||
exports(MOD_NAME, slider);
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
@ -63,7 +63,7 @@ layui.define('layer' , function(exports){
|
||||
,bindAction: '' //手动上传触发的元素
|
||||
,url: '' //上传地址
|
||||
,field: 'file' //文件字段名
|
||||
,method: 'post' //请求上传的http类型
|
||||
,method: 'post' //请求上传的 http 类型
|
||||
,data: {} //请求上传的额外参数
|
||||
,drag: true //是否允许拖拽上传
|
||||
,size: 0 //文件限制大小，默认不限制
|
||||
@ -119,8 +119,7 @@ layui.define('layer' , function(exports){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>')
|
||||
,elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="'+ options.method
|
||||
,'" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
|
||||
,elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
|
||||
,'</form>'].join(''));
|
||||
|
||||
//插入iframe
|
||||
@ -204,7 +203,7 @@ layui.define('layer' , function(exports){
|
||||
//提交文件
|
||||
$.ajax({
|
||||
url: options.url
|
||||
,type: options.method
|
||||
,type: 'post'
|
||||
,data: formData
|
||||
,contentType: false
|
||||
,processData: false
|
||||
|
||||
@ -173,5 +173,9 @@ layui.define('jquery', function(exports){
|
||||
}
|
||||
};
|
||||
|
||||
//监听 DOM 尺寸变化，该创意来自：http://benalman.com/projects/jquery-resize-plugin/
|
||||
!function(a,b,c){"$:nomunge";function l(){f=b[g](function(){d.each(function(){var b=a(this),c=b.width(),d=b.height(),e=a.data(this,i);(c!==e.w||d!==e.h)&&b.trigger(h,[e.w=c,e.h=d])}),l()},e[j])}var f,d=a([]),e=a.resize=a.extend(a.resize,{}),g="setTimeout",h="resize",i=h+"-special-event",j="delay",k="throttleWindow";e[j]=250,e[k]=!0,a.event.special[h]={setup:function(){if(!e[k]&&this[g])return!1;var b=a(this);d=d.add(b),a.data(this,i,{w:b.width(),h:b.height()}),1===d.length&&l()},teardown:function(){if(!e[k]&&this[g])return!1;var b=a(this);d=d.not(b),b.removeData(i),d.length||clearTimeout(f)},add:function(b){function f(b,e,f){var g=a(this),h=a.data(this,i)||{};h.w=e!==c?e:g.width(),h.h=f!==c?f:g.height(),d.apply(this,arguments)}if(!e[k]&&this[g])return!1;var d;return a.isFunction(b)?(d=b,f):(d=b.handler,b.handler=f,void 0)}}}($,window);
|
||||
|
||||
//暴露接口
|
||||
exports('util', util);
|
||||
});
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
,Layui = function(){
|
||||
this.v = '2.3.0'; //版本号
|
||||
this.v = '2.4.0'; //版本号
|
||||
}
|
||||
|
||||
//获取layui所在目录
|
||||
@ -60,6 +60,8 @@
|
||||
,table: 'modules/table' //表格
|
||||
,element: 'modules/element' //常用元素操作
|
||||
,rate: 'modules/rate' //评分组件
|
||||
,colorpicker: 'modules/colorpicker' //颜色选择器
|
||||
,slider: 'modules/slider' //滑块
|
||||
,carousel: 'modules/carousel' //轮播
|
||||
,flow: 'modules/flow' //流加载
|
||||
,util: 'modules/util' //工具块
|
||||
|
||||
Loading…
Reference in New Issue
Block a user