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

218
public/frontend/layui-main/docs/carousel/detail/demo.md Executable file
View File

@@ -0,0 +1,218 @@
<h3 lay-toc="{level: 2, id: 'examples'}" class="layui-hide">常规用法</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 515px;', text: {preview: '常规用法'}, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div class="layui-carousel" id="ID-carousel-demo-1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<hr class="ws-space-16">
<div class="layui-carousel" id="ID-carousel-demo-2">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
</div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var carousel = layui.carousel;
// 渲染 - 常规轮播
carousel.render({
elem: '#ID-carousel-demo-1',
width: 'auto'
});
// 渲染 - 设置时间间隔、动画类型、宽高度等属性
carousel.render({
elem: '#ID-carousel-demo-2',
interval: 1800,
anim: 'fade',
width: 'auto',
height: '120px'
});
});
</script>
</textarea>
</pre>
- 在元素外层设置 `class="layui-carousel"` 来定义一个轮播容器
- 在元素内层设置属性 `carousel-item` 用来定义条目容器
<h3 id="demo-config" lay-toc="{level: 2, hot: true}">属性配置预览</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 515px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">宽高</label>
<div class="layui-input-inline" style="width: 98px;">
<input type="tel" name="width" value="600" autocomplete="off" placeholder="width" class="layui-input carousel-demo-set">
</div>
<div class="layui-input-inline" style="width: 98px;">
<input type="tel" name="height" value="280" autocomplete="off" placeholder="height" class="layui-input carousel-demo-set">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">动画类型</label>
<div class="layui-input-block">
<div class="layui-btn-group" style="margin-top: 5px;">
<button class="layui-btn layui-btn-sm" style="background-color: #16b777;" lay-on="carousel-set" data-key="anim" data-value="default">左右切换</button>
<button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="anim" data-value="updown">上下切换</button>
<button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="anim" data-value="fade">渐隐渐显</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">箭头状态</label>
<div class="layui-input-block">
<div class="layui-btn-group" style="margin-top: 5px;">
<button class="layui-btn layui-btn-sm" style="background-color: #16b777;" lay-on="carousel-set" data-key="arrow" data-value="hover">悬停显示</button>
<button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="arrow" data-value="always">始终显示</button>
<button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="arrow" data-value="none">不显示</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">指示器位置</label>
<div class="layui-input-block">
<div class="layui-btn-group" style="margin-top: 5px;">
<button class="layui-btn layui-btn-sm" style="background-color: #16b777;" data-key="indicator" lay-on="carousel-set" data-value="inside">容器内部</button>
<button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="indicator" data-value="outside">容器外部</button>
<button class="layui-btn layui-btn-sm" lay-on="carousel-set" data-key="indicator" data-value="none">不显示</button>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">自动切换</label>
<div class="layui-input-block">
<!--<input type="checkbox" name="switch" lay-skin="switch" checked lay-text="ON|OFF" lay-filter="autoplay">-->
<select lay-filter="autoplay">
<option value="1">开启</option>
<option value="0">关闭</option>
<option value="always">always</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: auto;">时间间隔</label>
<div class="layui-input-inline" style="width: 120px;">
<input type="tel" name="interval" value="3000" autocomplete="off" placeholder="毫秒" class="layui-input carousel-demo-set">
</div>
</div>
</div>
</div>
<div class="layui-carousel" id="ID-carousel-demo-set" lay-filter="filter-demo-carousel-set">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var carousel = layui.carousel;
var form = layui.form;
var util = layui.util;
var $ = layui.$;
// 渲染
var carInst = carousel.render({
elem: '#ID-carousel-demo-set'
});
// 开关事件
form.on('switch(autoplay)', function(){
// 重载轮播
carInst.reload({
autoplay: this.checked
});
});
// 自动播放控制
form.on('select(autoplay)', function (obj) {
// debugger;
var autoplayValue = parseInt(obj.value);
// 重载轮播
carInst.reload({
autoplay: isNaN(autoplayValue) ? obj.value : autoplayValue
});
});
// 输入框事件
$('.carousel-demo-set').on('input propertychange', function(){
var value = this.value;
var options = {};
//if(!/^\d+$/.test(value)) return;
options[this.name] = value;
carInst.reload(options); // 重载轮播
});
// 普通事件
util.on('lay-on', {
"carousel-set": function(othis){
var THIS = 'layui-bg-normal';
var key = othis.data('key');
var options = {};
othis.css('background-color', '#16b777').siblings().removeAttr('style');
options[key] = othis.data('value');
carInst.reload(options); // 重载轮播
}
});
});
</script>
</textarea>
</pre>
<h3 id="demo-image" lay-toc="{level: 2}">填充图片轮播</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div class="layui-carousel" id="ID-carousel-demo-image">
<div carousel-item>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
</div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var carousel = layui.carousel;
// 渲染 - 图片轮播
carousel.render({
elem: '#ID-carousel-demo-image',
width: '720px',
height: '360px',
interval: 3000
});
});
</script>
</textarea>
</pre>

238
public/frontend/layui-main/docs/carousel/detail/options.md Executable file
View File

