jsasg/orico-official-website-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
jsasg
2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
public/frontend/layui-main/docs/slider/detail/demo.md Executable file
View File

@@ -0,0 +1,279 @@
<pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 渲染
slider.render({
elem: '#ID-slider-demo'
});
});
</script>
</textarea>
</pre>
<h3 id="demo-value" class="ws-anchor ws-bold">定义初始值</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo-value"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 渲染
slider.render({
elem: '#ID-slider-demo-value',
value: 20 //初始值
});
});
</script>
</textarea>
</pre>
<h3 id="demo-maxmin" class="ws-anchor ws-bold">设置最大和最小值</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo-maxmin"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 渲染
slider.render({
elem: '#ID-slider-demo-maxmin',
min: 20, // 最小值
max: 50 // 最大值
});
});
</script>
</textarea>
</pre>
<h3 id="demo-step" class="ws-anchor ws-bold">设置步长</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo-step-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-step-2"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 渲染
slider.render({
elem: '#ID-slider-demo-step-1',
step: 10 // 步长
});
slider.render({
elem: '#ID-slider-demo-step-2',
step: 10, // 步长
showstep: true // 开启间隔点
});
});
</script>
</textarea>
</pre>
<h3 id="demo-setTips" class="ws-anchor ws-bold">设置提示文本</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo-setTips-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-setTips-2"></div>
<div id="ID-slider-demo-setTips-result"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
var $ = layui.$;
// 渲染
slider.render({
elem: '#ID-slider-demo-setTips-1',
min: 20,
max: 1000,
setTips: function(value){ // 自定义提示文本
return value + 'GB';
}
});
slider.render({
elem: '#ID-slider-demo-setTips-2',
tips: false, // 关闭默认提示层
change: function(value){
$('#ID-slider-demo-setTips-result').html('当前数值：'+ value);
}
});
});
</script>
</textarea>
</pre>
<h3 id="demo-input" class="ws-anchor ws-bold">开启输入框</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo-input"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 渲染
slider.render({
elem: '#ID-slider-demo-input',
input: true //输入框
});
});
</script>
</textarea>
</pre>
<h3 id="demo-range" class="ws-anchor ws-bold">开启范围选择</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo-range-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-range-2"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
var layer = layui.layer;
// 渲染
slider.render({
elem: '#ID-slider-demo-range-1',
value: 40, // 初始值
range: true, // 范围选择
done: function(vals){
layer.msg('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
}
});
slider.render({
elem: '#ID-slider-demo-range-2',
value: [30, 60], // 初始值
range: true // 范围选择
});
});
</script>
</textarea>
</pre>
<h3 id="demo-vertical" class="ws-anchor ws-bold">垂直滑块</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<br><br>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-1"></div>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-2"></div>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-3"></div>
<div class="layui-inline" id="ID-slider-demo-vertical-4"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 渲染
slider.render({
elem: '#ID-slider-demo-vertical-1',
type: 'vertical' // 垂直滑块
});
slider.render({
elem: '#ID-slider-demo-vertical-2',
value: 30,
type: 'vertical' // 垂直滑块
});
slider.render({
elem: '#ID-slider-demo-vertical-3',
value: 50,
range: true, // 范围选择
type: 'vertical' // 垂直滑块
});
slider.render({
elem: '#ID-slider-demo-vertical-4',
value: 80,
input: true, // 输入框
type: 'vertical' // 垂直滑块
});
});
</script>
</textarea>
</pre>
<h3 id="demo-theme" class="ws-anchor ws-bold">自定义主题色</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo-theme-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-theme-2"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-theme-3"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 渲染
slider.render({
elem: '#ID-slider-demo-theme-1',
theme: '#1E9FFF' // 主题色
});
slider.render({
elem: '#ID-slider-demo-theme-2',
value: 50,
theme: '#16b777' // 主题色
});
slider.render({
elem: '#ID-slider-demo-theme-3',
value: [30, 70],
range: true,
theme: '#FF5722' // 主题色
});
});
</script>
</textarea>
</pre>
<h3 id="demo-disabled" class="ws-anchor ws-bold">禁用滑块</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-slider-demo-disabled"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 渲染
slider.render({
elem: '#ID-slider-demo-disabled',
value: 35,
disabled: true // 禁用滑块
});
});
</script>
</textarea>
</pre>

253
public/frontend/layui-main/docs/slider/detail/options.md Executable file
View File

