theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新版

Browse Source
This commit is contained in:
贤心
2018-08-28 15:43:16 +08:00
parent e2a2c08402 5e30e00cfa
commit 9964879f08
44 changed files with 724 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
examples/colorpicker.html
View File

@@ -3,59 +3,68 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>颜色拾取器 - layui</title>
<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;}
.test-box{margin-bottom: 50px;}
</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 class="test-box">
<div class="layui-inline">
<input class="layui-input" id="LAY-test1">
</div>
<div id="test1"></div>
</div>
<div class="test-box">
<div id="test2"></div>
</div>
<div class="test-box">
<div id="test3"></div>
</div>
<div class="test-box">
<div id="test4"></div>
</div>
<div class="test-box">
<div id="test5"></div>
</div>
<div class="test-box">
<div id="test6"></div>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('colorpicker', function(){
layui.use(['colorpicker', 'layer'], 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)']
//,predefine: true //开启预定义颜色
//,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
,change: function(color){
console.log(color)
document.body.style.backgroundColor = color;
}
,done: function(color){
layui.$('#LAY-test1').val(color);
document.body.style.backgroundColor = color;
}
});
colorpicker.render({
elem: '#test2'
,bgcolor: 'rgba(218, 121, 157, 0.5)' //设置默认色
,color: 'rgba(218, 121, 157, 1)' //设置默认色
,predefine: true
,alpha: true //开启透明度
,format: 'rgb'
@@ -63,29 +72,33 @@ body{padding:20px;}
console.log(color)
}
});
colorpicker.render({
elem: '#test3'
,bgcolor: '#06eaee'
,alpha: true
,format: 'rgb' //设置输入显示格式为rgb
elem: '#06eaee'
,color: 'rgba(0,0,0)'
//,alpha: true
//,format: 'rgb' //设置输入显示格式为rgb
});
colorpicker.render({
elem: '#test4'
,bgcolor: '#06eeb8'
,color: '#06eeb8'
,predefine: true //开启预定义色
,format: 'rgb'
});
colorpicker.render({
elem: '#test5'
,bgcolor: '#ffd900'
,color: '#ffd900'
,predefine: true
,size: 'mini'
,size: 'lg'
});
colorpicker.render({
elem: '#test6'
,bgcolor: '#F00'
,color: '#F00'
,predefine: true
,prededata: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
,size: 'xs'
});
})

48
examples/slider.html
View File

@@ -8,19 +8,14 @@
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding:20px;}
p{font-size: 18px; margin: 20px 0 50px;}
body{padding:100px 0;}
</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 id="slideTest1"></div>
</div>
<script src="../src/layui.js"></script>
@@ -28,26 +23,27 @@ p{font-size: 18px; margin: 20px 0 50px;}
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' //主题色
//,type: 'vertical'
//,min: 0 //最小值
//,max: 100 //最大值
//,value: 60 //[40, 60] //初始值
//,step: 20 //间隔值
//,showstep: true //间隔点
//,tips: false //关闭提示文本
,input: true //输入框
//,range: true //范围选择
,change: function(value){ //回调实时显示当前值
console.log(value)
}
//,setTips: function(value){ //自定义提示文本
//return '离世界末日还有 ' + value + ' 天';
//}
//,height: '300' //配合 type:'vertical' 参数使用，默认200px
//,disabled: true //禁用滑块
//,theme: '#c00' //主题色
});
});
</script>

4
examples/table.html
View File

@@ -79,7 +79,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
<th lay-data="{field:'province', width:80}" rowspan="2">省</th>
<th lay-data="{field:'city', width:80}" rowspan="2">市</th>
<th lay-data="{align:'center'}" colspan="2">详细</th>
<th lay-data="{field:'zone', width:80}" rowspan="2">区</th>
<th lay-data="{field:'zone'}" rowspan="2">区</th>
<th lay-data="{field:'province', width:80}" rowspan="2">省</th>
<th lay-data="{field:'city', width:80}" rowspan="2">市</th>
</tr>
@@ -264,7 +264,7 @@ layui.use('table', function(){
,{field:'id', title:'ID', unresize: true, sort: true}
,{field:'username', title:'用户名', templet: '#usernameTpl'}
,{field:'email', title:'邮箱'}
,{field:'sex', title:'性别', templet: '#switchTpl', minWidth: 85, align:'center'}
,{xfield:'sex', title:'性别', templet: '#switchTpl', minWidth: 85, align:'center'}
,{field:'lock', title:'是否锁定', templet: '#checkboxTpl', minWidth: 110, align:'center'}
,{field:'city', title:'城市'}
]]