@@ -0,0 +1,238 @@
<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>-</td>
</tr>
<tr>
<td>width</td>
<td>
设定轮播容器宽度，值支持：*像素*、*auto*、*百分比*。
</td>
<td>string</td>
<td>
`600px`
</td>
</tr>
<tr>
<td>height</td>
<td>
设定轮播容器高度，值支持的类型同 `width` 属性
</td>
<td>string</td>
<td>
`280px`
</td>
</tr>
<tr>
<td>full</td>
<td>
是否全屏轮播
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>anim</td>
<td>
轮播切换动画方式。可选值有：
- `default` 左右切换
- `updown` 上下切换
- `fade` 渐隐渐显切换
</td>
<td>boolean</td>
<td>
`default`
</td>
</tr>
<tr>
<td>autoplay</td>
<td>
是否自动切换，可选值有：
- `true` 自动滚动，鼠标移入会暂停、移出重新恢复
- `false` 不自动滚动
- `always` 始终自动滚动，不受鼠标移入移出影响 <sup>2.7+</sup>
</td>
<td>boolean<br>string</td>
<td>
`true`
</td>
</tr>
<tr>
<td>interval</td>
<td>
自动切换的时间间隔，单位： ms （毫秒），不能低于 800
</td>
<td>number</td>
<td>
`3000`
</td>
</tr>
<tr>
<td>index</td>
<td>
初始开始的条目下标
</td>
<td>number</td>
<td>
`0`
</td>
</tr>
<tr>
<td>arrow</td>
<td>
切换箭头默认显示状态，可选值有：
- `hover` 鼠标悬停显示
- `always` 始终显示
- `none` 始终不显示
</td>
<td>string</td>
<td>
`hover`
</td>
</tr>
<tr>
<td>indicator</td>
<td>
指示器位置，可选值有：
- `inside` 显示在容器内部
- `outside` 显示在容器外部
- `none` 不显示
注 : 若设定了 `anim: 'updown'` ，则 `outside` 值无效
</td>
<td>string</td>
<td>
`inside`
</td>
</tr>
<tr>
<td>trigger</td>
<td>
指示器的触发事件
</td>
<td>string</td>
<td>
`click`
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor">
[回调函数](#options.callback)
</div>
</td>
</tr>
<tr>
<td>change <sup>2.7+</sup></td>
<td colspan="3">
<div id="options.change" lay-pid="options" class="ws-anchor">
轮播切换后的回调函数，返回一个对象参数。
</div>
```
carousel.render({
elem: '#id',
change: function(obj){
console.log(obj.index); // 当前条目的索引
console.log(obj.prevIndex); // 上一个条目的索引
console.log(obj.item); // 当前条目的元素对象
}
});
```
注：在 `2.7` 之前的版本，需通过 carousel 的 `change` 事件来实现，如：
```
var carousel = layui.carousel;
// 轮播渲染
carousel.render(options);
// 触发轮播切换事件
carousel.on('change(filter)', function(obj){ // filter 对应轮播容器的 lay-filter 属性值
console.log(obj);
});
```
</td>
</tr>
</tbody>
</table>
### 贴士
> 若轮播的填充内容为图片，且 `width` 或 `height` 为自适应，那么需动态获取父容器宽高，从而适配父容器。 当浏览器窗口尺寸发生变化时，可在窗口 `resize` 事件中通过轮播重载来重设宽高值。

79
public/frontend/layui-main/docs/carousel/index.md Executable file
View File

@@ -0,0 +1,79 @@
---
title: 轮播组件 carousel
toc: true
---
# 轮播组件
> 轮播组件 `carousel` 主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何内容的轮播式切换操作，亦可胜任 `fullpage`（全屏上下轮播）的需求。
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<style>
/* 为了区分效果 */
div[carousel-item]>*{text-align: center; line-height: 280px; color: #fff;}
div[carousel-item]>*:nth-child(2n){background-color: #16b777;}
div[carousel-item]>*:nth-child(2n+1){background-color: #16baaa;}
</style>
<div>
{{- d.include("/carousel/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
| API | 描述 |
| --- | --- |
| var carousel = layui.carousel | 获得 `carousel` 模块。 |
| [var inst = carousel.render(options)](#render) | carousel 组件渲染，核心方法。 |
| [inst.reload(options)](#reload) | 轮播实例重载 |
| [inst.goto(index)](#goto) <sup>2.8+</sup> | 轮播切换到特定下标 |
<h2 id="render" lay-toc="{level: 2}">渲染</h2>
`carousel.render(options);`
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
该方法返回一个实例对象，包含操作当前实例的相关方法成员。
```
var inst = carousel.render(options);
console.log(inst); // 得到当前实例对象
```
<h3 id="reload" lay-toc="{level: 2}">重载</h3>
`inst.reload(options);`
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
通过渲染返回的实例对象，可获得重载方法，用于实现对实例的属性重载。
```
var inst = carousel.render(options); // 轮播初始渲染
inst.reload(options); // 轮播重载
```
详细用法可参考：[#示例](#demo)
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("/carousel/detail/options.md") }}
</div>
<h3 id="goto" lay-toc="{level: 2}">切换 <sup>2.8+</sup></h3>
`inst.goto(index);`
- 参数 `index` : 轮播下标，从 `0` 开始计算
通过渲染返回的实例对象，可获得切换方法，用于实现对轮播的手动定向切换。
```
var inst = carousel.render(options); // 轮播初始渲染
inst.goto(0); // 轮播切换到第一项
inst.goto(1); // 轮播切换到第二项
```