@@ -0,0 +1,253 @@
<table class="layui-table">
<colgroup>
<col width="150">
<col>
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>elem</td>
<td>
绑定元素选择器或 DOM 对象
</td>
<td>string/DOM</td>
<td>-</tr>
<tr>
<td>type</td>
<td>
滑块类型，可选值有：
- `default` 水平滑块（默认）
- `vertical`垂直滑块
</td>
<td>string</td>
<td>
`default`
</td>
</tr>
<tr>
<td>value</td>
<td>
滑块初始值。
- 默认可直接设置数值，如： `value: 50`
- 若滑块开启 `range: true` 区间选择，则值为数组，异表示开始和结尾的区间，如： `value: [30, 60]`
</td>
<td>number<br>array</td>
<td>-</td>
</tr>
<tr>
<td>range</td>
<td>
是否开启滑块的区间选择。若开启，则滑块将出现两个可拖拽的点。
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>min</td>
<td>
滑块的最小值
</td>
<td>number</td>
<td>
`0`
</td>
</tr>
<tr>
<td>max</td>
<td>
滑块的最大值
</td>
<td>number</td>
<td>
`100`
</td>
</tr>
<tr>
<td>step</td>
<td>
滑块单次拖动的步长
</td>
<td>number</td>
<td>
`1`
</td>
</tr>
<tr>
<td>showstep</td>
<td>
是否显示间断点
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>tips</td>
<td>
鼠标移入当前圆点，是否显示当前值
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>input</td>
<td>
是否显示滑块的数字输入框。 注：若设置 `range: true` 则该属性强制无效。
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>height</td>
<td>
滑动条高度。 必须设置 `type: 'vertical'` 属性，即垂直滑块时有效。
</td>
<td>number</td>
<td>
`200`
</td>
</tr>
<tr>
<td>theme</td>
<td>
滑块的主题色。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>
是否禁用滑块
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>setTips</td>
<td colspan="3">
滑块拖拽时设置提示文本的回调函数。并返回当前的 `value` 参数。用法详见：[#设置提示文本](#demo-setTips)
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
</div>
</td>
</tr>
<tr>
<td>change</td>
<td colspan="3">
滑块数值发生改变的回调函数。并返回当前的 `value` 参数。
```
slider.render({
elem: '#id',
change: function(value){
console.log(value) // 滑块当前值
// do something
}
});
```
一般可在该回调中将 `value` 同步给表单隐藏域，或者进行一些其它操作。
</td>
</tr>
<tr>
<td>done <sup>2.8+</sup></td>
<td colspan="3">
滑块拖拽完毕的回调函数。并返回当前的 `value` 参数。滑块拖动过程中不会触发。
```
slider.render({
elem: '#id',
done: function(value){
console.log(value) // 滑块当前值
// do something
}
});
```
若需将 `value` 异步发送给后端，一般采用 `done` 回调，而非 `change` 回调。
</td>
</tr>
</tbody>
</table>

93
public/frontend/layui-main/docs/slider/index.md Executable file
View File

@@ -0,0 +1,93 @@
---
title: 滑块组件 slider
toc: true
---
# 滑块组件
> 滑块组件 `slider` 是一个拖拽选值的交互性组件，常与 `form` 元素结合使用。
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<style>
.demo-slider-container .layui-code-item-preview{padding: 32px;}
.demo-slider-container .layui-code-item-preview > div{margin: 24px 0;}
</style>
<div class="demo-slider-container">
{{- d.include("/slider/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
| API | 描述 |
| --- | --- |
| var slider = layui.slider | 获得 `slider` 模块。 |
| [var inst = slider.render(options)](#render) | slider 组件渲染，核心方法。 |
| [inst.setValue(value)](#setValue) | 设置滑块值 |
| inst.config | 获得当前实例的属性配置项 |
<h2 id="render" lay-toc="{level: 2}">渲染</h2>
`slider.render(options);`
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
<br>注 <sup>2.8+</sup> : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。
```
<div id="ID-test-slider"></div>
<div class="class-test-slider" lay-options="{value: 50}"></div>
<div class="class-test-slider" lay-options="{value: 80}"></div>
<!-- import layui -->
<script>
layui.use(function(){
var slider = layui.slider;
// 单个渲染
slider.render({
elem: '#ID-test-slider'
});
// 批量渲染
slider.render({
elem: '.class-test-slider'
});
});
</script>
```
该方法返回一个实例对象，包含操作当前实例的相关方法成员。
```
var inst = slider.render(options);
console.log(inst); // 得到当前实例对象
```
<h3 id="setValue" class="ws-anchor ws-bold">设置滑块值</h3>
`inst.setValue(value, index)`
- 参数 `value` : 要设置的滑块数值
- 参数 `index` : 滑块所在的区间开始值或结尾值的索引，开始值：`0` ; 结尾值：`1`
```
var slider = layui.slider;
// 渲染
var inst = slider.render({
elem: '#id'
// …
});
// 设置滑块值
inst.setValue(20);
// 若滑块开启了范围，即： `range: true`
ins1.setValue(20, 0) // 设置开始值
ins1.setValue(60, 1) // 设置结尾值
```
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("/slider/detail/options.md") }}
</div>