yhl452493373/layui-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加单页应用的layui-admin

Browse Source
This commit is contained in:
杨黄林
2024-01-22 12:22:41 +08:00
parent acf64a0c71
commit 1b2929f32e
344 changed files with 21782 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
single/res/views/component/slider/index.html Normal file
View File

@@ -0,0 +1,216 @@
<title>滑块组件</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>滑块组件</cite></a>
</div>
</div>
<style>
.test-slider-demo{margin: 45px 30px;}
</style>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">基础效果</div>
<div class="layui-card-body">
<div id="test-slider-demo1" class="test-slider-demo"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">定义初始值</div>
<div class="layui-card-body">
<div id="test-slider-demo2" class="test-slider-demo"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">设置最大最小值</div>
<div class="layui-card-body">
<div id="test-slider-demo3" class="test-slider-demo"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">设置步长</div>
<div class="layui-card-body">
<div id="test-slider-demo4" class="test-slider-demo"></div>
<div id="test-slider-demo5" class="test-slider-demo"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">设置提示文本</div>
<div class="layui-card-body">
<div id="test-slider-demo6" class="test-slider-demo"></div>
<div id="test-slider-demo7" class="test-slider-demo"></div>
<div id="test-slider-tips1" style="position:relative; left: 30px; top: -20px;"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">开启输入框</div>
<div class="layui-card-body">
<div id="test-slider-demo8" class="test-slider-demo"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">开启范围选择</div>
<div class="layui-card-body">
<div id="test-slider-demo9" class="test-slider-demo"></div>
<div id="test-slider-tips2" style="position:relative; left: 30px; margin-top: -10px;"></div>
<div id="test-slider-demo10" class="test-slider-demo"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">垂直滑块</div>
<div class="layui-card-body">
<div id="test-slider-demo11" style="margin: 45px 30px; display: inline-block;"></div>
<div id="test-slider-demo12" style="margin: 45px 30px; display: inline-block;"></div>
<div id="test-slider-demo13" style="margin: 45px 30px; display: inline-block;"></div>
<div id="test-slider-demo14" style="margin: 45px 30px; display: inline-block;"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">自定义颜色</div>
<div class="layui-card-body">
<div id="test-slider-demo15" class="test-slider-demo"></div>
<div id="test-slider-demo16" class="test-slider-demo"></div>
<div id="test-slider-demo17" class="test-slider-demo"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">禁用滑块</div>
<div class="layui-card-body">
<div id="test-slider-demo18" class="test-slider-demo"></div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin', 'slider'], function(){
var $ = layui.$
,slider = layui.slider;
//默认滑块
slider.render({
elem: '#test-slider-demo1'
});
//定义初始值
slider.render({
elem: '#test-slider-demo2'
,value: 20 //初始值
});
//设置最大最小值
slider.render({
elem: '#test-slider-demo3'
,min: 20 //最小值
,max: 50 //最大值
});
//设置步长
slider.render({
elem: '#test-slider-demo4'
,step: 10 //步长
});
slider.render({
elem: '#test-slider-demo5'
,step: 10 //步长
,showstep: true //开启间隔点
});
//设置提示文本
slider.render({
elem: '#test-slider-demo6'
,min: 20
,max: 1000
,setTips: function(value){ //自定义提示文本
return value + 'GB';
}
});
slider.render({
elem: '#test-slider-demo7'
,tips: false //关闭默认提示层
,change: function(value){
$('#test-slider-tips1').html('当前数值：'+ value);
}
});
//开启输入框
slider.render({
elem: '#test-slider-demo8'
,input: true //输入框
});
//开启范围选择
slider.render({
elem: '#test-slider-demo9'
,value: 40 //初始值
,range: true //范围选择
,change: function(vals){
$('#test-slider-tips2').html('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
}
});
slider.render({
elem: '#test-slider-demo10'
,value: [30, 60] //初始值
,range: true //范围选择
});
//垂直滑块
slider.render({
elem: '#test-slider-demo11'
,type: 'vertical' //垂直滑块
});
slider.render({
elem: '#test-slider-demo12'
,value: 30
,type: 'vertical' //垂直滑块
});
slider.render({
elem: '#test-slider-demo13'
,value: 50
,range: true //范围选择
,type: 'vertical' //垂直滑块
});
slider.render({
elem: '#test-slider-demo14'
,value: 80
,input: true //输入框
,type: 'vertical' //垂直滑块
});
//自定义颜色
slider.render({
elem: '#test-slider-demo15'
,theme: '#1E9FFF' //主题色
});
slider.render({
elem: '#test-slider-demo16'
,value: 50
,theme: '#16b777' //主题色
});
slider.render({
elem: '#test-slider-demo17'
,value: [30, 70]
,range: true
,theme: '#FF5722' //主题色
});
//禁用滑块
slider.render({
elem: '#test-slider-demo18'
,value: 35
,disabled: true //禁用滑块
});
});
</script>