mirror of https://github.com/layui/layui
贤心
GitHub
commit
c17919e10b
|
|
@ -1,11 +1,11 @@
|
|||
### 说明
|
||||
|
||||
- 版本：在此处填写您所使用的 Layui 版本号（必填）
|
||||
- 描述：在此处填写尽可能详细的问题描述和具体操作步骤等信息（必填）
|
||||
- 版本： 在此处填写您所使用的 Layui 版本号（必填）
|
||||
- 描述： 在此处填写详细的问题描述和具体的操作步骤（必填）
|
||||
|
||||
### 代码
|
||||
|
||||
在此处填写与问题对应的业务代码（可选）
|
||||
在此处填写与本次 Issue 相关的业务代码（可选）
|
||||
|
||||
### 补充
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,6 @@ node_modules/
|
|||
_site/
|
||||
.git/
|
||||
|
||||
/release/
|
||||
/v/
|
||||
release/
|
||||
v/
|
||||
package-lock.json
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
# ChangeLog
|
||||
|
||||
# 更新日志
|
||||
https://github.com/layui/layui/releases
|
||||
- [更新日志](https://layui.dev/docs/versions.html)
|
||||
|
||||
## 发布日志
|
||||
- [Github](https://github.com/layui/layui/releases)
|
||||
- [Gitee](https://gitee.com/layui/layui/releases)
|
||||
37
README.md
37
README.md
|
|
@ -25,8 +25,7 @@
|
|||
|
||||
---
|
||||
|
||||
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
|
||||
|
||||
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 `HTML/CSS/JavaScript` 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
|
||||
|
||||
## 快速上手
|
||||
|
||||
|
|
@ -38,21 +37,18 @@ Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>开始使用 Layui</title>
|
||||
<title>Quick Start - Layui</title>
|
||||
<link href="./layui/css/layui.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- HTML -->
|
||||
|
||||
<!-- HTML Content -->
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script>
|
||||
// 使用组件
|
||||
layui.use(['layer', 'form'], function(){
|
||||
// Usage
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
|
||||
// 欢迎语
|
||||
layer.msg('Hello World');
|
||||
// Welcome
|
||||
layer.msg('Hello World', {icon: 6});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -60,16 +56,23 @@ Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范
|
|||
```
|
||||
|
||||
## 使用文档
|
||||
[**最新文档**](https://layui.github.io)
|
||||
|
||||
[**最新文档**](https://layui.dev)
|
||||
|
||||
## 项目参与
|
||||
|
||||
[项目参与者](https://github.com/layui/layui/graphs/contributors)
|
||||
|
||||
## 破旧立新 🌱
|
||||
Layui 原官网已于2021年10月13日下线。详见：
|
||||
> 1. <a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png" target="_blank">Layui 原官网下线公告</a> 2. <a href="https://www.zhihu.com/question/488668647/answer/2159962082" target="_blank">Layui 原官网为什么要下线？</a>
|
||||
|
||||
---
|
||||
2016年10月14日，Layui 发布了 `1.0.0` 首版，此后多年被广泛应用在不计其数的 Web 平台。
|
||||
|
||||
鉴于 Layui 相对庞大的受众群体，从此 Github 和 Gitee 平台将支撑起 Layui 的后续。<br>
|
||||
**Layui 将继续陪伴着所有为之热爱的人们，共同去探索和论证「Layui 开发模式的可行性」**
|
||||
2021年10月13日，Layui 发布了原官网下线的公告（<a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png" target="_blank">导读</a>），并将文档站点切换到了 Gitee Pages，社区及日常维护亦全面转移到了 Gitee 和 Github 平台，并顺带呼吁大家拥抱其他更好的主流框架，导致大家误以为 Layui 停更了。事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，从当时的 `2.6.8` 一直连续迭代到如今的最新版本。
|
||||
|
||||
2023年4月24日，Layui 发布了 `2.8.0` 正式版，并上线了[新的文档站点](https://layui.dev)，这是一次朴实的回归，更是情怀的延续。 但我们仍然坚持两年前那则公告中的观点， _即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性_。 **而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙**。Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作。作为开源创作者，应该要为这些坚持者而守望。
|
||||
|
||||
未来，Layui 会持续陪伴着所有为之热爱的人们，共同去探索和论证 Layui 开发模式的可行性。
|
||||
|
||||
## 开源许可
|
||||
|
||||
Layui 采用 [MIT](https://opensource.org/licenses/MIT) 许可发布。其他相关协议亦可参考《[免责声明](https://gitee.com/layui/layui/blob/main/DISCLAIMER.md)》。
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
title: 某某组件 MOD_NAME
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 某某组件
|
||||
|
||||
> 某某组件 `MOD_NAME`
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/MOD_NAME/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var MOD_NAME = layui.MOD_NAME | 获得 `MOD_NAME` 模块。 |
|
||||
| [MOD_NAME.render(options)](#render) | MOD_NAME 组件渲染，核心方法。 |
|
||||
| …… | …… |
|
||||
|
||||
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
|
||||
|
||||
`MOD_NAME.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/MOD_NAME/detail/options.md") }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '综合用法'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
AAA
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var MOD_NAME = layui.MOD_NAME;
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-NAME" class="ws-anchor ws-bold">示例标题</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
AAA
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var MOD_NAME = layui.MOD_NAME;
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<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>AAA</td>
|
||||
<td>
|
||||
|
||||
|
||||
|
||||
</td>
|
||||
<td>CCC</td>
|
||||
<td>
|
||||
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
# Docs
|
||||
|
||||
- https://layui.github.io
|
||||
- https://layui.gitee.io/v2
|
||||
- [最新文档](https://layui.dev)
|
||||
- [2.7 文档](https://layui.dev/2.7/)
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
---
|
||||
title: 动画
|
||||
toc: true
|
||||
---
|
||||
|
||||
<style>
|
||||
.ws-docs-anim > div{padding: 16px; transition: all .3s;}
|
||||
.ws-docs-anim > div:hover{background-color: #f2f2f2; color: #000;}
|
||||
.ws-docs-anim > div .layui-anim{width: 125px; height: 125px; line-height: 125px; margin: 0 auto 10px; text-align: center; background-color: #16baaa; cursor: pointer; color: #fff; border-radius: 50%; user-select: none;}
|
||||
.ws-docs-anim > div > div{text-align: center; white-space: nowrap;}
|
||||
</style>
|
||||
|
||||
# 动画
|
||||
|
||||
> Layui 内置了几种常见的 `CSS3` 动画。
|
||||
|
||||
<h2 id="usage" lay-toc="">示例</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'max-height: 350px;'}">
|
||||
<textarea>
|
||||
<div class="layui-anim" id="example-anim-element" style="padding: 16px 0;">
|
||||
目标元素
|
||||
</div>
|
||||
<button class="layui-btn layui-btn-primary" id="example-anim-usage">点击触发动画</button>
|
||||
<p>旋转动画加自动循环：</p>
|
||||
<button class="layui-btn">
|
||||
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
|
||||
</button>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var elem = $('#example-anim-element');
|
||||
var animName = 'layui-anim-down'; // 动画类名
|
||||
|
||||
// 通过事件简单演示动画过程
|
||||
$('#example-anim-usage').on('click', function(){
|
||||
elem.removeClass(animName);
|
||||
setTimeout(function(){
|
||||
elem.addClass(animName); // 给目标元素追加「往下滑入」的动画
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
对需要动画的标签添加 `class="layui-anim"` 基础类，再追加其他不同的动画类，即可让元素产生动画。
|
||||
|
||||
<h2 id="list" lay-toc="">动画列表</h2>
|
||||
|
||||
点击下述绿色圆体，即可预览不同类名的动画效果。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row ws-docs-anim">
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-down">顶部往下滑入</div>
|
||||
<div>layui-anim-down</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-up">底部往上滑入</div>
|
||||
<div>layui-anim-up</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-downbit">微微往下滑入</div>
|
||||
<div>layui-anim-downbit</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
|
||||
<div>layui-anim-upbit</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
|
||||
<div>layui-anim-scale</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
|
||||
<div>layui-anim-scaleSpring</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-scalesmall">平滑放小</div>
|
||||
<div>layui-anim-scalesmall</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-scalesmall-spring">弹簧式放小</div>
|
||||
<div>layui-anim-scalesmall-spring</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
|
||||
<div>layui-anim-fadein</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
|
||||
<div>layui-anim-fadeout</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-rotate">360 度旋转</div>
|
||||
<div>layui-anim-rotate</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
|
||||
<div>追加：layui-anim-loop</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
|
||||
//演示动画
|
||||
$('.ws-docs-anim .layui-anim').on('click', function(){
|
||||
var othis = $(this), anim = othis.data('anim');
|
||||
|
||||
//停止循环
|
||||
if(othis.hasClass('layui-anim-loop')){
|
||||
return othis.removeClass(anim);
|
||||
}
|
||||
|
||||
othis.removeClass(anim);
|
||||
|
||||
setTimeout(function(){
|
||||
othis.addClass(anim);
|
||||
});
|
||||
//恢复渐隐
|
||||
if(anim === 'layui-anim-fadeout'){
|
||||
setTimeout(function(){
|
||||
othis.removeClass(anim);
|
||||
}, 1300);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
title: 辅助元素 blockquote,fieldset,hr
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 辅助元素
|
||||
|
||||
> 辅助元素是指对 `blockquote,fieldset,hr` 等标签的美化，主要是静态展示作用。
|
||||
|
||||
<h2 id="blockquote" lay-toc="{}" style="margin-bottom: 0;">引用</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<blockquote class="layui-elem-quote">
|
||||
引用内容，默认风格
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
||||
引用内容，边框风格
|
||||
</blockquote>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="fieldset" lay-toc="{}" style="margin-bottom: 0;">字段集</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<fieldset class="layui-elem-field">
|
||||
<legend>标题</legend>
|
||||
<div class="layui-field-box">
|
||||
任意内容
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<hr class="ws-space-16">
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>仅显示标题水平线</legend>
|
||||
</fieldset>
|
||||
内容写在外面
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="hr" lay-toc="{}" style="margin-bottom: 0;">水平线</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
默认分割线
|
||||
<hr>
|
||||
|
||||
赤色分割线
|
||||
<hr class="layui-border-red">
|
||||
|
||||
橙色分割线
|
||||
<hr class="layui-border-orange">
|
||||
|
||||
墨绿分割线
|
||||
<hr class="layui-border-green">
|
||||
|
||||
青色分割线
|
||||
<hr class="layui-border-cyan">
|
||||
|
||||
蓝色分割线
|
||||
<hr class="layui-border-blue">
|
||||
|
||||
深色分割线
|
||||
<hr class="layui-border-black">
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
title: 徽章 badge
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 徽章
|
||||
|
||||
> 徽章 `badge` 通常作为修饰用途而存在，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。
|
||||
|
||||
|
||||
<h2 id="badge" lay-toc="{}" style="margin-bottom: 0;">普通徽章</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<span class="layui-badge">6</span>
|
||||
<span class="layui-badge">99</span>
|
||||
<span class="layui-badge">61728</span>
|
||||
<span class="layui-badge">赤</span>
|
||||
<span class="layui-badge layui-bg-orange">橙</span>
|
||||
<span class="layui-badge layui-bg-green">绿</span>
|
||||
<span class="layui-badge layui-bg-cyan">青</span>
|
||||
<span class="layui-badge layui-bg-blue">蓝</span>
|
||||
<span class="layui-badge layui-bg-black">深</span>
|
||||
<span class="layui-badge layui-bg-gray">浅</span>
|
||||
|
||||
<hr class="ws-space-16">
|
||||
|
||||
边框徽章：
|
||||
<span class="layui-badge-rim">6</span>
|
||||
<span class="layui-badge-rim">Hot</span>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="badge-dot" lay-toc="{}">小圆点</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<span class="layui-badge-dot"></span>
|
||||
<span class="layui-badge-dot layui-bg-orange"></span>
|
||||
<span class="layui-badge-dot layui-bg-green"></span>
|
||||
<span class="layui-badge-dot layui-bg-cyan"></span>
|
||||
<span class="layui-badge-dot layui-bg-blue"></span>
|
||||
<span class="layui-badge-dot layui-bg-black"></span>
|
||||
<span class="layui-badge-dot layui-bg-gray"></span>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="demo" lay-toc="{}">徽章的搭配</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<button class="layui-btn">
|
||||
按钮甲
|
||||
<span class="layui-badge layui-bg-gray">1</span>
|
||||
</button>
|
||||
<button class="layui-btn">
|
||||
按钮乙
|
||||
<span class="layui-badge-dot layui-bg-orange"></span>
|
||||
</button>
|
||||
|
||||
<hr class="ws-space-16">
|
||||
|
||||
<ul class="layui-nav" style="text-align: right;">
|
||||
<li class="layui-nav-item">
|
||||
<a href="">菜单甲<span class="layui-badge">9</span></a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="">菜单乙<span class="layui-badge-dot"></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="ws-space-16">
|
||||
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标签1</li>
|
||||
<li>标签2<span class="layui-badge-dot"></span></li>
|
||||
<li>标签3<span class="layui-badge">99+</span></li>
|
||||
</ul>
|
||||
<div class="layui-tab-content"></div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
徽章还可以自由佩戴在其他更多元素中，此处不做逐一列举。
|
||||
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
---
|
||||
title: 底层方法
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 底层方法
|
||||
|
||||
> Layui 提供了一系列基础 API，以更好地辅助组件的使用。
|
||||
|
||||
<h2 id="config" lay-toc="">全局配置</h2>
|
||||
|
||||
`layui.config(options);`
|
||||
|
||||
您可以在 Layui 模块使用之前，采用该方法进行一些全局化的基础配置，其支持的属性如下：
|
||||
|
||||
```
|
||||
layui.config({
|
||||
base: '' // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用
|
||||
version: false, // 用于更新模块缓存，默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值
|
||||
dir: 'layui/', // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。一般无需设置
|
||||
debug: false, // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面
|
||||
});
|
||||
```
|
||||
|
||||
<!--
|
||||
|
||||
### 🌕 预设全局对象 <sup>2.6+</sup>
|
||||
|
||||
特别地，若你对 `layui.js` 本身进行了动态加载或是其他特殊场景中使用，那么上述 `layui.config()` 所设定的 `dir` 属性会因此失效，此时你可以在动态加载 <code>layui.js</code> 之前预先定义一个我们约定好的全局对象，如：
|
||||
|
||||
```
|
||||
<script>
|
||||
var LAYUI_GLOBAL = {
|
||||
dir: '/res/layui/' // layui.js 所在目录
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
> 提示：以上 `dir` 属性的目录设定仅针对特殊场景，如是采用 `<script>` 标签正常引入 layui 的，可以无视该操作。
|
||||
|
||||
-->
|
||||
|
||||
|
||||
<h2 id="url" lay-toc="">链接解析</h2>
|
||||
|
||||
`var url = layui.url(href);`
|
||||
|
||||
参数 `href` 可选，默认自动读取当前页面 URL（`location.href`）。该方法用于将一段 URL 链接中的 `pathname、search、hash` 等属性进行对象化处理， 以下是对一个 URL 解析后的返回结果：
|
||||
|
||||
```
|
||||
// 假设当前页面 url 为： https://domain.com/docs/base.html?a=1&c=3#/user/set/id=123/
|
||||
var url = layui.url();
|
||||
|
||||
// url 返回结果为：
|
||||
{
|
||||
"pathname": ["docs","base.html"], // 路径
|
||||
"search": {"a":"1","c":"3"}, // 参数
|
||||
"hash": { // hash 解析
|
||||
"path": ["user","set",""], // hash 中的路径
|
||||
"search": {"id":"123"}, // hash 中的参数
|
||||
"hash": "", // hash 中的 hash
|
||||
"href": "/user/set/id=123/" // hash 中的完整链接
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
该方法通常可搭配 `location.hash` 和 `hashchange ` 事件，或 `history.pushState()` 和 `popstate` 事件使用，从而实现*单页面应用开发*。 Layui 的 AdminUI 主题模板则正是基于该方法完成的路由系统。
|
||||
|
||||
|
||||
<h2 id="data" lay-toc="">本地存储</h2>
|
||||
|
||||
本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。方法如下：
|
||||
|
||||
- `layui.data(table, settings);` 即 localStorage，数据在浏览器中的持久化存储，除非物理删除。
|
||||
- `layui.sessionData(table, settings);` 即 sessionStorage ，数据在浏览器中的会话性存储，页面关闭后即失效。
|
||||
|
||||
两者使用方式完全一致。其中参数 `table` 为表名，`settings` 是一个对象，用于设置 `key/value`。下面以 `layui.data()` 方法为例：
|
||||
|
||||
```
|
||||
// 【增】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立。
|
||||
layui.data('test', {
|
||||
key: 'nickname',
|
||||
value: '张三'
|
||||
});
|
||||
|
||||
// 【删】：删除 test 表的 nickname 字段
|
||||
layui.data('test', {
|
||||
key: 'nickname',
|
||||
remove: true
|
||||
});
|
||||
layui.data('test', null); // 删除 test 表
|
||||
|
||||
// 【改】：同【增】，会覆盖已经存储的数据
|
||||
|
||||
// 【查】：向 test 表读取全部的数据
|
||||
var localTest = layui.data('test');
|
||||
console.log(localTest.nickname); // 获得“张三”
|
||||
```
|
||||
|
||||
<h2 id="device" lay-toc="">浏览器信息</h2>
|
||||
|
||||
`var device = layui.device(key);`
|
||||
|
||||
参数 `key` 可选。可利用该方法对不同的设备进行差异化处理，`device` 即为不同设备下返回的不同信息，如下：
|
||||
|
||||
```
|
||||
{
|
||||
os: "windows", // 当前浏览器所在的底层操作系统，如：Windows、Linux、Mac 等
|
||||
ie: false, // 当前浏览器是否为 ie6-11 的版本，如果不是 ie 浏览器，则为 false
|
||||
weixin: false, // 当前浏览器是否为微信 App 环境
|
||||
android: false, // 当前浏览器是否为安卓系统环境
|
||||
ios: false, // 当前浏览器是否为 IOS 系统环境
|
||||
mobile: false // 当前浏览器是否为移动设备环境（v2.5.7 新增）
|
||||
}
|
||||
```
|
||||
|
||||
有时，你的 App 可能会对 userAgent 插入一段特定标识，如：
|
||||
|
||||
```
|
||||
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 MYAPP/1.8.6 Safari/537.36
|
||||
```
|
||||
|
||||
要验证当前页面是否在你的 App 环境中，即可通过上述 `MYAPP`（即 Native 给 Webview 插入的标识，可自由定义）来判断。
|
||||
|
||||
```
|
||||
var device = layui.device('MYAPP');
|
||||
if(device.MYAPP){
|
||||
alert('在 MYAPP 环境中');
|
||||
}
|
||||
```
|
||||
|
||||
<h2 id="api" lay-toc="{hot: true}">API 列表</span></h2>
|
||||
|
||||
前面我们特别介绍了几个相对特殊的基础方法，而以下是 Layui 提供的全部基础 API：
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| layui.cache | 获得 UI 的一些配置及临时缓存信息 |
|
||||
| layui.config(options) | 基础配置。[#用法](#config) |
|
||||
| layui.define([modules], callback) | 定义模块。[#用法](modules.html#define) |
|
||||
| layui.use([modules], callback) | 加载模块。[#用法](modules.html#use) |
|
||||
| layui.extend(obj) | 扩展模块。[#用法](modules.html#extend) |
|
||||
| layui.disuse([modules]) <sup>2.7+</sup> | 弃用模块，以便重新扩展新的同名模块。参数支持数组，即可同时弃用多个模块。 如：`layui.disuse(['table'])` |
|
||||
| layui.link(href) | 加载 CSS，`href` 即为 css 路径。一般用于动态加载你的外部 CSS 文件 |
|
||||
| layui.getStyle(node, name) | 获得一个原始 DOM 节点的 style 属性值，如： <br>`layui.getStyle(document.body, 'font-size')` |
|
||||
| layui.img(src, callback, error) | 图片预加载 |
|
||||
| layui.each(obj, callback) | 对象（Array、Object、DOM 对象等）遍历，可用于取代 for 语句 |
|
||||
| layui.type(operand) <sup>2.6.7+</sup> | 获取基本数据类型和各类常见引用类型，如： <br> `layui.type([]); // array` <br> `layui.type({}); //object` <br> `layui.type(new Date()); // date` |
|
||||
| layui.isArray(obj) <sup>2.7+</sup> | 对象是否为泛数组结构。如 Array、NodeList、jQuery 对象等<br> `layui.isArray([1,6]); // true` <br> `layui.isArray($('div')); // true` |
|
||||
| layui.sort(obj, key, desc) | 将数组中的对象按某个成员重新对该数组排序，如：`layui.sort([{a: 3},{a: 1},{a: 5}], 'a'); // 返回：[{"a":1},{"a":3},{"a":5}]` |
|
||||
| layui.url(href) | 链接解析。[#用法](#url) |
|
||||
| layui.data(table, settings) | 持久化存储。[#用法](#data) |
|
||||
| layui.sessionData(table, settings) | 会话性存储。[#用法](#data) |
|
||||
| layui.device(key) | 获取浏览器信息。[#用法](#device) |
|
||||
| layui.hint() | 向控制台打印一些异常信息，目前只返回了 error 方法，如： <br>`var hint = layui.hint();` <br> `hint.error('出错啦');` |
|
||||
| layui.stope(e) | 阻止事件冒泡 |
|
||||
| layui.onevent(modName, events, callback) | 增加自定义模块事件，一般在内置组件中使用。 |
|
||||
| layui.event(modName, events, params) | 执行自定义模块事件，搭配 onevent 使用。注<sup>2.8+</sup>：当 events 参数中未设定 filter 时则可重复执行该事件，否则只会执行一次最新添加的事件。 |
|
||||
| layui.off(events, modName) <sup>2.5.7+</sup> | 用于移除模块相关事件，如：`layui.off('select(filter)', 'form')`，那么`form.on('select(filter)', callback)`事件将会被移除 |
|
||||
| layui.factory(modName) | 用于获取模块对应的 `layui.define()` 的回调函数 |
|
||||
| var lay = layui.lay | 基础模块，提供了更多基础 API，一般供 Layui 内置组件中使用 |
|
||||
|
||||
> 基础 API 是整个 UI 的有力支撑，我们在组件的使用过程中也经常会用到。
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
---
|
||||
title: 按钮
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 按钮
|
||||
|
||||
> 向任意 `HTML` 标签设定`class="layui-btn"` 建立一个基础按钮。通过追加格式为`layui-btn-{type}`的 `class` 来定义其它按钮风格。内置的按钮 `class` 可以进行任意组合，从而形成更多种按钮风格。
|
||||
|
||||
<h2 id="theme" lay-toc="">按钮主题</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code']}">
|
||||
<textarea>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
|
||||
<button type="button" class="layui-btn">默认按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-primary layui-border">原始按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-border-blue">百搭按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-border-orange">暖色按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-border-red">警告按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-border-black">深色按钮</button>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="size" lay-toc="">按钮尺寸</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code']}">
|
||||
<textarea>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
|
||||
<button type="button" class="layui-btn">默认按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
|
||||
</div>
|
||||
|
||||
<div style="width: 380px;">
|
||||
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（宽度自适应）</button>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="radius" lay-toc="">按钮圆角</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code']}">
|
||||
<textarea>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="icon" lay-toc="">按钮图标</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'max-height: 350px;', layout: ['preview', 'code']}">
|
||||
<textarea>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn">
|
||||
按钮 <i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn">
|
||||
<i class="layui-icon layui-icon-left"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn">
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn">
|
||||
<i class="layui-icon layui-icon-share"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
|
||||
<i class="layui-icon layui-icon-left"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
|
||||
<i class="layui-icon layui-icon-share"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-disabled">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">
|
||||
<i class="layui-icon layui-icon-left"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
</button>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="mashup" lay-toc="">按钮混搭</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code']}">
|
||||
<textarea>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
|
||||
<a href="/" class="layui-btn" target="_blank">跳转的按钮</a>
|
||||
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">
|
||||
<i class="layui-icon layui-icon-delete"></i> 删除
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">
|
||||
<i class="layui-icon layui-icon-share"></i> 分享
|
||||
</button>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="group" lay-toc="">按钮组合</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'max-height: 350px;'}">
|
||||
<textarea>
|
||||
<div class="layui-btn-group">
|
||||
<button type="button" class="layui-btn">增加</button>
|
||||
<button type="button" class="layui-btn ">编辑</button>
|
||||
<button type="button" class="layui-btn">删除</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-group">
|
||||
<button type="button" class="layui-btn layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-group">
|
||||
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
</button>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="container" lay-toc="">按钮容器</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code']}">
|
||||
<textarea>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn">按钮一</button>
|
||||
<button type="button" class="layui-btn">按钮二</button>
|
||||
<button type="button" class="layui-btn">按钮三</button>
|
||||
</div>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn">按钮一</button>
|
||||
<button type="button" class="layui-btn">按钮二</button>
|
||||
<button type="button" class="layui-btn">按钮三</button>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<br>
|
||||
|
||||
## 小贴士
|
||||
|
||||
> 按钮的主题、尺寸、图标、圆角的交叉组合，可以形成丰富多样的按钮种类。其中颜色也可以根据使用场景自主更改。
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var carousel = layui.carousel;
|
||||
|
||||
// 渲染 - 图片轮播
|
||||
carousel.render({
|
||||
elem: '#ID-carousel-demo-image',
|
||||
width: '720px',
|
||||
height: '360px',
|
||||
interval: 3000
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -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` 不自动滚动
|
||||
- `alway` 始终自动滚动，不受鼠标移入移出影响 <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" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>change <sup>2.7+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.change", 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` 事件中通过轮播重载来重设宽高值。
|
||||
|
|
@ -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("docs/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("docs/carousel/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
|
||||
<h3 id="goto" lay-toc="{level: 2}">切换</h3>
|
||||
|
||||
`inst.goto(index);`
|
||||
|
||||
- 参数 `index` : 轮播下标，从 `0` 开始计算
|
||||
|
||||
通过渲染返回的实例对象，可获得切换方法，用于实现对轮播的手动定向切换。
|
||||
|
||||
```
|
||||
var inst = carousel.render(options); // 轮播初始渲染
|
||||
inst.goto(0); // 轮播切换到第一项
|
||||
inst.goto(1); // 轮播切换到第二项
|
||||
```
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
---
|
||||
title: 公共类 class
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 公共类
|
||||
|
||||
> 公共类是 `layui.css` 中并不以组件形式存在的公共 `class` 选择器，而又能用于任何地方。
|
||||
|
||||
<h2 id="base" lay-toc="{}" style="margin-bottom: 0;">普通类</h2>
|
||||
|
||||
| className | 描述 |
|
||||
| --- | --- |
|
||||
| layui-main | 设置一个固定宽度为 `1160px` 的水平居中块 |
|
||||
| layui-border-box | 设置元素及其所有子元素均为 `box-sizing: content-box` 模型的容器 |
|
||||
| layui-clear | 清除前面的同级元素产生的浮动 |
|
||||
| layui-clear-space <sup>2.8+</sup> | 清除容器内的空白符 |
|
||||
| layui-inline | 设置元素为内联块状结构 |
|
||||
| layui-elip | 设置单行文本溢出并显示省略号 |
|
||||
| layui-unselect | 屏蔽选中 |
|
||||
| layui-disabled | 设置元素为不可点击状态 |
|
||||
| layui-circle | 设置元素为圆形。需确保 `width` 和 `height` 相同 |
|
||||
|
||||
<h2 id="display" lay-toc="{hot: true}">显示隐藏</h2>
|
||||
|
||||
| className | 描述 |
|
||||
| --- | --- |
|
||||
| layui-show | 设置元素为 `display: block` 可见状态 |
|
||||
| layui-hide | 设置元素为 `display: none` 隐藏状态，且不占用空间 |
|
||||
| layui-show-v | 设置元素为 `visibility: visible` 可见状态 |
|
||||
| layui-hide-v | 设置元素为 `visibility: hidden` 不可见状态，且依旧占用空间 |
|
||||
|
||||
|
||||
<h2 id="edge" lay-toc="{}">三角实体</h2>
|
||||
|
||||
| className | 描述 |
|
||||
| --- | --- |
|
||||
| layui-edge | 定义一个三角形基础类 |
|
||||
| layui-edge-top | 设置向上三角 |
|
||||
| layui-edge-right | 设置向右三角 |
|
||||
| layui-edge-bottom | 设置向下三角 |
|
||||
| layui-edge-left | 设置向左三角 |
|
||||
|
||||
示例
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
向上三角：
|
||||
<i class="layui-edge layui-edge-top"></i>
|
||||
<i class="layui-edge layui-edge-top" style="border-bottom-color: black;"></i>
|
||||
|
||||
<hr>
|
||||
向右三角：
|
||||
<i class="layui-edge layui-edge-right"></i>
|
||||
<i class="layui-edge layui-edge-right" style="border-left-color: black;"></i>
|
||||
|
||||
<hr>
|
||||
向下三角：
|
||||
<i class="layui-edge layui-edge-bottom"></i>
|
||||
<i class="layui-edge layui-edge-bottom" style="border-top-color: black;"></i>
|
||||
|
||||
<hr>
|
||||
向左三角：
|
||||
<i class="layui-edge layui-edge-left"></i>
|
||||
<i class="layui-edge layui-edge-left" style="border-right-color: black;"></i>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="bg" lay-toc="{hot: true}">背景颜色</h2>
|
||||
|
||||
| className | 背景色 | 预览 |
|
||||
| --- | --- | --- |
|
||||
| layui-bg-red | 红 | <div class="layui-bg-red"> </div> |
|
||||
| layui-bg-orange | 橙 | <div class="layui-bg-orange"> </div> |
|
||||
| layui-bg-green | 绿 | <div class="layui-bg-green"> </div> |
|
||||
| layui-bg-blue | 蓝 | <div class="layui-bg-blue"> </div> |
|
||||
| layui-bg-purple | 紫 | <div class="layui-bg-purple"> </div> |
|
||||
| layui-bg-black | 深 | <div class="layui-bg-black"> </div> |
|
||||
| layui-bg-gray | 浅 | <div class="layui-bg-gray"> </div> |
|
||||
|
||||
<h2 id="font-size" lay-toc="{}">文字大小</h2>
|
||||
|
||||
| className | 文字大小和预览 |
|
||||
| --- | --- |
|
||||
| layui-font-12 | <span class="layui-font-12">12px</span> |
|
||||
| layui-font-13 <sup>2.8+</sup> | <span class="layui-font-13">13px</span> |
|
||||
| layui-font-14 | <span class="layui-font-14">14px</span> |
|
||||
| layui-font-16 | <span class="layui-font-16">16px</span> |
|
||||
| layui-font-18 | <span class="layui-font-18">18px</span> |
|
||||
| layui-font-20 | <span class="layui-font-20">20px</span> |
|
||||
| layui-font-22 <sup>2.8+</sup> | <span class="layui-font-22">22px</span> |
|
||||
| layui-font-24 <sup>2.8+</sup> | <span class="layui-font-24">24px</span> |
|
||||
| layui-font-26 <sup>2.8+</sup> | <span class="layui-font-26">26px</span> |
|
||||
| layui-font-28 <sup>2.8+</sup> | <span class="layui-font-28">28px</span> |
|
||||
| layui-font-30 <sup>2.8+</sup> | <span class="layui-font-30">30px</span> |
|
||||
| layui-font-32 <sup>2.8+</sup> | <span class="layui-font-32">32px</span> |
|
||||
|
||||
<h2 id="font-color" lay-toc="{}">文字颜色</h2>
|
||||
|
||||
| className | 文字颜色和预览 |
|
||||
| --- | --- |
|
||||
| layui-font-red | <span class="layui-font-red">红</span> |
|
||||
| layui-font-orange | <span class="layui-font-orange">橙</span> |
|
||||
| layui-font-green | <span class="layui-font-green">绿</span> |
|
||||
| layui-font-blue | <span class="layui-font-blue">蓝</span> |
|
||||
| layui-font-purple | <span class="layui-font-purple">紫</span> |
|
||||
| layui-font-black | <span class="layui-font-black">深</span> |
|
||||
| layui-font-gray | <span class="layui-font-gray">浅</span> |
|
||||
|
||||
<h2 id="text" lay-toc="{hot: true}">文档容器</h2>
|
||||
|
||||
通过设置 `class="layui-text"` 定义一段包含标题、段落、列表、链接等组合的文档区域。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 535px;', layout: ['preview', 'code'], tools: ['full','window']}">
|
||||
<textarea>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>文本区域演示 - Layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="{{= d.layui.cdn.css }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-text" style="padding: 16px;">
|
||||
<h1>标题1</h1>
|
||||
<h2>标题2</h2>
|
||||
<h3>标题3</h3>
|
||||
<h4>标题4</h4>
|
||||
<h5>标题5</h5>
|
||||
<h6>标题6</h6>
|
||||
|
||||
<hr>
|
||||
|
||||
<ul>
|
||||
<li>列表1</li>
|
||||
<li>
|
||||
列表2
|
||||
<ul>
|
||||
<li>列表2-1</li>
|
||||
<li>列表2-2</li>
|
||||
<li>列表2-3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>列表3</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<ol>
|
||||
<li>列表1</li>
|
||||
<li>列表2</li>
|
||||
<li>列表3</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>标题2</h2>
|
||||
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1</p>
|
||||
<p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
|
||||
<blockquote>引用</blockquote>
|
||||
<p>这是一个包含<a href="javascript:;">超文本</a>和<strong>加粗文本</strong>的段落</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
<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>preview <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启 Code 预览功能，可选值有：
|
||||
|
||||
- `true` 开启 Code 的普通预览
|
||||
- `false` 关闭 Code 预览（默认）
|
||||
- `"iframe"` 开启 Code 在 iframe 模式中预览
|
||||
|
||||
当开启该属性时，`elem` 指定的元素需要设置成以下结构：
|
||||
|
||||
```
|
||||
<pre class="layui-code" lay-options="{}">
|
||||
<textarea>
|
||||
code content
|
||||
</textarea>
|
||||
</pre>
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>boolean<br>string</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
开启预览后的面板布局方式，值为一个数组，数组的可选成员有：
|
||||
|
||||
- `code` 代码区域
|
||||
- `preview` 预览区域
|
||||
|
||||
面板将根据数组的排列顺序来显示，如：
|
||||
|
||||
```
|
||||
layout: ['code', 'preview']
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>style <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置 Code 和预览区域的公共样式
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>codeStyle <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置 Code 区域的局部样式，优先级高于 `style` 属性
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>previewStyle <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置预览区域的局部样式，优先级高于 `style` 属性
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置实例的唯一索引，以便用于其他操作
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>className <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
追加实例面板的 `className`，以便对其自定义样式
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tools <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
用于开启 `preview` 属性后的面板头部右侧区域工具栏图标，值为一个数组，内置成员：
|
||||
|
||||
- `full` 最大化显示
|
||||
- `window` 在新窗口预览。一般当 `layout: 'iframe'` 时开启，且 code 中须包含完整的 HTML 方可在新窗口正常预览。
|
||||
|
||||
工具图标将根据数组的排列顺序来显示，如：
|
||||
|
||||
```
|
||||
tools: ['full', 'window']
|
||||
```
|
||||
|
||||
亦可自定义值，值对应[图标](../icon/) `className` 的 `layui-icon-` 后的名称，并通过 `toolsEvent` 回调函数中处理事件。
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toolsEvent <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
点击工具栏的回调函数，函数返回 `tools` 设置的名称，如：
|
||||
|
||||
```
|
||||
toolsEvent: function(othis, type){
|
||||
console.log(othis); // 当前图标元素对象
|
||||
console.log(type); // tools 中设置的对应值
|
||||
}
|
||||
```
|
||||
|
||||
通过该函数与 `tools` 属性的搭配，可实现对工具栏的扩展。
|
||||
|
||||
</td>
|
||||
<td>function</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>text <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
自定义默认文本，值为一个对象，可选成员有:
|
||||
|
||||
```
|
||||
text: {
|
||||
code: '代码栏标题', // 默认: </>
|
||||
preview: '预览栏标题' // 默认: Preview
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>header <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启 Code 栏头部区域
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>about</td>
|
||||
<td>
|
||||
|
||||
设置 Code 栏头部右上角信息。必须开启 `header` 属性后有效。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ln</td>
|
||||
<td>
|
||||
|
||||
是否显示 Code 区域的行号
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>skin</td>
|
||||
<td>
|
||||
|
||||
Code 容器的风格，可选值有：
|
||||
|
||||
- `light` 浅色模式（默认）
|
||||
- `dark` 深色模式
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>encode</td>
|
||||
<td>
|
||||
|
||||
是否对 Code 区域自动转义 html 标签
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[done](#options.done) <sup>2.8+</sup>
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.done" class="ws-anchor">
|
||||
组件渲染完毕的回调函数，函数返回一个 object 类型参数
|
||||
</div>
|
||||
|
||||
```
|
||||
done: function(obj){
|
||||
var container = obj.container; // 当前面板的容器对象
|
||||
obj.render(); // 对预览中的 `element,form` 等组件进行渲染
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: Code 预览组件 code
|
||||
toc: true
|
||||
---
|
||||
|
||||
# Code 预览组件
|
||||
|
||||
> 代码预览组件 `code` 主要用于对代码区块的修饰和对应的效果预览，如 Layui 各组件文档中的示例演示。
|
||||
|
||||
|
||||
<h2 id="api" lay-toc="{}">方法</h2>
|
||||
|
||||
`layui.code(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)。
|
||||
|
||||
属性除了在该方法中传递，也可以直接写在元素的 `lay-options` 属性上，如：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview']}">
|
||||
<textarea>
|
||||
<pre class="layui-code code-demo" lay-options="{}">
|
||||
// 在里面放置任意的 code
|
||||
test
|
||||
test
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
// code
|
||||
layui.code({
|
||||
elem: '.code-demo'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="options" lay-toc="{hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/code/detail/options.md") }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
---
|
||||
title: 颜色
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 颜色
|
||||
|
||||
> Layui 试图在清新与深沉之间寻求某种柔和，以不过分刺激大脑皮层的神经介质，反馈出经久耐看的微妙视图。您可以在我们精心调配的如下色系中合理搭配，减少不必要的违和感，从而使您的 Web 页面看上去尽可能融洽。
|
||||
|
||||
<h2 id="primary" lay-toc="">基色调</h2>
|
||||
|
||||
<div class="layui-row layui-col-space15 ws-docs-color">
|
||||
<div class="layui-col-sm4">
|
||||
<div class="layui-bg-green">
|
||||
<p>#16baaa</p>
|
||||
<p>蓝绿色</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4">
|
||||
<div style="background-color: #16b777;">
|
||||
<p>#16b777</p>
|
||||
<p>清新绿</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4">
|
||||
<div class="layui-bg-blue">
|
||||
<p>#1e9fff<p>
|
||||
<p>经典蓝</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Layui 选取以象征清新与包容的「蓝绿色」作为主色调，它介于蓝与绿之间，亦可称之为「青色」，所谓青者，取之于蓝而深于绿，此间包罗万象，跨越时空。这也是我们对技术创作与人生哲学之间的一点思考。
|
||||
|
||||
|
||||
<h2 id="secondary" lay-toc="">辅色调</h2>
|
||||
|
||||
<div class="layui-row layui-col-space15 ws-docs-color">
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-bg-red">
|
||||
<p>#ff5722<p>
|
||||
<p>错误 - Danger</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-bg-orange">
|
||||
<p>#ffb800</p>
|
||||
<p>警示 - Warning</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-sm3">
|
||||
<div style="background-color: #16b777;">
|
||||
<p>#16b777</p>
|
||||
<p>成功 - Success</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div style="background-color: #31bdec;">
|
||||
<p>#31bdec</p>
|
||||
<p>引导 - Info</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
页面中同样也少不了辅助色彩的点缀，以对不同含义的内容加以区分。Layui 从暖色系（红/橙）和冷色系（绿/蓝）中，各自调取了我们认为最具代表性的颜色值，它们通常在不同的场景中发挥着不同的作用。
|
||||
|
||||
<h2 id="neutral" lay-toc="">中色调</h2>
|
||||
|
||||
<div class="layui-row ws-docs-color ws-docs-necolor">
|
||||
<div class="layui-col-md6">
|
||||
<div style="background-color: #FAFAFA;">
|
||||
<p>#fafafa<p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div style="background-color: #f6f6f6;"><p>#f7f7f7</p></div>
|
||||
</div>
|
||||
<div class="layui-col-md2">
|
||||
<div style="background-color: #eeeeee;"><p>#eeeeee</p></div>
|
||||
</div>
|
||||
<div class="layui-col-md2">
|
||||
<div style="background-color: #e2e2e2;"><p>#e2e2e2</p></div>
|
||||
</div>
|
||||
<div class="layui-col-md2">
|
||||
<div style="background-color: #dddddd;"><p>#dddddd</p></div>
|
||||
</div>
|
||||
<div class="layui-col-md2">
|
||||
<div style="background-color: #d2d2d2;"><p>#d2d2d2</p></div>
|
||||
</div>
|
||||
<div class="layui-col-md2">
|
||||
<div style="background-color: #cccccc;"><p>#cccccc</p></div>
|
||||
</div>
|
||||
<div class="layui-col-md2">
|
||||
<div style="background-color: #c2c2c2;"><p>#c2c2c2</p></div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-bg-black"><p>#2f363c</p></div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div style="background-color: #23292e; color: #fff;"><p>#23292e</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
中性的颜色是页面中的重要组成部分，也被称之为无彩色系，一般用于文本、背景和边框等。它能对由彩色进行视觉冲淡，以达到和谐自然的效果。Layui 认为恰当的灰度调配代表着极简，这是一种神奇的色系，是视觉疲劳的栖息，低调而优雅，且永不过时。
|
||||
|
||||
<h2 id="seven" lay-toc="">七色调</h2>
|
||||
|
||||
<div class="layui-row ws-docs-color ws-docs-bgcolor">
|
||||
<div class="layui-bg-red">
|
||||
#ff5722 - 红
|
||||
</div>
|
||||
<div class="layui-bg-orange">
|
||||
#ffb800 - 橙
|
||||
</div>
|
||||
<div class="layui-bg-green">
|
||||
#16baaa - 绿
|
||||
</div>
|
||||
<div class="layui-bg-blue">
|
||||
#1e9fff - 蓝
|
||||
</div>
|
||||
<div class="layui-bg-purple">
|
||||
#a233c6 - 紫
|
||||
</div>
|
||||
<div class="layui-bg-black">
|
||||
#2f363c - 深
|
||||
</div>
|
||||
<div class="layui-bg-gray">
|
||||
#fafafa - 浅
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Layui 的色调基础，除了前面提到的主辅中色之外，还建立在以上罗列的七种颜色之上。你同样也可以遵循我们提供的色调方案去扩展你的页面元素，使得能与 Layui 的主题风格无缝融合。
|
||||
|
||||
<br>
|
||||
|
||||
## 标语
|
||||
|
||||
> 不热衷于视觉设计的开发者不是一个好作家。 —— 贤心
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '常规使用'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-1"></div>
|
||||
<div id="ID-colorpicker-demo-2" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({ // eg1
|
||||
elem: '#ID-colorpicker-demo-1', // 绑定元素
|
||||
change: function(color){ // 颜色改变的回调
|
||||
layer.tips('选择了：'+ color, this.elem, {
|
||||
tips: 1
|
||||
});
|
||||
}
|
||||
});
|
||||
colorpicker.render({ // eg2
|
||||
elem: '#ID-colorpicker-demo-2',
|
||||
color: '#2ec770', // 设置默认色
|
||||
done: function(color){ // 选择完毕的回调
|
||||
layer.tips('选择了：'+ color, this.elem);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-form" class="ws-anchor ws-bold">将颜色值赋给表单</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline" style="width: 120px;">
|
||||
<input type="text" name="color" value="" placeholder="请选择颜色" class="layui-input" id="ID-colorpicker-demo-form-color">
|
||||
</div>
|
||||
<div class="layui-inline" style="left: -11px;">
|
||||
<div id="ID-colorpicker-demo-form"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
var $ = layui.$;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-form',
|
||||
color: '#1c97f5',
|
||||
done: function(color){
|
||||
$('#ID-colorpicker-demo-form-color').val(color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-rgba" class="ws-anchor ws-bold">设置 RGB / RGBA</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-rgb"></div>
|
||||
<div id="ID-colorpicker-demo-rgba" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({ // eg1
|
||||
elem: '#ID-colorpicker-demo-rgb',
|
||||
color: 'rgb(68,66,66)',
|
||||
format: 'rgb' // 默认为 hex
|
||||
});
|
||||
colorpicker.render({ // eg2
|
||||
elem: '#ID-colorpicker-demo-rgba',
|
||||
color: 'rgba(68,66,66,0.5)',
|
||||
format: 'rgb',
|
||||
alpha: true // 开启透明度滑块
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-alpha" class="ws-anchor ws-bold">开启透明度</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-alpha-1"></div>
|
||||
<div id="ID-colorpicker-demo-alpha-2" style="margin-left: 16px;"></div>
|
||||
<div id="ID-colorpicker-demo-alpha-3" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({ // eg1
|
||||
elem: '#ID-colorpicker-demo-alpha-1',
|
||||
color: '#16baaa', // hex
|
||||
alpha: true, // 开启透明度
|
||||
format: 'rgb'
|
||||
});
|
||||
colorpicker.render({ // eg2
|
||||
elem: '#ID-colorpicker-demo-alpha-2',
|
||||
color: 'rgb(0,150,136,0.6)', // rgba
|
||||
alpha: true,
|
||||
format: 'rgb'
|
||||
});
|
||||
colorpicker.render({ // eg3
|
||||
elem: '#ID-colorpicker-demo-alpha-3',
|
||||
alpha: true,
|
||||
format: 'rgb'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-predefine" class="ws-anchor ws-bold">预定义颜色项</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-predefine-1"></div>
|
||||
<div id="ID-colorpicker-demo-predefine-2" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({ // eg1
|
||||
elem: '#ID-colorpicker-demo-predefine-1',
|
||||
color: '#c71585',
|
||||
predefine: true // 开启预定义颜色
|
||||
});
|
||||
colorpicker.render({ // eg2
|
||||
elem: '#ID-colorpicker-demo-predefine-2',
|
||||
color: '#9d8a0e',
|
||||
predefine: true, // 开启预定义颜色
|
||||
colors: ['#ff8c00','#00ced1','#9d8a0e'] //自定义预定义颜色项
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-all" class="ws-anchor ws-bold">全功能和回调的使用</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<button class="layui-btn" id="ID-colorpicker-demo-all-btn">主题按钮</button>
|
||||
<hr>
|
||||
<div id="ID-colorpicker-demo-all"></div>
|
||||
<span style="padding-left: 6px;">演示：选择颜色并确定，改变上方按钮背景色</span>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
var layer = layui.layer;
|
||||
var $ = layui.$;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-all',
|
||||
color: '#16baaa',
|
||||
predefine: true,
|
||||
alpha: true,
|
||||
done: function(color){
|
||||
layer.msg('选择的值：'+ color); // 选择完毕的颜色值
|
||||
|
||||
// 清空或取消选择时也执行 change
|
||||
color || this.change(color);
|
||||
},
|
||||
change: function(color){
|
||||
// 给当前页面头部和左侧设置主题色
|
||||
$('#ID-colorpicker-demo-all-btn').css('background-color', color);
|
||||
},
|
||||
cancel: function(color){ // 取消颜色选择的回调 --- 2.8+
|
||||
this.change(color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-size" class="ws-anchor ws-bold">颜色框尺寸</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-size-lg"></div>
|
||||
<div id="ID-colorpicker-demo-size-sm" style="margin-left: 16px;"></div>
|
||||
<div id="ID-colorpicker-demo-size-xs" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-size-lg',
|
||||
size: 'lg' // 大号下拉框
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-size-sm'
|
||||
//,size: 'sm' // 默认 sm
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-size-xs',
|
||||
size: 'xs' // mini 下拉框
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-class" class="ws-anchor ws-bold">同时绑定多个元素</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="demo-class-colorpicker" lay-options="{color: '#FF0000'}"></div>
|
||||
<div class="demo-class-colorpicker" lay-options="{color: '#008000'}"></div>
|
||||
<div class="demo-class-colorpicker" lay-options="{color: '#0000FF'}"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({
|
||||
elem: '.demo-class-colorpicker',
|
||||
done: function(color){
|
||||
console.log(this.elem, color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<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>color</td>
|
||||
<td>
|
||||
|
||||
默认颜色值，值的格式跟随 `format` 属性的设定。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>format</td>
|
||||
<td>
|
||||
|
||||
颜色显示/输入格式，支持 `hex` `rgb` 。 若同时开启 `alpha` 属性，则颜色值自动变为 `rgba`。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`hex`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>alpha</td>
|
||||
<td>
|
||||
|
||||
是否开启透明度。当同时开启 `format: 'rga'` 时，`color` 值将采用 `rgba` 格式。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>predefine</td>
|
||||
<td>
|
||||
|
||||
是否开启预定义颜色栏
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>colors</td>
|
||||
<td>
|
||||
|
||||
设置可选的颜色列表，需开启 `predefine: true` 有效。
|
||||
<br>用法详见：[#预定义颜色项](#demo-predefine)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>
|
||||
|
||||
颜色框的尺寸，可选值： `lg` `sm` `xs`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`sm`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>change</td>
|
||||
<td colspan="3">
|
||||
|
||||
颜色被改变的回调函数。用法详见：[#示例](#demo-all)
|
||||
|
||||
```
|
||||
change: function(value){
|
||||
console.log(value); // 当前颜色值
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>done</td>
|
||||
<td colspan="3">
|
||||
|
||||
颜色选择完毕的回调函数。点击“确认”和“清除”按钮均会触发
|
||||
|
||||
```
|
||||
done: function(value){
|
||||
console.log(value); // 当前选中的颜色值
|
||||
}
|
||||
```
|
||||
|
||||
用法详见：[#示例](#demo-all)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cancel <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
取消颜色选择的回调函数，一般点击非颜色选择面板区域触发。
|
||||
|
||||
```
|
||||
cancel: function(value){
|
||||
console.log(value); // 当前颜色值
|
||||
}
|
||||
```
|
||||
|
||||
用法详见：[#示例](#demo-all)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>close <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
颜色选择面板被关闭后即触发。
|
||||
|
||||
```
|
||||
close: function(value){
|
||||
console.log(value); // 当前颜色值
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
title: 颜色选择器 colorpicker
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 颜色选择器
|
||||
|
||||
> 颜色选择器 `colorpicker` 用于对颜色的快捷选择，支持 `hex,rgb,rgba` 三种颜色类型。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/colorpicker/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var colorpicker = layui.colorpicker | 获得 `colorpicker` 模块。 |
|
||||
| [colorpicker.render(options)](#render) | colorpicker 组件渲染，核心方法。 |
|
||||
|
||||
|
||||
<h2 id="render" lay-toc="{level: 2}">渲染</h2>
|
||||
|
||||
`colorpicker.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
<br>注 <sup>2.7+</sup> : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。
|
||||
|
||||
```
|
||||
<div id="ID-test-colorpicker"></div>
|
||||
<div class="class-test-colorpicker" lay-options="{color: '#333'}"></div>
|
||||
<div class="class-test-colorpicker" lay-options="{color: '#777'}"></div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
// 单个渲染
|
||||
colorpicker.render({
|
||||
elem: '#ID-test-colorpicker'
|
||||
});
|
||||
// 批量渲染
|
||||
colorpicker.render({
|
||||
elem: '.class-test-colorpicker'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/colorpicker/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
## 兼容性
|
||||
|
||||
> colorpicker 组件支持 `Chrome,Edge,Firefox` 等所有高级浏览器，不支持 IE10 低版本浏览器。
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<h3 lay-toc="{level: 2, id: 'examples', hot: true}" class="layui-hide">基础用法</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/base.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-complex" lay-toc="{level: 2, hot: true}">复杂结构</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/complex.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-table" lay-toc="{level: 2, hot: true}">在表格中应用</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/table.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-on" lay-toc="{level: 2}">自定义事件</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/on.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-contextmenu" lay-toc="{level: 2, hot: true}">右键菜单</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/contextmenu.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-align" lay-toc="{level: 2}">水平对齐方式</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/align.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-content" lay-toc="{level: 2, hot: true}">自定义内容</h3>
|
||||
|
||||
如下以弹出一个 `tab` 为例
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/content.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<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>title</td>
|
||||
<td>
|
||||
|
||||
菜单标题
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>
|
||||
|
||||
菜单 ID。用户菜单项唯一索引
|
||||
|
||||
|
||||
</td>
|
||||
<td>number/string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>
|
||||
|
||||
菜单项的类型，支持的可选值如下：
|
||||
|
||||
- `normal` 普通菜单项（默认）
|
||||
- `group` 纵向组合收缩菜单
|
||||
- `parent` 横向父级菜单
|
||||
- `-` 分割线
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`normal`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>href</td>
|
||||
<td>
|
||||
|
||||
菜单项的 url 地址。若填写，点击菜单将直接发生跳转。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>target</td>
|
||||
<td>
|
||||
|
||||
菜单 url 打开方式，需设置 `href` 属性后才生效。 一般可设为 `_blank` 或 `_self` 等
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`_self`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
菜单项是否禁用状态
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>templet</td>
|
||||
<td>
|
||||
|
||||
自定义当前菜单项模板，优先级高于基础属性 `templet`
|
||||
|
||||
</td>
|
||||
<td>string/function</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>child</td>
|
||||
<td>
|
||||
|
||||
子级菜单数据集合。参数同父级，可无限嵌套。
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
<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>
|
||||
|
||||
[data](#options.data)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
下拉菜单的数据源。格式详见：[#data 格式](#options.data)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>
|
||||
|
||||
触发组件的事件类型。支持所有事件，如： `click,hover,mousedown,contextmenu` 等
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`click`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>
|
||||
|
||||
是否渲染即显示组件面板。该属性一般在重载方法中传递。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>align</td>
|
||||
<td>
|
||||
|
||||
下拉面板相对绑定元素的水平对齐方式。支持以下可选值：
|
||||
|
||||
- `left` 左对齐（默认）
|
||||
- `center` 居中对齐
|
||||
- `right` 右对齐
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`left`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isAllowSpread</td>
|
||||
<td>
|
||||
|
||||
是否允许菜单组展开收缩
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isSpreadItem</td>
|
||||
<td>
|
||||
|
||||
是否初始展开子菜单
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
<td>
|
||||
|
||||
延迟关闭的毫秒数。当 `trigger: 'hover'` 时才生效
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`300`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>
|
||||
|
||||
自定义组件主容器的样式类名，从而在外部重新定义样式。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>style</td>
|
||||
<td>
|
||||
|
||||
设置组件主容器的 `CSS` 样式。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shade <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置弹出时的遮罩。支持以下方式赋值：
|
||||
|
||||
- 若值为 `number` 类型，则表示为遮罩透明度，如:
|
||||
<br>`shade: 0.3`
|
||||
- 若值为 `array` 类型，则可同时设置透明度和背景色，如:
|
||||
<br>`shade: [0.3, '#000']`
|
||||
|
||||
</td>
|
||||
<td>number<br>array</td>
|
||||
<td>
|
||||
|
||||
`0`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>templet</td>
|
||||
<td>
|
||||
|
||||
全局定义菜单的列表模板，可添加任意 `html` 字符，且支持 [laytpl](../laytpl/) 模板语法。用法详见：[#示例](#demo-complex)
|
||||
|
||||
注 <sup>2.8+</sup> : 模板亦可采用函数写法：
|
||||
|
||||
```
|
||||
templet: function(d){
|
||||
return '<i class="layui-icon layui-icon-tips"></> ' + d.title;
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>string<br>function</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>
|
||||
|
||||
自定义组件内容，从而替代默认的菜单结构。用法详见：[#示例](#demo-content)
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>clickScope <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置触发点击事件的菜单范围。 支持以下可选值：
|
||||
|
||||
- `all` : 即代表父子菜单均可触发事件
|
||||
|
||||
默认无需设置，即父级菜单不触发事件
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ready</td>
|
||||
<td colspan="3">
|
||||
|
||||
组件成功弹出后的回调函数。返回的参数如下：
|
||||
|
||||
```
|
||||
ready: function(elemPanel, elem){
|
||||
console.log(elemPanel); // 组件面板元素对象
|
||||
console.log(elem); // 当前组件绑定的目标元素对象
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[click](#options.click)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.click" class="ws-anchor">
|
||||
菜单项被点击时的回调函数。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
click: function(data, othis){
|
||||
console.log(data); // 当前所点击的菜单项对应的数据
|
||||
console.log(othis); // 当前所点击的菜单项元素对象
|
||||
console.log(this.elem); // 当前组件绑定的目标元素对象，批量绑定中常用
|
||||
|
||||
// 若返回 false，则点击选项可不关闭面板 --- 2.8+
|
||||
/*
|
||||
return false;
|
||||
*/
|
||||
```
|
||||
|
||||
用法详见：[#示例](#examples)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{}">
|
||||
左对齐
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'center'}">
|
||||
居中对齐
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'right'}">
|
||||
右对齐
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// 水平对齐方式
|
||||
dropdown.render({
|
||||
elem: '.demo-dropdown-align',
|
||||
// align: 'center' // align 已配置在元素 `lay-options` 属性上
|
||||
data: [{
|
||||
title: 'menu item test 111',
|
||||
id: 100
|
||||
},{
|
||||
title: 'menu item test 222',
|
||||
id: 101
|
||||
},{
|
||||
title: 'menu item test 333',
|
||||
id: 102
|
||||
}]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<div class="layui-btn-container">
|
||||
<button class="layui-btn demo-dropdown-base">
|
||||
<span>下拉菜单</span>
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary demo-dropdown-base">
|
||||
<span>下拉菜单</span>
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline" style="width: 235px;">
|
||||
<input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="ID-dropdown-demo-base-input">
|
||||
</div>
|
||||
<div class="layui-inline layui-word-aux layui-font-gray">
|
||||
可以绑定任意元素，
|
||||
<a href="javascript:;" class="layui-font-blue" id="ID-dropdown-demo-base-text">
|
||||
比如这段文字
|
||||
<i class="layui-icon layui-font-12 layui-icon-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// 渲染
|
||||
dropdown.render({
|
||||
elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
|
||||
data: [{
|
||||
title: 'menu item 1',
|
||||
id: 100
|
||||
},{
|
||||
title: 'menu item 2',
|
||||
id: 101
|
||||
},{
|
||||
title: 'menu item 3',
|
||||
id: 102
|
||||
}],
|
||||
click: function(obj){
|
||||
this.elem.find('span').text(obj.title);
|
||||
}
|
||||
});
|
||||
|
||||
// 绑定输入框
|
||||
dropdown.render({
|
||||
elem: '#ID-dropdown-demo-base-input',
|
||||
data: [{
|
||||
title: 'menu item 1',
|
||||
id: 101
|
||||
},{
|
||||
title: 'menu item 2',
|
||||
id: 102
|
||||
},{
|
||||
title: 'menu item 3',
|
||||
id: 103
|
||||
},{
|
||||
title: 'menu item 4',
|
||||
id: 104
|
||||
},{
|
||||
title: 'menu item 5',
|
||||
id: 105
|
||||
},{
|
||||
title: 'menu item 6',
|
||||
id: 106
|
||||
}],
|
||||
click: function(obj){
|
||||
this.elem.val(obj.title);
|
||||
},
|
||||
style: 'min-width: 235px;'
|
||||
});
|
||||
|
||||
// 绑定文字
|
||||
dropdown.render({
|
||||
elem: '#ID-dropdown-demo-base-text',
|
||||
data: [{
|
||||
title: 'menu item 1',
|
||||
id: 100
|
||||
},{
|
||||
title: 'menu item 2',
|
||||
id: 101,
|
||||
child: [{ // 横向子菜单
|
||||
title: 'menu item 2-1',
|
||||
id: 1011
|
||||
},{
|
||||
title: 'menu item 2-2',
|
||||
id: 1012
|
||||
}]
|
||||
},{
|
||||
title: 'menu item 3',
|
||||
id: 102
|
||||
},{
|
||||
type: '-' // 分割线
|
||||
},{
|
||||
title: 'menu group',
|
||||
id: 103,
|
||||
type: 'group', // 纵向菜单组
|
||||
child: [{
|
||||
title: 'menu item 4-1',
|
||||
id: 1031
|
||||
},{
|
||||
title: 'menu item 4-2',
|
||||
id: 1032
|
||||
}]
|
||||
},{
|
||||
type: '-' // 分割线
|
||||
},{
|
||||
title: 'menu item 5',
|
||||
id: 104
|
||||
},{
|
||||
title: 'menu item 5',
|
||||
id: 104
|
||||
}],
|
||||
click: function(obj){
|
||||
this.elem.val(obj.title);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<button class="layui-btn" id="ID-dropdown-demo-complex">
|
||||
无限层级 + 跳转 + 事件 + 自定义模板
|
||||
</button>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
var util = layui.util;
|
||||
|
||||
// 高级演示 - 复杂结构
|
||||
dropdown.render({
|
||||
elem: '#ID-dropdown-demo-complex',
|
||||
data: [{
|
||||
title: 'menu item 1',
|
||||
templet: '{{!<i class="layui-icon layui-icon-picture"></i> {{= d.title }} <span class="layui-badge-dot"></span>!}}',
|
||||
id: 100,
|
||||
href: '#'
|
||||
},{
|
||||
title: 'menu item 2',
|
||||
templet: '{{!<img src="https://unpkg.com/outeres@0.0.11/demo/avatar/0.png" style="width: 16px;"> {{= d.title }} !}}',
|
||||
id: 101,
|
||||
href: '/',
|
||||
target: '_blank'
|
||||
},
|
||||
{type: '-'}, // 分割线
|
||||
{
|
||||
title: 'menu item 3',
|
||||
id: 102,
|
||||
type: 'group',
|
||||
child: [{
|
||||
title: 'menu item 3-1',
|
||||
id: 103
|
||||
},{
|
||||
title: 'menu item 3-2',
|
||||
id: 104,
|
||||
child: [{
|
||||
title: 'menu item 3-2-1',
|
||||
id: 105
|
||||
},{
|
||||
title: 'menu item 3-2-2',
|
||||
id: 11,
|
||||
type: 'group',
|
||||
child: [{
|
||||
title: 'menu item 3-2-2-1',
|
||||
id: 111
|
||||
},{
|
||||
title: 'menu item 3-2-2-2',
|
||||
id: 1111
|
||||
}]
|
||||
},{
|
||||
title: 'menu item 3-2-3',
|
||||
id: 11111
|
||||
}]
|
||||
},{
|
||||
title: 'menu item 3-3',
|
||||
id: 111111,
|
||||
type: 'group',
|
||||
child: [{
|
||||
title: 'menu item 3-3-1',
|
||||
id: 22
|
||||
},{
|
||||
title: 'menu item 3-3-2',
|
||||
id: 222,
|
||||
child: [{
|
||||
title: 'menu item 3-3-2-1',
|
||||
id: 2222
|
||||
},{
|
||||
title: 'menu item 3-3-2-2',
|
||||
id: 22222
|
||||
},{
|
||||
title: 'menu item 3-3-2-3',
|
||||
id: 2222222
|
||||
}]
|
||||
},{
|
||||
title: 'menu item 3-3-3',
|
||||
id: 333
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{type: '-'},
|
||||
{
|
||||
title: 'menu item 4',
|
||||
id: 4
|
||||
},{
|
||||
title: 'menu item 5',
|
||||
id: 5,
|
||||
child: [{
|
||||
title: 'menu item 5-1',
|
||||
id: 55,
|
||||
child: [{
|
||||
title: 'menu item 5-1-1',
|
||||
id: 5555
|
||||
},{
|
||||
title: 'menu item 5-1-2',
|
||||
id: 55555
|
||||
},{
|
||||
title: 'menu item 5-1-3',
|
||||
id: 555555
|
||||
}]
|
||||
},{
|
||||
title: 'menu item 5-2',
|
||||
id: 52
|
||||
},{
|
||||
title: 'menu item 5-3',
|
||||
id: 53
|
||||
}]
|
||||
},{type:'-'},{
|
||||
title: 'menu item 6',
|
||||
id: 66,
|
||||
type: 'group',
|
||||
isSpreadItem: false,
|
||||
child: [{
|
||||
title: 'menu item 6-1',
|
||||
id: 777
|
||||
},{
|
||||
title: 'menu item 6-2',
|
||||
id: 7777
|
||||
},{
|
||||
title: 'menu item 6-3',
|
||||
id: 77777
|
||||
}]
|
||||
}],
|
||||
click: function(item){
|
||||
layer.msg(util.escape(JSON.stringify(item)));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<button class="layui-btn" id="ID-dropdown-demo-content">
|
||||
自定义内容
|
||||
<i class="layui-icon layui-icon-list layui-font-14"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.demo-dropdown-tabs{padding: 0 16px;}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// 自定义内容
|
||||
dropdown.render({
|
||||
elem: '#ID-dropdown-demo-content',
|
||||
content: ['<div class="layui-tab layui-tab-brief">',
|
||||
'<ul class="layui-tab-title">',
|
||||
'<li class="layui-this">Tab header 1</li>',
|
||||
'<li>Tab header 2</li>',
|
||||
'<li>Tab header 3</li>',
|
||||
'</ul>',
|
||||
'<div class="layui-tab-content">',
|
||||
'<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>',
|
||||
'<div class="layui-tab-item">Tab body 2</div>',
|
||||
'<div class="layui-tab-item">Tab body 3</div>',
|
||||
'</div>',
|
||||
'</div>'].join(''),
|
||||
className: 'demo-dropdown-tabs',
|
||||
style: 'width: 370px; height: 200px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
|
||||
// shade: 0.3, // 弹出时开启遮罩 --- 2.8+
|
||||
ready: function(){
|
||||
layui.use('element', function(element){
|
||||
element.render('tab');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<div class="layui-bg-gray" style="height: 260px; text-align: center;" id="ID-dropdown-demo-contextmenu">
|
||||
<span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
|
||||
</div>
|
||||
|
||||
<button class="layui-btn" style="margin-top: 15px;" lay-on="contextmenu">
|
||||
开启全局右键菜单
|
||||
</button>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
var util = layui.util;
|
||||
|
||||
// 右键菜单
|
||||
dropdown.render({
|
||||
elem: '#ID-dropdown-demo-contextmenu', // 也可绑定到 document，从而重置整个右键
|
||||
trigger: 'contextmenu', // contextmenu
|
||||
isAllowSpread: false, // 禁止菜单组展开收缩
|
||||
style: 'width: 200px', // 定义宽度，默认自适应
|
||||
data: [{
|
||||
title: 'menu item 1',
|
||||
id: 'test'
|
||||
}, {
|
||||
title: 'Printing',
|
||||
id: 'print'
|
||||
},{
|
||||
title: 'Reload',
|
||||
id: 'reload'
|
||||
},{type:'-'},{
|
||||
title: 'menu item 3',
|
||||
id: '#3',
|
||||
child: [{
|
||||
title: 'menu item 3-1',
|
||||
id: '#1'
|
||||
},{
|
||||
title: 'menu item 3-2',
|
||||
id: '#2'
|
||||
},{
|
||||
title: 'menu item 3-3',
|
||||
id: '#3'
|
||||
}]
|
||||
},
|
||||
{type: '-'},
|
||||
{
|
||||
title: 'menu item 4',
|
||||
id: ''
|
||||
},{
|
||||
title: 'menu item 5',
|
||||
id: '#1'
|
||||
},{
|
||||
title: 'menu item 6',
|
||||
id: '#1'
|
||||
}],
|
||||
click: function(obj, othis){
|
||||
if(obj.id === 'test'){
|
||||
layer.msg('click');
|
||||
} else if(obj.id === 'print'){
|
||||
window.print();
|
||||
} else if(obj.id === 'reload'){
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 其他操作
|
||||
util.event('lay-on', {
|
||||
// 全局右键菜单
|
||||
contextmenu: function(othis){
|
||||
var ID = 'ID-dropdown-demo-contextmenu';
|
||||
if(!othis.data('open')){
|
||||
dropdown.reload(ID, {
|
||||
elem: document // 将事件直接绑定到 document
|
||||
});
|
||||
layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
|
||||
othis.html('取消全局右键菜单');
|
||||
othis.data('open', true);
|
||||
} else {
|
||||
dropdown.reload(ID, {
|
||||
elem: '#'+ ID // 重新绑定到指定元素上
|
||||
});
|
||||
layer.msg('已取消全局右键菜单，恢复默认右键菜单')
|
||||
othis.html('开启全局右键菜单');
|
||||
othis.data('open', false);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'hover'}">
|
||||
hover
|
||||
<i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'mousedown'}">
|
||||
mousedown
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'dblclick'}">
|
||||
dblclick - 双击
|
||||
<i class="layui-icon layui-icon-circle layui-font-12"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// 自定义事件
|
||||
dropdown.render({
|
||||
elem: '.demo-dropdown-on',
|
||||
// trigger: 'click' // trigger 已配置在元素 `lay-options` 属性上
|
||||
data: [{
|
||||
title: 'menu item 1',
|
||||
id: 100
|
||||
},{
|
||||
title: 'menu item 2',
|
||||
id: 101
|
||||
},{
|
||||
title: 'menu item 3',
|
||||
id: 102
|
||||
}]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<button class="layui-btn" id="ID-dropdown-demo-reload">
|
||||
<span>下拉菜单</span>
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// 渲染
|
||||
dropdown.render({
|
||||
elem: '#ID-dropdown-demo-reload',
|
||||
data: [{
|
||||
title: 'menu item 1',
|
||||
id: 100
|
||||
}, {
|
||||
title: '重载该面板',
|
||||
id: 101
|
||||
}],
|
||||
click: function(data){
|
||||
if(data.id === 101){ // 菜单项对应设置的 id 值
|
||||
// 重载方法
|
||||
dropdown.reload('ID-dropdown-demo-reload', {
|
||||
data: [{ // 重新赋值 data
|
||||
title: '新选项 1',
|
||||
id: 111
|
||||
}, {
|
||||
title: '新选项 2',
|
||||
id: 222
|
||||
}],
|
||||
show: true // 重载即显示组件面板
|
||||
});
|
||||
|
||||
return false; // 点击该选项，阻止面板关闭
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">输入时重载</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" placeholder="输入关键字" class="layui-input" id="ID-dropdown-demo-reloadData">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
var $ = layui.$;
|
||||
|
||||
// 渲染
|
||||
var inst = dropdown.render({
|
||||
elem: '#ID-dropdown-demo-reloadData',
|
||||
data: [
|
||||
{ id: 1, title: "Python" },
|
||||
{ id: 2, title: "JavaScript" },
|
||||
{ id: 3, title: "Java" },
|
||||
{ id: 4, title: "C++" },
|
||||
{ id: 5, title: "PHP" },
|
||||
{ id: 6, title: "Ruby" },
|
||||
{ id: 7, title: "Swift" },
|
||||
{ id: 8, title: "TypeScript" },
|
||||
{ id: 9, title: "Kotlin" },
|
||||
{ id: 10, title: "Go" }
|
||||
],
|
||||
style: 'min-width: 190px; box-shadow: 1px 1px 11px rgb(0 0 0 / 11%);',
|
||||
click: function(data){
|
||||
this.elem.val(data.title);
|
||||
}
|
||||
});
|
||||
|
||||
// 输入框输入事件
|
||||
$(inst.config.elem).on('input propertychange', function(){
|
||||
var elem = $(this);
|
||||
var value = elem.val().trim();
|
||||
|
||||
// 匹配到对应内容时，重载数据
|
||||
var dataNew = inst.config.data.filter(function(item){
|
||||
var exp = new RegExp(value.split('').join('|'), 'i');
|
||||
return exp.test(item.title);
|
||||
});
|
||||
dropdown.reloadData(inst.config.id, {
|
||||
data: dataNew, // 匹配到的新数据
|
||||
templet: function(d){
|
||||
var exp = new RegExp(value.split('').join('|'), 'gi');
|
||||
return d.title.replace(exp, function (str) {
|
||||
return '<span style="color: red;">' + str + '</span>'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<table class="layui-hide" id="ID-dropdown-demo-table"></table>
|
||||
|
||||
<script type="text/html" id="ID-dropdown-demo-table-tool">
|
||||
<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
|
||||
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var table = layui.table;
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// dropdown 在表格中的应用
|
||||
table.render({
|
||||
elem: '#ID-dropdown-demo-table',
|
||||
url: '{{d.root}}/static/json/table/demo5.json',
|
||||
title: '用户数据表',
|
||||
cols: [[
|
||||
{type: 'checkbox', fixed: 'left'},
|
||||
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
|
||||
{field:'username', title:'用户名', width:120, edit: 'text'},
|
||||
{field:'email', title:'邮箱', minWidth:150},
|
||||
{fixed: 'right', title:'操作', toolbar: '#ID-dropdown-demo-table-tool', width:150}
|
||||
]],
|
||||
limits: [3],
|
||||
page: true
|
||||
});
|
||||
|
||||
// 行工具事件
|
||||
table.on('tool(ID-dropdown-demo-table)', function(obj){
|
||||
var that = this;
|
||||
var data = obj.data;
|
||||
|
||||
if(obj.event === 'edit'){
|
||||
layer.prompt({
|
||||
formType: 2,
|
||||
value: data.email
|
||||
}, function(value, index){
|
||||
obj.update({
|
||||
email: value
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
} else if(obj.event === 'more'){
|
||||
// 更多下拉菜单
|
||||
dropdown.render({
|
||||
elem: that,
|
||||
show: true, // 外部事件触发即显示
|
||||
data: [{
|
||||
title: 'item 1',
|
||||
id: 'aaa'
|
||||
}, {
|
||||
title: 'item 2',
|
||||
id: 'bbb'
|
||||
}, {
|
||||
title: '删除',
|
||||
id: 'del'
|
||||
}],
|
||||
click: function(data, othis){
|
||||
//根据 id 做出不同操作
|
||||
if(data.id === 'del'){
|
||||
layer.confirm('真的删除行么', function(index){
|
||||
obj.del();
|
||||
layer.close(index);
|
||||
});
|
||||
} else {
|
||||
layer.msg('得到表格下拉菜单 id：'+ data.id);
|
||||
}
|
||||
},
|
||||
align: 'right', // 右对齐弹出
|
||||
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
---
|
||||
title: 下拉菜单 dropdown
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 下拉菜单 <sup title="指在该版本新增的组件">2.6+</sup>
|
||||
|
||||
> 下拉菜单 `dropdown` 是基于基础菜单结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的*下拉菜单*，更可用于*右键菜单*来实现更多的交互可能。
|
||||
|
||||
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/dropdown/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
在 `content` 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更丰富的弹出内容。
|
||||
|
||||
<h2 id="api" lay-toc="{hot: true}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var dropdown = layui.dropdown | 获得 `dropdown` 模块。 |
|
||||
| [dropdown.render(options)](#render) | dropdown 组件渲染，核心方法。 |
|
||||
| [dropdown.reload(id, options)](#reload) | 完整重载 |
|
||||
| [dropdown.reloadData(id, options)](#reload) <sup>2.8+</sup> | 仅重载数据或内容 |
|
||||
| [dropdown.close(id)](#close) | 关闭对应的组件面板 |
|
||||
|
||||
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
|
||||
|
||||
`dropdown.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
<br>注 <sup>2.8+</sup> : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。
|
||||
|
||||
```
|
||||
<button class="layui-btn" id="ID-test-dropdown">下拉菜单</button>
|
||||
<button class="layui-btn class-test-dropdown" lay-options="{
|
||||
data: [{title: 'item 1', id: 1}, {title: 'item 2', id: 2}]
|
||||
}">下拉菜单</button>
|
||||
<button class="layui-btn class-test-dropdown" lay-options="{
|
||||
data: [{title: 'item A', id: 'a'}, {title: 'item B', id: 'b'}]
|
||||
}">下拉菜单</button>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
// 单个渲染
|
||||
dropdown.render({
|
||||
elem: '#ID-test-dropdown',
|
||||
// …
|
||||
});
|
||||
// 批量渲染
|
||||
dropdown.render({
|
||||
elem: '.class-test-dropdown',
|
||||
// …
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/dropdown/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/dropdown/detail/options.data.md") }}
|
||||
</div>
|
||||
|
||||
|
||||
<h3 id="reload" lay-toc="{level: 2, hot: true}">重载</h3>
|
||||
|
||||
即对一段已经渲染好的下拉菜单重新设置相关属性并渲染，可分为以下几种重载方式：
|
||||
|
||||
| 重载方式 | API |
|
||||
| --- | --- |
|
||||
| [完整重载](#dropdown.reload) | [dropdown.reload(id, options, deep)](#dropdown.reload) |
|
||||
| [仅数据或内容重载](#dropdown.reloadData) <sup>2.8+</sup> | [dropdown.reloadData(id, options, deep)](#dropdown.reloadData) |
|
||||
|
||||
|
||||
两者重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。
|
||||
|
||||
<h4 id="dropdown.reload" lay-pid="reload" class="ws-anchor ws-bold">完整重载</h4>
|
||||
|
||||
`dropdown.reload(id, options);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
该方法用于对下拉菜单进行完整重载，所有属性均可参与到重载中。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/reload.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h4 id="dropdown.reloadData" lay-pid="reload" class="ws-anchor ws-bold">仅数据或内容重载 <sup>2.8+</sup></h4>
|
||||
|
||||
`dropdown.reloadData(id, options);`
|
||||
|
||||
- 参数同 `dropdown.reload(id, options)` 参数
|
||||
|
||||
使用该方法时，与数据无关的属性不会参与到重载中。因此若只是更新数据或内容，该方法可大幅提升体验。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/dropdown/examples/reloadData.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="close" lay-pid="api" class="ws-anchor ws-bold">关闭面板 <sup>2.8+</sup></h3>
|
||||
|
||||
`dropdown.close(id);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||
|
||||
该方法用于关闭对应的 `dropdown` 组件面板。
|
||||
|
||||
```
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// 渲染
|
||||
dropdown.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 关闭对应的组件面板
|
||||
dropdown.close('test');
|
||||
```
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 704 B |
|
|
@ -0,0 +1,69 @@
|
|||
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 315px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>自定义固定条示例 - Layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="{{= d.layui.cdn.css }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="target-test" style="position: relative; padding: 16px;">
|
||||
页<br>面<br>内<br>容<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。<br>。
|
||||
</div>
|
||||
|
||||
<script src="{{= d.layui.cdn.js }}"></script>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var util = layui.util;
|
||||
|
||||
// 自定义固定条
|
||||
util.fixbar({
|
||||
bars: [{ // 定义可显示的 bar 列表信息 -- v2.8.0 新增
|
||||
type: 'share',
|
||||
icon: 'layui-icon-share'
|
||||
}, {
|
||||
type: 'help',
|
||||
icon: 'layui-icon-help'
|
||||
}, {
|
||||
type: 'cart',
|
||||
icon: 'layui-icon-cart',
|
||||
style: 'background-color: #FF5722;'
|
||||
}, {
|
||||
type: 'groups',
|
||||
content: '群',
|
||||
style: 'font-size: 21px;'
|
||||
}],
|
||||
// bar1: true,
|
||||
// bar2: true,
|
||||
// default: false, // 是否显示默认的 bar 列表 -- v2.8.0 新增
|
||||
// bgcolor: '#393D52', // bar 的默认背景色
|
||||
// css: {right: 100, bottom: 100},
|
||||
// target: '#target-test', // 插入 fixbar 节点的目标元素选择器
|
||||
// duration: 300, // top bar 等动画时长（毫秒）
|
||||
on: { // 任意事件 -- v2.8.0 新增
|
||||
mouseenter: function(type){
|
||||
layer.tips(type, this, {
|
||||
tips: 4,
|
||||
fixed: true
|
||||
});
|
||||
},
|
||||
mouseleave: function(type){
|
||||
layer.closeAll('tips');
|
||||
}
|
||||
},
|
||||
// 点击事件
|
||||
click: function(type){
|
||||
console.log(this, type);
|
||||
// layer.msg(type);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<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>bars <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置固定工具条列表。可支持定义以下子属性：
|
||||
|
||||
```
|
||||
bars: [
|
||||
{
|
||||
type: '', // bar 类型名，用于事件区分
|
||||
icon: '', // bar 图标的 className
|
||||
content: '', // bar 任意内容
|
||||
style: '' // bar 任意样式
|
||||
},
|
||||
// …
|
||||
]
|
||||
```
|
||||
|
||||
该属性比较灵活，具体用法可参考：[#示例](#examples)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>
|
||||
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-layer="{
|
||||
title: 'bars 属性默认值',
|
||||
content: '<div>bars: {type: \'top\', icon: \'layui-icon-top\'}</div>'
|
||||
}">查看默认值</button>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>default <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否显示默认的固定条 ，如 `top` （点击可让滚动条置顶）等
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bgcolor</td>
|
||||
<td>
|
||||
|
||||
固定条的默认背景色
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>css</td>
|
||||
<td>
|
||||
|
||||
工具条外层容器的任意 css 属性。如设置工具条的坐标：
|
||||
|
||||
```
|
||||
css: {right: 32, bottom: 32}
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>target <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
插入固定条的目标元素选择器
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>
|
||||
|
||||
`body`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scroll <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
固定条最外层容器滚动条所在的元素，若不设置则默认取 `target` 属性值
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>
|
||||
|
||||
`body`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>margin <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
用于设置默认 `TOP` 条出现滚动条的高度临界值
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`200`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>duration <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
用于默认 `TOP` 条等动画时长
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`200`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>on <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
用于定义固定条列表的任意事件，触发事件时的回调将返回 `bars` 属性的 `type` 值。
|
||||
|
||||
```
|
||||
on: {
|
||||
// 点击事件
|
||||
click: function(type){
|
||||
// bars 对属性应的 type 值
|
||||
console.log(type);
|
||||
},
|
||||
// …
|
||||
}
|
||||
```
|
||||
|
||||
该属性一般与 `bars` 属性搭配使用，具体用法可参考：[#示例](#examples)
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
### 贴士
|
||||
|
||||
> 灵活运用 `bars` 属性的 `content,style` 子属性，可实现更多丰富多样的固定条。
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
title: 固定条组件 fixbar
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 固定条组件
|
||||
|
||||
> 固定条组件 `fixbar` 是指当滚动条滑动时，始终固定在页面一侧的工具条元素，除了内置的 `TOP` 条功能外，还可以灵活地扩展任意自定义的工具条。在 `2.x` 版本中，`fixbar` 属于 `util` 模块的子集。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/fixbar/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var util = layui.util | 获得 `util` 模块。 |
|
||||
| [util.fixbar(options)](#fixbar) | fixbar 组件渲染，核心方法。 |
|
||||
|
||||
<h2 id="fixbar" lay-toc="{level: 2}">渲染</h2>
|
||||
|
||||
`util.fixbar(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/fixbar/detail/options.md") }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<h3 lay-toc="{id: 'examples', level: 2}" class="layui-hide">滚动加载</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '滚动加载'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="flow-demo" id="ID-flow-demo"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var flow = layui.flow;
|
||||
|
||||
// 流加载实例
|
||||
flow.load({
|
||||
elem: '#ID-flow-demo', // 流加载容器
|
||||
scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
|
||||
done: function(page, next){ // 执行下一页的回调
|
||||
// 模拟数据插入
|
||||
setTimeout(function(){
|
||||
var lis = [];
|
||||
for(var i = 0; i < 8; i++){
|
||||
lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
|
||||
}
|
||||
|
||||
// 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||
// pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||
next(lis.join(''), page < 10); // 此处假设总页数为 10
|
||||
}, 520);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-manual-load" lay-toc="{level: 2}">手动加载</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="flow-demo" id="ID-flow-demo-manual"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var flow = layui.flow;
|
||||
// 流加载实例
|
||||
flow.load({
|
||||
elem: '#ID-flow-demo-manual', // 流加载容器
|
||||
scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
|
||||
isAuto: false,
|
||||
isLazyimg: true,
|
||||
done: function(page, next){ // 加载下一页
|
||||
// 模拟插入
|
||||
setTimeout(function(){
|
||||
var lis = [];
|
||||
for(var i = 0; i < 6; i++){
|
||||
lis.push('<li><img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
|
||||
}
|
||||
next(lis.join(''), page < 6); // 假设总页数为 6
|
||||
}, 520);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<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</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scrollElem</td>
|
||||
<td>
|
||||
|
||||
指定触发流加载的滚动条所在元素选择器。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`document`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isAuto</td>
|
||||
<td>
|
||||
|
||||
是否自动加载。 若设为 `false`，则会在列表底部生成一个「加载更多」的按钮，那么可点击该按钮加载下一页数据。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>end</td>
|
||||
<td>
|
||||
|
||||
设置加载完毕后的最尾部的内容，可传入任意 HTML 字符。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
<code style="font-size: 13px;">没有更多了</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isLazyimg</td>
|
||||
<td>
|
||||
|
||||
是否开启信息流中的图片懒加载。若设为 `true` ，则只会对在可视区域的图片进行按需加载。但同时，在拼接列表字符的时候，您不能给列表中的 `<img>` 标签赋值 `src`，必须要用 `lay-src` 属性取代，如：
|
||||
|
||||
```
|
||||
layui.each(data, function(index, item){
|
||||
lis.push('<li><img lay-src="'+ item.src +'"></li>');
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mb</td>
|
||||
<td>
|
||||
|
||||
与底部的临界距离。 即当滚动条与底部产生该距离时，触发加载。 必须 `isAuto:true` 时有效。
|
||||
|
||||
*小贴士*： 此处 `mb` 属性名是 css 中 `margin-bottom` 的简写，可并非国粹之语 😅
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`50`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>done</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.done" class="ws-anchor">
|
||||
滚动条到达临界点触发加载的回调函数。函数返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
done: function(page, next){
|
||||
console.log(page) // 获得当前页
|
||||
|
||||
// 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||
// 只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||
next('列表 HTML 片段', page < res.pages);
|
||||
}
|
||||
```
|
||||
|
||||
详细用法可参考：[#示例](#examples)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
title: 流加载 flow
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 流加载
|
||||
|
||||
> 流加载 `flow` 是用于在*信息流*和*图片列表*场景中的滚动按需加载，对前后端的体验和性能优化具有一定帮助。
|
||||
|
||||
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<style>
|
||||
.flow-demo{height: 400px; overflow: auto; font-size: 0;}
|
||||
.flow-demo li{display: inline-block; margin: 0 5px; font-size: 14px; width: 48%; margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee;}
|
||||
.flow-demo img{width: 100%; height: 100%;}
|
||||
.flow-demo-lazyimg{height: 300px; overflow: auto; text-align: center;}
|
||||
.flow-demo-lazyimg img{width: 40%; height: 200px; margin: 0 3px 5px 0; border: none;}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/flow/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var flow = layui.flow | 获得 `flow` 模块。 |
|
||||
| [flow.load(options)](#load) | 信息流加载，核心方法。 |
|
||||
| [flow.lazyimg(options)](#lazyimg) | 图片懒加载。 |
|
||||
|
||||
<h2 id="load" lay-toc="{level: 2}">信息流</h2>
|
||||
|
||||
`flow.load(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
信息流是分页的另一种表现形式，新加载的内容不替换原有的内容，而是随着滚动条滚动而追加显示。[#详见示例](#examples)
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/flow/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="lazyimg" lay-toc="{level: 2}">图片懒加载</h2>
|
||||
|
||||
`flow.lazyimg(options);`
|
||||
|
||||
- 参数 `options` : 属性配置项。可选项见下表。
|
||||
|
||||
| 属性名 | 描述 |
|
||||
| --- | --- |
|
||||
| elem | 绑定容器中需进行懒加载的图片元素选择器 |
|
||||
| scrollElem | 滚动条所在元素选择器，默认 `document` 。 |
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="flow-demo-lazyimg" id="ID-flow-demo-lazyimg">
|
||||
<!-- <img src="占位图地址" lay-src="图片实际地址"> -->
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
</div>
|
||||
<script>
|
||||
layui.use('flow', function(){
|
||||
var flow = layui.flow;
|
||||
// 图片懒加载
|
||||
flow.lazyimg({
|
||||
elem: '#ID-flow-demo-lazyimg img',
|
||||
scrollElem: '#ID-flow-demo-lazyimg' // 一般不用设置，此处只是演示需要。
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
无论滚动条上滑还是下滑，都会始终加载当前屏的图片。
|
||||
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
---
|
||||
title: 复选框
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 复选框
|
||||
|
||||
> 复选框组件是对 `<input type="checkbox">` 元素的美化替代，在原有的特性基础上，对 UI 进行了加强。
|
||||
|
||||
|
||||
<h2 id="default" lay-toc="{}">默认风格</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<input type="checkbox" name="AAA" title="默认">
|
||||
<input type="checkbox" name="BBB" lay-text="选中" checked>
|
||||
<input type="checkbox" name="CCC" title="禁用" disabled>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 属性 `title` 可设置复选框标题
|
||||
- 属性 `checked` 可设置默认选中
|
||||
- 属性 `disabled` 可设置禁用状态
|
||||
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）
|
||||
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，默认风格可不填
|
||||
|
||||
特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。
|
||||
|
||||
注 <sup>2.8+</sup>： `lay-skin` 属性在之前版本默认为标签风格，新版本调整为默认原始风格（`lay-skin="primary"`）。
|
||||
|
||||
<h2 id="tag" lay-toc="{}">标签风格</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<input type="checkbox" name="AAA" title="默认" lay-skin="tag">
|
||||
<input type="checkbox" name="BBB" title="选中" lay-skin="tag" checked>
|
||||
<input type="checkbox" name="CCC" title="禁用" lay-skin="tag" disabled>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="switch" lay-toc="{}">开关风格</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<input type="checkbox" name="AAA" lay-skin="switch">
|
||||
<input type="checkbox" name="BBB" title="ON|OFF" lay-skin="switch" checked>
|
||||
<input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">
|
||||
<input type="checkbox" name="DDD" lay-skin="switch" disabled>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
|
||||
|
||||
|
||||
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
|
||||
|
||||
`form.on('checkbox(filter)', callback);`
|
||||
|
||||
- `checkbox` 为复选框事件固定名称
|
||||
- `filter` 为复选框元素对应的 `lay-filter` 属性值
|
||||
|
||||
该事件在复选框选中或取消选中时触发。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<input type="checkbox" name="agreement" value="1" title="是否同意" lay-filter="demo-checkbox-filter">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" lay-submit lay-filter="demo-checkbox-submit">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// checkbox 事件
|
||||
form.on('checkbox(demo-checkbox-filter)', function(data){
|
||||
var elem = data.elem; // 获得 checkbox 原始 DOM 对象
|
||||
var checked = elem.checked; // 获得 checkbox 选中状态
|
||||
var value = elem.value; // 获得 checkbox 值
|
||||
var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象
|
||||
|
||||
layer.msg('checked 状态: '+ elem.checked);
|
||||
});
|
||||
|
||||
// 通过表单提交事件，演示 checkbox 不同状态下的字段结果
|
||||
form.on('submit(demo-checkbox-submit)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证必填项</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证手机号</label>
|
||||
<div class="layui-input-inline layui-input-wrap">
|
||||
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
|
||||
</div>
|
||||
<div class="layui-form-mid" style="padding: 0!important;">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证码</label>
|
||||
<div class="layui-input-inline layui-input-wrap">
|
||||
<input type="text" name="vercode" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证邮箱</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证日期</label>
|
||||
<div class="layui-input-inline layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-date"></i>
|
||||
</div>
|
||||
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">自定义验证</label>
|
||||
<div class="layui-input-inline layui-input-wrap">
|
||||
<input type="password" name="password" lay-verify="pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1" selected>阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">分组选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<optgroup label="城市记忆">
|
||||
<option value="你工作的第一个城市">你工作的第一个城市</option>
|
||||
</optgroup>
|
||||
<optgroup label="学生时代">
|
||||
<option value="你的工号">你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">搜索选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="modules" lay-verify="required" lay-search>
|
||||
<option value="">直接选择或搜索选择</option>
|
||||
<option value="1">layer</option>
|
||||
<option value="2">form</option>
|
||||
<option value="3">layim</option>
|
||||
<option value="4">element</option>
|
||||
<option value="5">laytpl</option>
|
||||
<option value="6">upload</option>
|
||||
<option value="7">laydate</option>
|
||||
<option value="8">laypage</option>
|
||||
<option value="9">flow</option>
|
||||
<option value="10">util</option>
|
||||
<option value="11">code</option>
|
||||
<option value="12">tree</option>
|
||||
<option value="13">layedit</option>
|
||||
<option value="14">nav</option>
|
||||
<option value="15">tab</option>
|
||||
<option value="16">table</option>
|
||||
<option value="17">select</option>
|
||||
<option value="18">checkbox</option>
|
||||
<option value="19">switch</option>
|
||||
<option value="20">radio</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">联动选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz1">
|
||||
<option value="">请选择省</option>
|
||||
<option value="浙江" selected>浙江省</option>
|
||||
<option value="你的工号">江西省</option>
|
||||
<option value="你最喜欢的老师">福建省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz2">
|
||||
<option value="">请选择市</option>
|
||||
<option value="杭州">杭州</option>
|
||||
<option value="宁波" disabled>宁波</option>
|
||||
<option value="温州">温州</option>
|
||||
<option value="温州">台州</option>
|
||||
<option value="温州">绍兴</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz3">
|
||||
<option value="">请选择县/区</option>
|
||||
<option value="西湖区">西湖区</option>
|
||||
<option value="余杭区">余杭区</option>
|
||||
<option value="拱墅区">临安市</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-form-mid layui-text-em">
|
||||
<i class="layui-icon layui-icon-tips" lay-tips="{
|
||||
content: '此处只是演示联动排版，并未做联动交互',
|
||||
margin: '0 0 0 -10px'
|
||||
}"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="arr[0]" title="选项1">
|
||||
<input type="checkbox" name="arr[1]" title="选项2" checked>
|
||||
<input type="checkbox" name="arr[2]" title="选项3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">标签框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="arr1[0]" lay-skin="tag" title="选项1" checked>
|
||||
<input type="checkbox" name="arr1[1]" lay-skin="tag" title="选项2">
|
||||
<input type="checkbox" name="arr1[2]" lay-skin="tag" title="选项3" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked>
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
<input type="radio" name="sex" value="禁" title="禁用" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">普通文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(['form', 'laydate', 'util'], function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var laydate = layui.laydate;
|
||||
var util = layui.util;
|
||||
|
||||
// 自定义验证规则
|
||||
form.verify({
|
||||
pass: [
|
||||
/^[\S]{6,12}$/,
|
||||
'密码必须6到12位，且不能出现空格'
|
||||
]
|
||||
});
|
||||
|
||||
// 指定开关事件
|
||||
form.on('switch(switchTest)', function(data){
|
||||
layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), {
|
||||
offset: '6px'
|
||||
});
|
||||
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo1)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
|
||||
// 日期
|
||||
laydate.render({
|
||||
elem: '#date'
|
||||
});
|
||||
|
||||
// 普通事件
|
||||
util.on('lay-on', {
|
||||
// 获取验证码
|
||||
"get-vercode": function(othis){
|
||||
var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
|
||||
// 验证通过
|
||||
if(isvalid){
|
||||
layer.msg('手机号规则验证通过');
|
||||
|
||||
// 此处可继续书写「发送验证码」等后续逻辑
|
||||
// …
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<form class="layui-form layui-row layui-col-space16">
|
||||
<div class="layui-col-sm3">
|
||||
<input type="text" name="A" placeholder="Field A" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<input type="text" name="C" placeholder="Field C" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<input type="text" name="D" placeholder="Field D" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-form-item" style="margin-bottom: 0;">
|
||||
<label class="layui-form-label">Field E :</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="E" placeholder="请输入" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-form-item" style="margin-bottom: 0;">
|
||||
<label class="layui-form-label">Field F :</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="quiz1">
|
||||
<option value="">省份</option>
|
||||
<option value="浙江">浙江省</option>
|
||||
<option value="江西">江西省</option>
|
||||
<option value="福建">福建省</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="G" value="" required placeholder="Field G" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="H" required placeholder="Field H" id="demo-search-more" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-date"></i>
|
||||
</div>
|
||||
<input type="text" name="I" required placeholder="Field I" class="layui-input demo-search-date">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-btn-container layui-col-xs12">
|
||||
<button class="layui-btn" lay-submit lay-filter="demo-search">Search</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var laydate = layui.laydate;
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// 提交
|
||||
form.on('submit(demo-search)', function(data){
|
||||
layer.alert(JSON.stringify(data.field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
|
||||
// 下拉菜单
|
||||
dropdown.render({
|
||||
elem: '#demo-search-more',
|
||||
data: [{
|
||||
title: 'List A'
|
||||
},{
|
||||
title: 'List B'
|
||||
},{
|
||||
title: 'List C'
|
||||
}],
|
||||
click: function(obj, othis){
|
||||
this.elem.val(obj.title);
|
||||
},
|
||||
style: 'width: 245px;'
|
||||
})
|
||||
|
||||
// 日期
|
||||
laydate.render({
|
||||
elem: '.demo-search-date'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<style>
|
||||
.demo-login-container{width: 320px; margin: 21px auto 0;}
|
||||
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
|
||||
</style>
|
||||
<form class="layui-form">
|
||||
<div class="demo-login-container">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
</div>
|
||||
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 10px;">
|
||||
<img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
|
||||
<a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
|
||||
</div>
|
||||
<div class="layui-form-item demo-login-other">
|
||||
<label>社交账号登录</label>
|
||||
<span style="padding: 0 21px 0 6px;">
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
|
||||
</span>
|
||||
或 <a href="#reg">注册帐号</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo-login)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
|
||||
<form class="layui-form layui-form-pane" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">长输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期选择</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">行内表单</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="number" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码框</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-text-em">请务必填写用户名</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1" selected>阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">开关-默认开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked>
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
<input type="radio" name="sex" value="禁" title="禁用" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(['form'], function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo2)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<style>
|
||||
.demo-reg-container{width: 320px; margin: 21px auto 0;}
|
||||
.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
|
||||
</style>
|
||||
<form class="layui-form">
|
||||
<div class="demo-reg-container">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-cellphone"></i>
|
||||
</div>
|
||||
<input type="text" name="cellphone" value="" lay-verify="phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 11px;">
|
||||
<button type="button" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
</div>
|
||||
<input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="nickname" value="" lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
|
||||
<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
|
||||
<ins>用户协议</ins>
|
||||
</a>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
|
||||
</div>
|
||||
<div class="layui-form-item demo-reg-other">
|
||||
<label>社交账号注册</label>
|
||||
<span style="padding: 0 21px 0 6px;">
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
|
||||
</span>
|
||||
<a href="#login">登录已有帐号</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 自定义验证规则
|
||||
form.verify({
|
||||
// 确认密码
|
||||
confirmPassword: function(value, item){
|
||||
var passwordValue = $('#reg-password').val();
|
||||
if(value !== passwordValue){
|
||||
return '两次密码输入不一致';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo-reg)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
|
||||
// 是否勾选同意
|
||||
if(!field.agreement){
|
||||
layer.msg('您必须勾选同意用户协议才能注册');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
|
||||
// 普通事件
|
||||
util.on('lay-on', {
|
||||
// 获取验证码
|
||||
'reg-get-vercode': function(othis){
|
||||
var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增
|
||||
// 验证通过
|
||||
if(isvalid){
|
||||
layer.msg('手机号规则验证通过');
|
||||
// 此处可继续书写「发送验证码」等后续逻辑
|
||||
// …
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<form class="layui-form" action="" lay-filter="demo-val-filter">
|
||||
<div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读">
|
||||
<input type="checkbox" name="like[daze]" title="发呆">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked>
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入" class="layui-textarea" name="desc"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="layui-btn" lay-submit lay-filter="demo-val">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
|
||||
// 表单赋值
|
||||
$('#LAY-component-form-setval').on('click', function(){
|
||||
form.val('demo-val-filter', {
|
||||
"username": "贤心" // "name": "value"
|
||||
,"password": "AAAAAA"
|
||||
,"interest": 1
|
||||
,"like[write]": true // 复选框选中状态
|
||||
,"close": true // 开关状态
|
||||
,"sex": "女"
|
||||
,"desc": "Layui 用于更简单快速地构建网页界面"
|
||||
});
|
||||
});
|
||||
// 表单取值
|
||||
layui.$('#LAY-component-form-getval').on('click', function(){
|
||||
var data = form.val('demo-val-filter');
|
||||
alert(JSON.stringify(data));
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo-val)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="tel" name="phone" lay-verify="required|phone" class="layui-input" id="validate-phone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="vercode" lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button type="button" class="layui-btn layui-btn-primary" id="validate-get-vercode">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="demo-validate">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 点击获取验证码
|
||||
$('#validate-get-vercode').on('click', function(){
|
||||
var isValid = form.validate('#validate-phone'); // 主动触发验证，v2.7.0 新增
|
||||
// 验证通过
|
||||
if(isValid){
|
||||
layer.msg('手机号规则验证通过');
|
||||
// 此处可继续书写「发送验证码」等后续逻辑
|
||||
// …
|
||||
}
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo-validate)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<form class="layui-form">
|
||||
<input type="text" name="username" lay-verify="required|username" placeholder="用户名" class="layui-input">
|
||||
<hr>
|
||||
<input type="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
|
||||
<hr>
|
||||
<button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var form = layui.form;
|
||||
|
||||
// 自定义验证规则，如下以验证用户名和密码为例
|
||||
form.verify({
|
||||
// 函数写法
|
||||
// 参数 value 为表单的值；参数 item 为表单的 DOM 对象
|
||||
username: function(value, item){
|
||||
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
|
||||
return '用户名不能有特殊字符';
|
||||
}
|
||||
if(/(^_)|(__)|(_+$)/.test(value)) return '用户名首尾不能出现 _ 下划线';
|
||||
if(/^\d+$/.test(value)) return '用户名不能全为数字';
|
||||
|
||||
// 若不想自动弹出默认提示框，可返回 true，这时你可以通过其他提示方式替代（v2.5.7 新增）
|
||||
if(value === 'xxx'){
|
||||
alert('用户名不能为敏感词');
|
||||
return true;
|
||||
}
|
||||
},
|
||||
// 数组写法。
|
||||
// 数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
|
||||
password: [/^[\S]{6,12}$/, '密码必须为6到12位的非空字符']
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo-verify)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" lay-affix="location" lay-filter="location" placeholder="位置" class="layui-input">
|
||||
</div>
|
||||
<hr class="ws-space-16">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" lay-affix="search" lay-filter="search" lay-options="{split: true}" placeholder="搜索…" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var form = layui.form;
|
||||
|
||||
// 输入框点缀事件 - 位置示例
|
||||
form.on('input-affix(location)', function(data){
|
||||
var elem = data.elem; // 输入框
|
||||
|
||||
// do something
|
||||
layer.msg('模拟获取位置中…', {icon: 16, time: 1.5*1000}, function(){
|
||||
elem.value = '浙江杭州'; // 向输入框赋值
|
||||
})
|
||||
});
|
||||
|
||||
// 输入框点缀事件 - 搜索示例
|
||||
form.on('input-affix(search)', function(data){
|
||||
var elem = data.elem; // 输入框
|
||||
var value = elem.value; // 输入框的值
|
||||
|
||||
if(!value){
|
||||
layer.msg('请输入搜索内容');
|
||||
return elem.focus()
|
||||
};
|
||||
|
||||
// 模拟搜索跳转
|
||||
location.href = '?keywords='+ value + '&_'+ new Date().getTime() +'#affix-custom';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-group">
|
||||
<div class="layui-input-split layui-input-prefix">
|
||||
身高
|
||||
</div>
|
||||
<input type="text" placeholder="带任意前置和后置内容" class="layui-input">
|
||||
<div class="layui-input-split layui-input-suffix">
|
||||
cm
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-group">
|
||||
<div class="layui-input-split layui-input-prefix">
|
||||
手机号
|
||||
</div>
|
||||
<input type="text" placeholder="带任意前置和后置内容" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<button class="layui-btn layui-btn-primary">一个按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-group">
|
||||
<div class="layui-input-split layui-input-prefix">
|
||||
用户名
|
||||
</div>
|
||||
<input type="text" placeholder="带任意前置内容" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-group">
|
||||
<input type="text" placeholder="带任意后置内容" class="layui-input">
|
||||
<div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-group">
|
||||
<div class="layui-input-prefix">
|
||||
搜索
|
||||
</div>
|
||||
<input type="text" placeholder="带任意前置和后置内容" class="layui-input">
|
||||
<div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 32px 0;">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-group">
|
||||
<div class="layui-input-prefix">
|
||||
身高
|
||||
</div>
|
||||
<input type="text" placeholder="前置和后置无分割框" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
cm
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-group">
|
||||
<div class="layui-input-prefix">
|
||||
昵称
|
||||
</div>
|
||||
<input type="text" placeholder="带前置且无分割框" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-group">
|
||||
<input type="text" placeholder="带后置且无分割框" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-tips"></i> 任意后置内容
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-row layui-col-space16">
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" placeholder="带前缀" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" placeholder="带后缀" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-date"></i>
|
||||
</div>
|
||||
<input type="text" placeholder="带前缀和后缀" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix layui-input-split">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" placeholder="带前缀加分隔框" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" placeholder="带后缀加分隔框" class="layui-input">
|
||||
<div class="layui-input-suffix layui-input-split">
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix layui-input-split">
|
||||
<i class="layui-icon layui-icon-date"></i>
|
||||
</div>
|
||||
<input type="text" placeholder="带前缀和后缀加分割框" class="layui-input">
|
||||
<div class="layui-input-suffix layui-input-split">
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-location"></i>
|
||||
</div>
|
||||
<input type="text" placeholder="带前缀无分割框和后缀有分割框" class="layui-input">
|
||||
<div class="layui-input-suffix layui-input-split">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix layui-input-split">
|
||||
<i class="layui-icon layui-icon-location"></i>
|
||||
</div>
|
||||
<input type="text" placeholder="带前缀有分割框和后缀无分割框" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-form"></i>
|
||||
</div>
|
||||
<select>
|
||||
<option value="">放置 select 元素</option>
|
||||
<option value="北京">北京</option>
|
||||
<option value="上海">上海</option>
|
||||
<option value="广州">广州</option>
|
||||
<option value="深圳">深圳</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,396 @@
|
|||
---
|
||||
title: 表单组件 form
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 表单组件 🔥
|
||||
|
||||
> 表单组件`form`是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。`form`是 Layui 最常用的组件之一。
|
||||
|
||||
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<h3 lay-toc="{level: 2, id: 'examples', hot: true}" class="layui-hide">综合演示</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '综合演示'}, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/form.demo.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="pane" lay-toc="{level: 2}">方框风格</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/form.pane.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="login" lay-toc="{level: 2}">登录模板 <sup>2.8+</sup></h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/form.login.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="reg" lay-toc="{level: 2}">注册模板 <sup>2.8+</sup></h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/form.reg.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
更多其他表单模板均可自由布局实现，为了避免影响文档其他重要版面的阅读，我们就不做过多演示了。
|
||||
|
||||
|
||||
<h2 id="layout" lay-toc="{title: '布局'}">表单布局</h2>
|
||||
|
||||
### 🌕 普通布局
|
||||
|
||||
在上文的「[综合演示](#examples)」示例中，我们用的是 form 组件自身的普通布局。其要点为：
|
||||
|
||||
- 通过 `class="layui-form"` 定义一个表单域，通常设置在`<form>`标签上， 或普通`<div>` 标签亦可。
|
||||
- 通过 `class="layui-form-item"` 定义一个块级元素的表单项容器
|
||||
- 通过 `class="layui-form-label"` 定义标签
|
||||
- 通过 `class="layui-form-block"` 定义表单项父容器为块级元素
|
||||
- 通过 `class="layui-form-inline"` 或 `class="layui-inline"` 定义表单项父容器为行内块元素
|
||||
|
||||
即必须按照规定的层级定义相应的 `class`。
|
||||
|
||||
### 🌕 栅格布局
|
||||
|
||||
form 还可以借助*栅格*实现更灵活的响应式布局。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 500px;', done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/form.grid.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="api" lay-toc="{hot: 1}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var form = layui.form | 获得 `form` 模块。 |
|
||||
| [form.render(type, filter)](#render) | 表单域组件渲染，核心方法。[#用法](#render) |
|
||||
| [form.verify(obj)](#verify) | 自定义表单验证的规则。[#用法](#verify) |
|
||||
| [form.validate(elem)](#validate) <sup>2.7+</sup> | 主动触发执行验证。[#用法](#validate) |
|
||||
| [form.val(filter, obj)](#val) | 表单赋值或取值。 [#用法](#val) |
|
||||
| [form.submit(filter, callback)](#submit) <sup>2.7+</sup> | 用于主动执行指定表单的提交。[#用法](#submit) |
|
||||
| [form.on(\'event(filter)\', callback)](#on) | 事件。[#用法](#on) |
|
||||
| form.config | 获取 form 组件全局配置项。 |
|
||||
| form.set(options) | 设置 form 组件全局配置项。 |
|
||||
|
||||
<h2 id="attr" lay-toc="{level: 2}">属性</h2>
|
||||
|
||||
在表单域中，有时还需要定义一些特定属性来配合组件的使用，它们一般以 `lay-*` 为命名格式，如：
|
||||
|
||||
```
|
||||
<form class="layui-form" lay-filter="form-1">
|
||||
<input type="text" class="layui-input" lay-verify="email">
|
||||
<input type="checkbox" lay-skin="switch" lay-filter="agree" title="同意">
|
||||
<button class="layui-btn" lay-submit>提交</button>
|
||||
</form>
|
||||
|
||||
```
|
||||
|
||||
以下为 `form` 组件的特定属性列表：
|
||||
|
||||
| 属性 | 值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| title | 自定义 | 设置表单元素标题，一般用于 `checkbox,radio` 元素 |
|
||||
| lay-filter | 自定义 | 设置表单元素的过滤器，以便用于执行相关方法时的参数匹配 |
|
||||
| lay-verify | `required`必填项 <br>`phone`手机号 <br>`email`邮箱 <br>`url`网址<br>`number`数字<br>`date`日期<br>`identity`身份证<hr>`自定义规则值` | 设置表单项的验证规则，支持单条或多条规则（多条用`\|`分隔），如：<br>`lay-verify="required"` <br>`lay-verify="required\|email"`<br>`lay-verify="其他自定义规则值"` <hr>自定义规则的用法：[#详见](#verify) |
|
||||
| lay-vertype | `tips`吸附层<br>`alert` 对话框<br>`msg` 默认 | 设置验证异常时的提示层模式 |
|
||||
| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 |
|
||||
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，`<input type="text">`元素 **私有属性** |
|
||||
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">` 元素 **私有属性** |
|
||||
| lay-search | 默认不区分大小写;<br>设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
|
||||
| lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |
|
||||
| lay-ignore | 无需值 | 设置表单元素忽略渲染，即让元素保留系统原始 UI 风格 |
|
||||
|
||||
|
||||
<h2 id="render" lay-toc="{hot: true, level: 2}">渲染</h2>
|
||||
|
||||
`form.render(type, filter);`
|
||||
|
||||
- 参数 `type` 可选，对应表单组件类型，支持：`input,select,checkbox,radio`；若不填，则指向所有类型。
|
||||
- 参数 `filter` 可选，对应 `class="layui-form"` 所在元素的 `lay-filter` 属性值，用于指定需渲染的表单区域。
|
||||
|
||||
### **常规渲染**
|
||||
|
||||
`form` 组件会在元素加载完毕后，自动对所有表单区域完成一次渲染，因此该方法主要用于对*动态插入*的表单元素的渲染。
|
||||
|
||||
```
|
||||
<form class="layui-form" lay-filter="test">
|
||||
动态插入的表单域
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var form = layui.form;
|
||||
|
||||
// 当表单元素被插入插入时，需进行组件渲染才能显示
|
||||
form.render(); // 渲染全部表单
|
||||
form.render('select'); // 仅渲染 select 元素
|
||||
form.render(null, 'test'); // 仅渲染 lay-filter="test" 的容器内的全部表单
|
||||
form.render('checkbox', 'test'); // 仅渲染 lay-filter="test" 的容器内的 checkbox 元素
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
### **定向渲染** <sup>2.7+</sup>
|
||||
|
||||
该方法还允许指定表单元素的 jQuery 对象，从而完成定向渲染。且支持两种方式的指向：
|
||||
|
||||
- 若 jQuery 对象指向表单域容器（`class="layui-form"`），则渲染该表单域中的所有表单项；<sup>2.8+</sup>
|
||||
- 若 jQuery 对象指向的不是表单域容器，则只对该对象进行渲染
|
||||
|
||||
定向渲染在页面出现大量表单时，可以极大地减少表单组件渲染时的性能开销，建议灵活运用。
|
||||
|
||||
```
|
||||
<div class="layui-form" id="form-id">
|
||||
<select id="select-id">
|
||||
<option value="a">A</option>
|
||||
</select>
|
||||
<!-- 其他表单元素 -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('form', function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
|
||||
// 定向渲染（一般当表单存在动态生成时，进行渲染）
|
||||
// 传入需要渲染的相应表单元素的 jQuery 对象
|
||||
form.render($('#form-id')); // 渲染 id="form-id" 的表单域中的所有表单项
|
||||
form.render($('#select-id')); // 仅渲染 id="select-id" 的表单项
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### **忽略渲染**
|
||||
|
||||
若表单域中的部分表单不需要 Layui 来渲染，那么可通过 `lay-ignore` 属性让其保留系统原始 UI 风格。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<select>
|
||||
<option value="a">正常渲染的 select</option>
|
||||
</select>
|
||||
<input type="checkbox" lay-skin="primary" title="正常渲染的 checkbox">
|
||||
<hr>
|
||||
<select lay-ignore>
|
||||
<option value="">忽略渲染的 select</option>
|
||||
</select>
|
||||
<input type="checkbox" lay-ignore> 忽略渲染的 checkbox
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="lay-verify" lay-toc="{hot: true, level: 2}">验证</h2>
|
||||
|
||||
Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay-verify=""` 属性值即可指定验证规则，如：
|
||||
|
||||
```
|
||||
<div class="layui-form">
|
||||
<input type="text" lay-verify="required">
|
||||
<input type="text" lay-verify="email">
|
||||
<input type="text" lay-verify="required|phone|number">
|
||||
<button class="layui-btn" lay-submit>提交</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
其中，`lay-verify` 属性的内置规则值可参考上文的：[#属性介绍](#attr)。 当表单提交时，会自动触发验证。
|
||||
|
||||
<h3 id="verify" lay-toc="{level: 3, title: '定义验证规则'}" class="ws-bold">自定义验证规则</h3>
|
||||
|
||||
`form.verify(obj);`
|
||||
|
||||
- 参数 `obj` 是一个对象，用于定义验证规则的集合。
|
||||
|
||||
当内置的验证规则无法满足业务需求时，我们可以通过该方法自定义验证规则。如：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/form.verify.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
更多「自定义验证规则」示例参考：
|
||||
|
||||
> - <a href="https://gitee.com/layui/layui/issues/I5HC2L#note_11673264_link" target="_blank">将 form 提示语显示在表单项旁边，并在提交时批量触发验证</a>
|
||||
> - <a href="https://gitee.com/layui/layui/issues/I42C7I#note_12020414_link" target="_blank">重置 form 内置验证规则，让其：当非空值才进行验证；加了 required 时才验证非空</a>
|
||||
|
||||
|
||||
<h3 id="validate" lay-toc="{level: 3}" class="ws-bold">主动触发验证 <sup>2.7+</sup></h3>
|
||||
|
||||
`form.validate(elem);`
|
||||
|
||||
- 参数 `elem` 为元素选择器或 jQuery 对象； 若验证通过，该方法将返回 true，否则返回 false
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/form.validate.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="val" lay-toc="{level: 2}">赋值/取值</h2>
|
||||
|
||||
`form.val(filter, obj);`
|
||||
|
||||
- 参数 `filter` 为表单域容器（`class="layui-form"`）的 `lay-filter` 属性值
|
||||
- 参数 `obj` 可选。若参数存在，则对表单域进行赋值；若参数不存在，则为对表单域进行取值。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/form.val.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="submit" lay-toc="{hot: true, level: 2}">提交</h2>
|
||||
|
||||
表单的提交可以通过事件触发或方法触发
|
||||
|
||||
### **提交事件**
|
||||
|
||||
在表单域中，对指定按钮设置 `lay-submit` 属性，即意味着点击该按钮时，将触发提交事件。如：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
<form class="layui-form">
|
||||
<input type="text" name="nickname" lay-verify="required" class="layui-input">
|
||||
<hr>
|
||||
<button class="layui-btn" lay-submit lay-filter="demo-submit">提交按钮</button>
|
||||
<button class="layui-btn" id="test-btn-other">普通按钮</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo-submit)', function(data){
|
||||
var field = data.field; // 获取表单全部字段值
|
||||
var elem = data.elem; // 获取当前触发事件的元素 DOM 对象，一般为 button 标签
|
||||
var elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
// 普通按钮
|
||||
$('#test-btn-other').on('click', function(){
|
||||
layer.msg('点击未设置特定属性的按钮不会触发组件的提交事件');
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
### **提交方法** <sup>2.7+</sup>
|
||||
|
||||
`form.submit(filter, callback);`
|
||||
|
||||
- 参数 `filter` 为表单域容器的 `lay-filter` 属性值
|
||||
- 参数 `callback` 为执行提交事件后的回调函数
|
||||
|
||||
使用该方法可以实现在任意位置对指定表单的主动提交，相比上述的提交事件更加灵活。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, done: function(obj){
|
||||
obj.render()
|
||||
}}">
|
||||
<textarea>
|
||||
<fieldset class="layui-elem-field">
|
||||
<legend>表单内部</legend>
|
||||
<div class="layui-field-box">
|
||||
<form class="layui-form" lay-filter="form-demo-submit">
|
||||
<input type="text" name="nickname" lay-verify="required" class="layui-input">
|
||||
</form>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button class="layui-btn" id="test-btn-submit">任意位置按钮</button>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 任意位置按钮触发提交
|
||||
$('#test-btn-submit').on('click', function(){
|
||||
form.submit('form-demo-submit', function(data){
|
||||
var field = data.field; // 获取表单全部字段值
|
||||
console.log(data); // 回调函数返回的 data 参数和提交事件中返回的一致
|
||||
|
||||
// 执行提交
|
||||
layer.confirm('确定提交吗？', function(index){
|
||||
layer.close(index); // 关闭确认提示框
|
||||
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
});
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="on" lay-toc="{}">事件</h2>
|
||||
|
||||
`form.on('event(filter)', callback);`
|
||||
|
||||
- 参数 `event(filter)` 是一个特定结构。`event` 为事件名，支持：`select,checkbox,switch,radio,submit`；`filter` 为元素属性 `lay-filter` 对应的值，若不填，则指向所有同类组件的事件。
|
||||
- 参数 `callback` 为事件执行时的回调函数，并返回一个包含各种值的 `object` 类型的参数。
|
||||
|
||||
如下以 `select` 事件为例：
|
||||
```
|
||||
// 指向所有 select 组件的选择事件
|
||||
form.on('select', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
// 指向元素为 `<select lay-filter="test"></select>` 的选择事件
|
||||
form.on('select(test)', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
---
|
||||
title: 输入框 / 文本域
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 输入框
|
||||
|
||||
> 输入框组件是对文本框`<input type="text">`和多行文本框`<textarea>`元素的扩展
|
||||
|
||||
|
||||
<h2 id="text" lay-toc="">普通输入框</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<input type="text" name="" placeholder="文本框" class="layui-input">
|
||||
<hr class="ws-space-16">
|
||||
<textarea name="" placeholder="多行文本框" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="wrap" lay-toc="{hot: true}">输入框点缀 <sup>2.8+</sup></h2>
|
||||
|
||||
输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：*容器、前缀、输入框、后缀*。
|
||||
|
||||
```
|
||||
<div class="layui-input-{容器类}">
|
||||
<div class="layui-input-{前缀类}"></div>
|
||||
<input class="layui-input" placeholder="输入框">
|
||||
<div class="layui-input-{后缀类}"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- 容器类：
|
||||
- 前置和后置结构：`class="layui-input-group"`
|
||||
- 前缀和后缀结构：`class="layui-input-wrap"`
|
||||
- 前缀类：`class="layui-input-prefix"`
|
||||
- 后缀类：`class="layui-input-suffix"`
|
||||
- 前缀显示分隔框：`class="layui-input-prefix layui-input-split"`
|
||||
- 后缀显示分隔框：`class="layui-input-suffix layui-input-split"`
|
||||
|
||||
通过在不同层级中设置规定的 CSS 类来实现点缀布局，再按照不同需求，在前缀和后缀中放置图标等任意内容。
|
||||
|
||||
|
||||
<h3 id="group" lay-toc="{level: 2}" class="ws-bold">前置和后置</h3>
|
||||
|
||||
前置和后置结构是*输入框的自适应结构*，可以很灵活地控制前后置内容与输入框的宽度比例。
|
||||
|
||||
- 结构：
|
||||
|
||||
```
|
||||
<div class="layui-input-group">
|
||||
<div class="layui-input-prefix">前置内容</div>
|
||||
<input type="text" class="layui-input">
|
||||
<div class="layui-input-suffix">后缀内容</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- 示例：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/input.group.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="pre-suf" lay-toc="{level: 2}" class="ws-bold">前缀和后缀</h3>
|
||||
|
||||
输入框前缀和后缀是*输入框的纯修饰结构*，前缀和后缀宽度固定且其元素不可触及，即只能触及输入框本身。
|
||||
|
||||
- 结构：
|
||||
|
||||
```
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">前缀图标</div>
|
||||
<input type="text" class="layui-input">
|
||||
<div class="layui-input-suffix">后缀图标</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- 示例：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;',layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/input.pre.suf.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
注意「前置和后置」与「前缀和后缀」 二者使用时切勿混淆。
|
||||
|
||||
|
||||
<h2 id="affix" lay-toc="{hot: true}">动态点缀 <sup>2.8+</sup></h2>
|
||||
|
||||
该功能允许对输入框内容进行相关动态操作。通过对输入框元素设置 `lay-affix` 属性来开启动态点缀，且输入框元素必须放置在一个具有输入框点缀结构的容器中（上文有讲解）。如：
|
||||
|
||||
```
|
||||
input 放在前后置容器中：
|
||||
<div class="layui-input-group">
|
||||
<input type="text" lay-affix="clear">
|
||||
</div>
|
||||
|
||||
input 放在前后缀容器中：
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" lay-affix="clear">
|
||||
</div>
|
||||
```
|
||||
|
||||
`lay-affix` 属性支持设置内置属性值和自定义值
|
||||
|
||||
| 值 | 描述 |
|
||||
| --- | --- |
|
||||
| `lay-affix="eye"` | 密码框显隐 |
|
||||
| `lay-affix="clear"` | 内容清除 |
|
||||
| `lay-affix="自定义图标值"` | 值对应图标类`layui-icon-`后面的名称（[#详见图标列表](../icon/#list)）。<br>可通过「[点缀事件](#affix-event)」完成自定义操作 |
|
||||
|
||||
|
||||
<h3 id="affix-eye" lay-toc="{level: 2}" class="ws-bold">密码显隐</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="password" lay-affix="eye" placeholder="请输入" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="affix-clear" lay-toc="{level: 2}" class="ws-bold">内容清除</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" lay-affix="clear" placeholder="请输入" class="layui-input">
|
||||
</div>
|
||||
<hr class="ws-space-16">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" value="默认有值状态" lay-affix="clear" class="layui-input">
|
||||
</div>
|
||||
<hr class="ws-space-16">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" value="禁用状态时" lay-affix="clear" disabled class="layui-input">
|
||||
</div>
|
||||
<hr class="ws-space-16">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" value="只读状态时" lay-affix="clear" readonly class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="affix-custom" lay-toc="{level: 2}" class="ws-bold">自定义动态点缀</h3>
|
||||
|
||||
我们还可以对 `lay-affix` 属性设置任意图标值，从而实现自定义动态点缀功能。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include('docs/form/examples/input.affix.custom.md') }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
输入框的自定义动态点缀功能，让原本单一的输入框有了更多的想象空间。
|
||||
|
||||
|
||||
<h3 id="on" lay-toc="{level: 2}" class="ws-bold">点缀事件</h3>
|
||||
|
||||
`form.on('input-affix(filter)', callback);`
|
||||
|
||||
- `input-affix` 为输入框动态点缀事件固定名称
|
||||
- `filter` 为输入框对应的 `lay-filter` 属性值
|
||||
|
||||
该事件在点击输入框的点缀图标时触发，通过该事件可以完成一些自定义操作。
|
||||
|
||||
```
|
||||
form.on('input-affix(filter)', function(data){
|
||||
var elem = data.elem; // 获取输入框 DOM 对象
|
||||
var affix = data.affix; // 获取输入框 lay-affix 属性值
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
title: 单选框
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 单选框
|
||||
|
||||
> 单选框组件是对 `<input type="radio">` 元素的美化替代。
|
||||
|
||||
<h2 id="normal" lay-toc="{}">普通单选框</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<input type="radio" name="AAA" value="1" title="默认">
|
||||
<input type="radio" name="AAA" value="2" title="选中" checked>
|
||||
<input type="radio" name="AAA" value="3" title="禁用" disabled>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 属性 `title` 可设置单选框标题
|
||||
- 属性 `checked` 可设置默认选中
|
||||
- 属性 `disabled` 可设置禁用状态
|
||||
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）。同组单选框一般设置相同值。
|
||||
|
||||
<h2 id="title" lay-toc="{}">自定义标题模板</h2>
|
||||
|
||||
在 `radio` 元素后的相邻元素设置特定属性 `lay-radio`，可以与 `radio` 标题进行绑定。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<input type="radio" name="AAA" value="0" title="默认">
|
||||
<div lay-radio>
|
||||
<span style="color: blue;">自定义模板 ♂</span>
|
||||
</div>
|
||||
<input type="radio" name="AAA" value="1" title="默认">
|
||||
<div lay-radio>
|
||||
<span style="color: pink;">自定义模板 ♀</span>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="on" lay-toc="{hot: true}">单选框事件</h2>
|
||||
|
||||
`form.on('radio(filter)', callback);`
|
||||
|
||||
- `radio` 为单选框事件固定名称
|
||||
- `filter` 为单选框元素对应的 `lay-filter` 属性值
|
||||
|
||||
该事件在单选框被点击或选中时触发。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<input type="radio" name="AAA" value="1" title="选项1" lay-filter="demo-radio-filter" checked>
|
||||
<input type="radio" name="AAA" value="2" lay-filter="demo-radio-filter" title="选项2">
|
||||
<input type="radio" name="AAA" value="3" lay-filter="demo-radio-filter" title="选项3">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" lay-submit lay-filter="demo-radio-submit">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// radio 事件
|
||||
form.on('radio(demo-radio-filter)', function(data){
|
||||
var elem = data.elem; // 获得 radio 原始 DOM 对象
|
||||
var checked = elem.checked; // 获得 radio 选中状态
|
||||
var value = elem.value; // 获得 radio 值
|
||||
var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
|
||||
|
||||
layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
|
||||
});
|
||||
|
||||
// 通过表单提交事件，演示 radio 不同状态下的字段结果
|
||||
form.on('submit(demo-radio-submit)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
---
|
||||
title: 选择框
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 选择框
|
||||
|
||||
> 选择框组件是对 `<select>` 元素的美化替代，延续了原有的特性，且加入了搜索等扩展。
|
||||
|
||||
|
||||
<h2 id="normal" lay-toc="{}">普通选择框</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form layui-row layui-col-space16">
|
||||
<div class="layui-col-md6">
|
||||
<select>
|
||||
<option value="">请选择</option>
|
||||
<option value="AAA">选项 A</option>
|
||||
<option value="BBB">选项 B</option>
|
||||
<option value="CCC">选项 C</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select>
|
||||
<option value="">请选择</option>
|
||||
<option value="AAA">选项 A</option>
|
||||
<option value="BBB">选项 B</option>
|
||||
<option value="CCC" selected>选项 C</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select disabled>
|
||||
<option value="">禁用选择框</option>
|
||||
<option value="AAA">选项 A</option>
|
||||
<option value="BBB">选项 B</option>
|
||||
<option value="CCC">选项 C</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select>
|
||||
<option value="">请选择</option>
|
||||
<option value="AAA">选项 A</option>
|
||||
<option value="BBB" disabled>选项 B（禁用选项）</option>
|
||||
<option value="CCC">选项 C</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 若第一项 `value` 为空，通常只作为选择框提示性引导；若第一项 `value` 不为空，则作为默认选中项。
|
||||
- 通过给选项添加 `selected` 属性优先设置默认选中项。
|
||||
- 通过给 `<select>` 或 `<option>` 标签设置 `disabled` 可禁用整个选择框或某个选项。
|
||||
|
||||
在 `<select>` 标签上同样支持设置表单的其他公共属性（[#详见](./#attr)）。
|
||||
|
||||
<h2 id="group" lay-toc="{}">分组选择框</h2>
|
||||
|
||||
通过 `<optgroup>` 标签给选择框分组
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<select>
|
||||
<option value="">请选择</option>
|
||||
<optgroup label="分组 A">
|
||||
<option value="A-1">选项 A-1</option>
|
||||
<option value="A-2">选项 A-2</option>
|
||||
<option value="A-3">选项 A-3</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组 B">
|
||||
<option value="B-1">选项 B-1</option>
|
||||
<option value="B-2">选项 B-2</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="search" lay-toc="{hot: true}">搜索选择框</h2>
|
||||
|
||||
在 `<select>` 元素上设置 `lay-search` 可开启选择框的搜索功能
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form layui-row layui-col-space16">
|
||||
<div class="layui-col-md6">
|
||||
<select lay-search="">
|
||||
<option value="">请选择或搜索（默认不区分大小写）</option>
|
||||
<option value="1">AAA</option>
|
||||
<option value="2">aaa</option>
|
||||
<option value="3">BBB</option>
|
||||
<option value="4">bbb</option>
|
||||
<option value="5">ABC</option>
|
||||
<option value="6">abc</option>
|
||||
<option value="7">AbC</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select lay-search="cs">
|
||||
<option value="">请选择或搜索（设置区分大小写）</option>
|
||||
<option value="1">AAA</option>
|
||||
<option value="2">aaa</option>
|
||||
<option value="3">BBB</option>
|
||||
<option value="4">bbb</option>
|
||||
<option value="5">ABC</option>
|
||||
<option value="6">abc</option>
|
||||
<option value="7">AbC</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select lay-search="">
|
||||
<option value="">请搜索</option>
|
||||
<optgroup label="分组a">
|
||||
<option value="a1">a1</option>
|
||||
<option value="a2">a2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组aa">
|
||||
<option value="aa1">aA1</option>
|
||||
<option value="aa2">aA2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组b">
|
||||
<option value="b1">b1</option>
|
||||
<option value="b2">b2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组bb">
|
||||
<option value="bb1">bb1</option>
|
||||
<option value="bb2">bb2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组bbb">
|
||||
<option value="bbb1">bBb1</option>
|
||||
<option value="bbb2">bBB2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组c">
|
||||
<option value="c1">c1</option>
|
||||
<option value="c2">c2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组cc">
|
||||
<option value="cc1">cc1</option>
|
||||
<option value="cc2">cc2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组ccc">
|
||||
<option value="ccc1">ccc1</option>
|
||||
<option value="ccc2">ccc2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组cccc">
|
||||
<option value="cccc1">cccc1</option>
|
||||
<option value="cccc2">cccc2</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="on" lay-toc="{hot: true}">选择框事件</h2>
|
||||
|
||||
`form.on('select(filter)', callback);`
|
||||
|
||||
- `select` 为选择框事件固定名称
|
||||
- `filter` 为选择框元素对应的 `lay-filter` 属性值
|
||||
|
||||
该事件在选择框选项选中后触发。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
<div class="layui-form">
|
||||
<select lay-filter="demo-select-filter">
|
||||
<option value="">请选择</option>
|
||||
<option value="AAA">选项 A</option>
|
||||
<option value="BBB">选项 B</option>
|
||||
<option value="CCC">选项 C</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// select 事件
|
||||
form.on('select(demo-select-filter)', function(data){
|
||||
var elem = data.elem; // 获得 select 原始 DOM 对象
|
||||
var value = data.value; // 获得被选中的值
|
||||
var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
|
||||
|
||||
layer.msg(this.innerHTML + ' 的 value: '+ value); // this 为当前选中 <option> 元素对象
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,119 @@
|
|||
---
|
||||
title: 开始使用
|
||||
toc: true
|
||||
---
|
||||
|
||||
<h1 id="introduce" lay-toc="{title: '简介'}">开始使用</h1>
|
||||
|
||||
> Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
|
||||
|
||||
<p style="font-size: 68px; text-align: center; color: #16baaa;">
|
||||
Layui
|
||||
</p>
|
||||
|
||||
<table class="layui-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>谐音：类 UI</td>
|
||||
<td>用途：用于更简单快速地构建网页界面</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>环境：全部主流 Web 浏览器（IE8 以下除外）</td>
|
||||
<td>特性：原生态开发 / 轻量级模块化 / 外简内丰 / 开箱即用</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="install" lay-toc="">下载引用</h2>
|
||||
|
||||
您可以通过以下任意一种方式获得 Layui :
|
||||
|
||||
### 🌕 官网下载
|
||||
|
||||
您可以在我们的 [官网首页](/) 下载到 Layui 当前版本，它经过了自动化构建，更适合用于生产环境。目录结构如下：
|
||||
|
||||
```
|
||||
layui/
|
||||
├─css
|
||||
│ └─layui.css # 核心样式库
|
||||
└─layui.js # 核心模块库
|
||||
```
|
||||
|
||||
### 🌕 Git 下载
|
||||
|
||||
> 您也可以通过 [GitHub](https://github.com/layui/layui/releases) 或 [Gitee](https://gitee.com/layui/layui/releases) 的 releases 列表下载，或直接下载整个仓库。
|
||||
|
||||
<p>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=layui&repo=layui&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="156px" height="30px"></iframe>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=layui&repo=layui&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="156px" height="30px"></iframe>
|
||||
</p>
|
||||
<div class="layui-btn-container">
|
||||
<a class="layui-btn layui-btn-normal" href="https://github.com/layui/layui/" target="_blank" rel="nofollow" style="background-color: #24292E; color: #fff;">GitHub</a>
|
||||
<a class="layui-btn layui-btn-normal" href="https://gitee.com/layui/layui/" target="_blank" rel="nofollow" style="background-color: #C71D23; color: #fff;">Gitee</a>
|
||||
</div>
|
||||
|
||||
### 🌕 npm 下载
|
||||
|
||||
```
|
||||
npm i layui
|
||||
```
|
||||
|
||||
### 🌕 第三方 CDN 方式引入：
|
||||
|
||||
> UNPKG 和 CDNJS 均为第三方免费 CDN，资源通过 NPM/GitHub 进行同步。另外还可以采用国内的 [Staticfile CDN](https://www.staticfile.org/)。
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<a class="layui-btn layui-btn-primary layui-border-black" href="https://unpkg.com/browse/layui/dist/" target="_blank" rel="nofollow">UNPKG</a>
|
||||
<a class="layui-btn layui-btn-primary" style="border-color: #E64E3D; color: #E64E3D;" href="https://cdnjs.com/libraries/layui" target="_blank" rel="nofollow">CDNJS</a>
|
||||
</div>
|
||||
|
||||
|
||||
```
|
||||
<!-- 引入 layui.css -->
|
||||
<link href="//unpkg.com/layui@{{= d.layui._v }}/dist/css/layui.css" rel="stylesheet">
|
||||
|
||||
<!-- 引入 layui.js -->
|
||||
<script src="//unpkg.com/layui@{{= d.layui._v }}/dist/layui.js">
|
||||
```
|
||||
|
||||
<h2 id="quickstart" lay-toc="{}">快速上手</h2>
|
||||
|
||||
现在，让我们以一个最简单的示例开始入门：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: 'iframe', previewStyle: 'height: 210px;'}">
|
||||
<textarea>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Quick Start - Layui</title>
|
||||
<link href="{{= d.layui.cdn.css }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- HTML Content -->
|
||||
<script src="{{= d.layui.cdn.js }}"></script>
|
||||
<script>
|
||||
// Usage
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
// Welcome
|
||||
layer.msg('Hello World', {icon: 6});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
点击上方 `Preview` 标签可进行效果预览。
|
||||
|
||||
<h2 id="help" lay-toc="{}">其他帮助</h2>
|
||||
|
||||
- 在线测试：<a href="https://codepen.io/layui/pen/bGxZXrd" target="_blank">https://codepen.io/layui/pen/bGxZXrd</a>
|
||||
- 深色主题：<a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank">https://github.com/Sight-wcg/layui-theme-dark</a>
|
||||
|
||||
|
||||
## 初识寄语
|
||||
|
||||
> 愿 Layui 从此成为您得心应手的 Web 界面解决方案，化作您方寸屏幕前的亿万字节！
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<h3 lay-toc="{level: 2, id: 'examples'}" class="layui-hide">常规用法</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '常规用法'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/normal.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-type" lay-toc="{level: 2, hot: true}">多类型选择器</h3>
|
||||
|
||||
默认为日期选择器，即上文「常规用法」示例中的效果。以下主要呈现其他类型选择器：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/type.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-range" lay-toc="{level: 2, hot: true}">范围选择</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/range.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-shortcut" lay-toc="{level: 2, hot: true}">配置快捷选项 <sup>2.8+</sup></h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/shortcut.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-format" lay-toc="{level: 2}">自定义格式</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/format.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-mark" lay-toc="{level: 2}">节日及标注</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/mark.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-limit" lay-toc="{level: 2, hot: true}">限制可选日期</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/limit.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-elem" lay-toc="{level: 2}">批量绑定元素</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/elem.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-more" lay-toc="{level: 2, hot: true}">更多功能示例</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/more.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-theme" lay-toc="{level: 2, hot: true}">自定义主题</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/theme.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-static" lay-toc="{level: 2}">直接静态显示</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/laydate/examples/static.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,679 @@
|
|||
<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>
|
||||
|
||||
[type](#options.type)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.type" class="ws-anchor">
|
||||
组件面板选择类型。支持以下可选值：
|
||||
</div>
|
||||
|
||||
- `year` 年选择器，只提供年列表选择
|
||||
- `month` 年月选择器，只提供年、月选择
|
||||
- `date` 日期选择器（默认），可选择：年、月、日选择
|
||||
- `time` 时间选择器，只提供时、分、秒选择
|
||||
- `datetime` 日期时间选择器，可选择：年月日、时分秒
|
||||
|
||||
效果详见： [#示例](#demo-type)
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`date`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[range](#options.range)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.range" class="ws-anchor">
|
||||
|
||||
开启左右面板的范围选择，将会根据 `type` 类型呈现对应的范围选择面板。该属性值支持以下类型：
|
||||
|
||||
</div>
|
||||
|
||||
- 若为 `boolean` 类型，即表示是否开启范围选择，若设为 `true`，则开始日期与结束日期默认采用 `-` 连接符
|
||||
- 若为 `string` 类型，则表示开启范围选择，且自定义开始日期与结束日期的连接符。如： `range: '~'`
|
||||
- 若为 `boolean` 类型，即表示开启范围选，且开始日期和结束日期分别赋值在两个目标选择器中，如：
|
||||
|
||||
```
|
||||
range: ['#start', '#end']
|
||||
```
|
||||
|
||||
详细用法可参考： [#示例](#demo-range)
|
||||
|
||||
|
||||
</td>
|
||||
<td>boolean<br>string<br>array</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rangeLinked <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启日期范围选择时的区间联动标注模式，该必须开启 `range` 属性后生效。日期范围默认采用的是*左右面板独立选择模式*，设置该属性后，将采用*左右面板联动选择模式*。
|
||||
<br>效果详见： [#示例](#demo-range)
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fullPanel <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启全面板，即日期和时间显示在同一面板。 当 `type: 'datetime'` 且未设置 `range` 属性时生效。
|
||||
<br>效果详见： [#示例](#demo-type)
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[format](#options.format)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.format" class="ws-anchor">
|
||||
|
||||
自定义日期和时间值的返回格式,默认值： `yyyy-MM-dd`。 其格式符规则如下：
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
| 格式符 | 描述 |
|
||||
| --- | --- |
|
||||
| yyyy | 年份，输出四个字符。若不足四位，则前置补零 |
|
||||
| y | 年份，允许一位 |
|
||||
| MM | 月份，输出两个字符。若不足两位，则前置补零 |
|
||||
| M | 月份，允许一位 |
|
||||
| dd | 日期，输出两个字符。若不足两位，则前置补零 |
|
||||
| d | 日期，允许一位 |
|
||||
| HH | 小时，输出两个字符。若不足两位，则前面补零 |
|
||||
| H | 小时，允许一位 |
|
||||
| mm | 分钟，输出两个字符。若不足两位，则前面补零 |
|
||||
| m | 分钟，允许一位 |
|
||||
| ss | 秒数，输出两个字符。若不足两位，则前面补零 |
|
||||
| s | 秒数，允许一位 |
|
||||
|
||||
通过上述格式符组成日期时间字符串，如下所示：
|
||||
|
||||
```
|
||||
// 返回值示例： 2008-08-08 20:08:08
|
||||
format: 'yyyy-MM-dd HH:mm:ss'
|
||||
|
||||
// 返回值示例： 北京时间 6 点 30 分
|
||||
format: '北京时间 H 点 m 分'
|
||||
```
|
||||
|
||||
相关用法可参考： [#示例](#demo-format)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[value](#options.value)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.value" class="ws-anchor">
|
||||
初始值。值支持以下类型：
|
||||
</div>
|
||||
|
||||
- 若为 `string` 类型，则必须和 `format` 属性的格式对应。
|
||||
|
||||
```
|
||||
value: '2018-08-18'
|
||||
```
|
||||
|
||||
- 若为 `date` 对象类型，则赋值 `new Date()` 的实例即可。
|
||||
|
||||
```
|
||||
value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的毫秒数
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>string<br>date</td>
|
||||
<td>
|
||||
|
||||
`new Date()`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isInitValue</td>
|
||||
<td>
|
||||
|
||||
是否将初始值填充在目标元素中，一般配合 `value` 属性使用
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[shortcuts](#options.shortcuts) <sup>2.8+</sup>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.shortcuts" class="ws-anchor">
|
||||
用于开启面板左侧的快捷选择栏。其值配置规则如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
shortcuts: [
|
||||
{
|
||||
text: "快捷选项文本",
|
||||
value: '快捷选项值'
|
||||
},
|
||||
// 更多选项 …
|
||||
]
|
||||
```
|
||||
|
||||
其中 `value` 支持以下类型：
|
||||
|
||||
- 若为 `string` 类型，必须和 `format` 设置的格式对应；
|
||||
- 若为 `date` 对象类型，则可通过操作 `new Date()` 来对选项值进行相应的返回计算；
|
||||
- 若为 `array` 类型，则数组成员可填写开始日期和结束日期。
|
||||
|
||||
详细用法可参考： [#示例](#demo-shortcut)
|
||||
|
||||
</td>
|
||||
<td>string<br>date<br>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>weekStart <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
设置起始周。 支持 0-6 的数字，`0` 即代表从周日开始。
|
||||
|
||||
```
|
||||
weekStart: 1 // 设置周一为起始周
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`0`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isPreview</td>
|
||||
<td>
|
||||
|
||||
用于是否在面板左下角显示当前结果的预览。当 `type:datetime` 时强制为 `false`。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[min / max](#options.minmax)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.min" class="ws-anchor">
|
||||
|
||||
限制可供选择的最小或最大日期时间值。默认值：
|
||||
|
||||
- `min: '1900-1-1'`
|
||||
- `max: '2099-12-31'`
|
||||
|
||||
</div>
|
||||
|
||||
属性值支持以下可选类型：
|
||||
|
||||
- 若值为字符类型，则：年月日必须用 `-` 连接，且时分秒必须用 `:` 连接。 此处无需遵循 `format` 设定的格式；
|
||||
- 若值为整数类型，且数字 ＜ 86400000，则数字代表天数，如： `min: -7` 即代表最小日期在 7 天前，正数代表若干天后；
|
||||
- 若值为整数类型，且数字 ≥ 86400000，则数字代表毫秒数，如：`max: 4073558400000` 即代表最大日期在公元 3000年1月1日。
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
min: '2017-1-1 00:00:00' // 最小日期时间值
|
||||
min: -7 // 最小日期为 7 天前
|
||||
max: 7 // 最大日期为 7 天后
|
||||
```
|
||||
|
||||
相关效果可参考： [#示例](#demo-limit)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>
|
||||
|
||||
自定义弹出组件面板的事件
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`click`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>
|
||||
|
||||
是否在渲染时默认显示组件面板。组件在执行渲染时，默认需通过触发目标元素的事件，方可显示组件面板，而该属性可跳过目标元素的事件，直接显示组件面板。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>position</td>
|
||||
<td>
|
||||
|
||||
设置组件面板的定位方式。支持以下可选值：
|
||||
|
||||
- `absolute` 绝对定位，始终吸附在绑定元素周围。
|
||||
- `fixed` 固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
|
||||
- `static` 静态定位，控件将直接嵌套显示在指定容器中。用法详见：[#示例](#demo-static)
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`absolute`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zIndex</td>
|
||||
<td>
|
||||
|
||||
设置组件面板的层叠顺序。一般用于解决与其它元素的互相被遮掩的问题。若 `positio: 'tatic'` 时，则该属性无效。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`99999999`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[shade](#options.shade) <sup>2.8+</sup></td>
|
||||
|
||||
<td>
|
||||
|
||||
<div id="options.shade" class="ws-anchor">
|
||||
用于开启弹出日期面板时的遮罩。值支持以下可选类型：
|
||||
</div>
|
||||
|
||||
- 若为 `number` 类型，则表示遮罩透明度。如：
|
||||
|
||||
```
|
||||
shade: 0.5
|
||||
```
|
||||
|
||||
- 若为 `array` 类型，则可设置遮罩颜色和透明度，如：
|
||||
|
||||
```
|
||||
shade: [0.5, '#000'] // 遮罩的透明度和背景色
|
||||
```
|
||||
|
||||
效果详见： [#示例](#demo-more)
|
||||
|
||||
</td>
|
||||
<td>number<br>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showBottom</td>
|
||||
<td>
|
||||
|
||||
是否显示组件面板的底部栏
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>btns</td>
|
||||
<td>
|
||||
|
||||
自定义排版组件面板底部栏中的按钮，按钮将按照数组顺序排列。内置按钮名称：`clear,now,confirm` 。
|
||||
|
||||
```
|
||||
// 显示清空、确认按钮
|
||||
btns: ['clear', 'confirm']
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoConfirm <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否在选中目标值时即自动确认。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lang</td>
|
||||
<td>
|
||||
|
||||
设置组件的语言版本。可选值如下：
|
||||
|
||||
- `cn` 中文版
|
||||
- `en` 英文版
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`cn`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[theme](#options.theme)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.theme" class="ws-anchor">
|
||||
|
||||
设置组件面板主题。除了默认主题，还内置主题： `molv` `grid` ，且支持直接传入自定义的主题色。
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
theme: '#FF5722'
|
||||
```
|
||||
|
||||
注 <sup>2.8+</sup> : 多个主题可用数组格式，如：
|
||||
|
||||
```
|
||||
theme: ['grid', '#FF5722']
|
||||
```
|
||||
|
||||
效果及用法详见： [#示例](#demo-theme)
|
||||
|
||||
</td>
|
||||
<td>string<br>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>calendar</td>
|
||||
<td>
|
||||
|
||||
是否显示我国常见的公历节日。当 `lang: 'en'` 时无效。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[mark](#options.mark)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.mark" class="ws-anchor">
|
||||
自定义日期标记。该属性是对 `calendar` 属性的进一步延伸，灵活度更高。属性可批量设置多个日期标记，如：
|
||||
</div>
|
||||
|
||||
```
|
||||
mark: {
|
||||
'0-10-14': '生日', //每年每月的某一天
|
||||
'0-0-10': '工资', // 每月 10 号
|
||||
'2008-8-8': '开幕', // 指定的日期
|
||||
}
|
||||
```
|
||||
|
||||
前缀 `0-` 即代表每年，`0-0-` 即代表每年每月。
|
||||
|
||||
效果详见： [#示例](#demo-mark)
|
||||
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[holidays](#options.holidays) <sup>2.7+</sup>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.holidays" class="ws-anchor">
|
||||
用于标注节假日及补班日。值是一个二维数组，如：
|
||||
</div>
|
||||
|
||||
```
|
||||
holidays: [
|
||||
// 2023 年的节假日
|
||||
['2023-1-1','2023-1-2','2023-1-3'],
|
||||
// 2023 年的补班日
|
||||
['2023-1-28','2023-1-29']
|
||||
]
|
||||
```
|
||||
|
||||
相关日期值可详细参考国家每年公布的法定节假日安排
|
||||
|
||||
效果详见： [#示例](#demo-mark)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[ready](#options.ready)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.ready" class="ws-anchor">
|
||||
组件面板初始打开的回调函数。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
ready: function(date){
|
||||
/* 得到初始的日期时间对象，date 参数格式如下：
|
||||
{
|
||||
year: 2017, // 年
|
||||
month: 8, // 月
|
||||
date: 18, // 日
|
||||
hours: 0, // 时
|
||||
minutes: 0, // 分
|
||||
seconds: 0 // 秒
|
||||
}
|
||||
*/
|
||||
console.log(date);
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[change](#options.change)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.change" class="ws-anchor">
|
||||
日期时间被切换后的回调函数。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
change: function(value, date, endDate){
|
||||
console.log(value); // 日期字符，如： 2017-08-18
|
||||
console.log(date); // 包含年月日时分秒各项值的对象
|
||||
console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[done](#options.done)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.done" class="ws-anchor">
|
||||
日期时间选择完毕的回调函数，点击清空、现在、确定也均会触发。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
done: function(value, date, endDate){
|
||||
console.log(value); // 日期字符，如： 2017-08-18
|
||||
console.log(date); // 包含年月日时分秒各项值的对象
|
||||
console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onConfirm <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
点击底部栏「确定」按钮时的回调函数。返回的参数同 `done`。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onNow <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
点击底部栏「现在」按钮时的回调函数。返回的参数同 `done`。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onClear <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
点击底部栏「清空」按钮时的回调函数。返回的参数同 `done`。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>close <sup>2.7+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
组件面板被关闭（移除）后的回调函数。无返回参数。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '.demo-laydate-item'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-1" placeholder="yyyy年MM月dd日">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-2" placeholder="dd/MM/yyyy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择月份</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-3" placeholder="yyyyMMdd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-4" placeholder="H点m分">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-5" placeholder=" ~ ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-6" placeholder="开始 到 结束">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 自定义格式
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-1',
|
||||
format: 'yyyy年MM月dd日'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-2',
|
||||
format: 'dd/MM/yyyy'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-3',
|
||||
format: 'yyyyMMdd'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-4',
|
||||
type: 'time',
|
||||
format: 'H点m分'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-5',
|
||||
type: 'month',
|
||||
range: '~',
|
||||
format: 'yyyy-MM'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-6',
|
||||
type: 'datetime',
|
||||
range: '到',
|
||||
format: 'yyyy年M月d日H时m分s秒'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">限定可选日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-limit-1" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">前后若干天可选</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-limit-2" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">限定可选时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-limit-3" placeholder="HH:mm:ss">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">
|
||||
这里以控制在 9:30-17:30 为例
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 限定可选日期
|
||||
var ins22 = laydate.render({
|
||||
elem: '#ID-laydate-limit-1',
|
||||
min: '2016-10-14',
|
||||
max: '2080-10-14',
|
||||
ready: function(){
|
||||
ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
|
||||
}
|
||||
});
|
||||
|
||||
// 前后若干天可选，这里以前后 7 天为例
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-limit-2',
|
||||
min: -7,
|
||||
max: 7
|
||||
});
|
||||
|
||||
// 限定可选时间
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-limit-3',
|
||||
type: 'time',
|
||||
min: '09:30:00',
|
||||
max: '17:30:00',
|
||||
btns: ['clear', 'confirm']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">开启公历节日</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-calendar" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义日子</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-mark" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">节假日标注</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-holidays" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 渲染
|
||||
//开启公历节日
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-calendar',
|
||||
calendar: true
|
||||
});
|
||||
|
||||
//自定义重要日子
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-mark',
|
||||
mark: {
|
||||
'0-10-14': '生日'
|
||||
,'0-12-31': '跨年' //每年的日期
|
||||
,'0-0-10': '工资' //每月某天
|
||||
,'0-0-15': '月中'
|
||||
,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
|
||||
,'2099-10-14': '呵呵'
|
||||
},
|
||||
done: function(value, date){
|
||||
// 点击每年的 10月14日，弹出提示语
|
||||
if(date.month === 10 && date.date === 14){
|
||||
layer.msg('这一天是：Layui 的生日');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 节假日和补班日标注
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-holidays',
|
||||
value: '2022-5-21',
|
||||
holidays: [ // v2.7.3 新增
|
||||
// 2022 年的节假日，可参见国家每年公布的法定节假日安排
|
||||
['2022-1-1', '2022-1-2', '2022-1-3', '2022-1-31', '2022-2-1', '2022-2-2', '2022-2-3', '2022-2-4', '2022-2-5', '2022-2-6', '2022-4-3', '2022-4-4', '2022-4-5', '2022-4-30', '2022-5-1', '2022-5-2', '2022-5-3', '2022-5-4', '2022-6-3', '2022-6-4', '2022-6-5', '2022-9-10', '2022-9-11', '2022-9-12', '2022-10-1', '2022-10-2', '2022-10-3', '2022-10-4', '2022-10-5', '2022-10-6', '2022-10-7'],
|
||||
// 2022 年的补班日
|
||||
['2022-1-29', '2022-1-30', '2022-4-2', '2022-4-24', '2022-5-7', '2022-10-8', '2022-10-9']
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">初始赋值</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-value" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">选中后的回调</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-done" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期切换的回调</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-change" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">不出现底部栏</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-bottom" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">只出现确定按钮</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-btns" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义事件</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-trigger" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" id="ID-laydate-more-event-1">点我触发</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-event" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" id="ID-laydate-more-dblclick">双击我触发</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-dblclick-input" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期只读</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-readonly" readonly placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">非 input 元素</label>
|
||||
<div class="layui-input-inline">
|
||||
<div id="ID-laydate-more-div" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">开启遮罩</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-shade" readonly placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-text-em">
|
||||
<sup>2.8+</sup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="margin-bottom: 15px; font-weight: 700;">
|
||||
覆盖实例与解除实例 <sup>2.8+</sup> :
|
||||
</h5>
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<div class="layui-form-label" style="padding: 0; text-align: left;">
|
||||
<select lay-filter="filter-demo-laydate-reset">
|
||||
<option value="year">年份</option>
|
||||
<option value="month">月份</option>
|
||||
<option value="date" selected>日期</option>
|
||||
<option value="time">时间</option>
|
||||
<option value="other">解除</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-reset" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
var form = layui.form;
|
||||
|
||||
// 初始赋值
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-value',
|
||||
value: '2016-10-14',
|
||||
isInitValue: true
|
||||
});
|
||||
|
||||
// 选中后的回调
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-done',
|
||||
done: function(value, date){
|
||||
layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
|
||||
}
|
||||
});
|
||||
|
||||
// 日期切换的回调
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-change',
|
||||
change: function(value, date){
|
||||
layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
|
||||
}
|
||||
});
|
||||
|
||||
// 不出现底部栏
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-bottom',
|
||||
showBottom: false
|
||||
});
|
||||
|
||||
// 只出现确定按钮
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-btns',
|
||||
btns: ['confirm']
|
||||
});
|
||||
|
||||
// 自定义事件
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-trigger',
|
||||
trigger: 'mousedown'
|
||||
});
|
||||
|
||||
// 点我触发
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-event',
|
||||
eventElem: '#ID-laydate-more-event-1',
|
||||
trigger: 'click'
|
||||
});
|
||||
|
||||
// 双击我触发
|
||||
lay('#ID-laydate-more-dblclick').on('dblclick', function(){
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-dblclick-input',
|
||||
show: true,
|
||||
closeStop: '#ID-laydate-more-dblclick',
|
||||
});
|
||||
});
|
||||
|
||||
// 日期只读
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-readonly',
|
||||
trigger: 'click',
|
||||
});
|
||||
|
||||
// 非 input 元素
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-div'
|
||||
});
|
||||
|
||||
// 开启遮罩
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-shade',
|
||||
triggdestroyer: 'click',
|
||||
shade: 0.8 // 遮罩透明度 --- 2.8+
|
||||
});
|
||||
|
||||
// 覆盖实例与销毁实例
|
||||
var inst = laydate.render({
|
||||
elem: '#ID-laydate-more-reset'
|
||||
});
|
||||
form.on("select(filter-demo-laydate-reset)", function (obj) {
|
||||
var value = obj.value;
|
||||
var options = inst.config;
|
||||
var elem = options.elem[0];
|
||||
|
||||
if (value === "other") {
|
||||
laydate.unbind(options.id); // 解绑实例 --- 2.8+
|
||||
elem.focus();
|
||||
} else {
|
||||
// 覆盖渲染
|
||||
laydate.render({
|
||||
elem: elem,
|
||||
type: value,
|
||||
show: true // 渲染即显示
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">中文版</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">国际版</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-demo-en" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-demo'
|
||||
});
|
||||
// 英文版
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-demo-en',
|
||||
lang: 'en'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<div class="layui-form">
|
||||
<h5 style="margin-bottom: 16px;">
|
||||
左右面板<strong class="layui-font-red">独立</strong>选择模式（默认） :
|
||||
</h5>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期范围</label>
|
||||
<div class="layui-inline" id="ID-laydate-range">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="margin-bottom: 16px;">
|
||||
左右面板<strong class="layui-font-red">联动</strong>选择模式 <sup>2.8+</sup> :
|
||||
</h5>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期范围</label>
|
||||
<div class="layui-inline" id="ID-laydate-rangeLinked">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="margin-bottom: 16px;">其他类型的范围选择 :</h5>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-range-year" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-range-month" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-range-time" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 日期范围 - 左右面板独立选择模式
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range',
|
||||
range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
|
||||
});
|
||||
|
||||
// 日期范围 - 左右面板联动选择模式
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-rangeLinked',
|
||||
range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
|
||||
rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
||||
});
|
||||
|
||||
// 年范围
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range-year',
|
||||
type: 'year',
|
||||
range: true
|
||||
});
|
||||
|
||||
// 年月范围
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range-month',
|
||||
type: 'month',
|
||||
range: true
|
||||
});
|
||||
|
||||
// 时间范围
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range-time',
|
||||
type: 'time',
|
||||
range: true
|
||||
});
|
||||
|
||||
// 日期时间范围
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range-datetime',
|
||||
type: 'datetime',
|
||||
range: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,548 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-date">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年份</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-year">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-month">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-time">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-datetime">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间全面板</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-datetime-fullPanel">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-date" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年份范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-year" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-month" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-time" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">日期时间范围</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-datetime" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
var util = layui.util;
|
||||
|
||||
/*
|
||||
* 快捷选项
|
||||
*/
|
||||
|
||||
// 日期
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-date",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "昨天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() - 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{ text: "今天", value: Date.now() },
|
||||
{
|
||||
text: "明天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() + 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
// now.setDate(now.getDate() - 1);
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
return [now];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "上个月的前一天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
now.setDate(now.getDate() - 1);
|
||||
return [now];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "某一天",
|
||||
value: "2016-10-14"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 年份
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-year",
|
||||
type: "year",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "去年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() - 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "明年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() + 1);
|
||||
return now;
|
||||
}()
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 年月
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-month",
|
||||
type: "month",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "下个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() + 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "去年12月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(11);
|
||||
now.setFullYear(now.getFullYear() - 1);
|
||||
return now;
|
||||
}()
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 时间
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-time",
|
||||
type: "time",
|
||||
shortcuts: function(){ // 生成 30 分钟间隔的时间列表
|
||||
var value = [];
|
||||
var now = new Date();
|
||||
now.setHours(0, 0, 0, 0);
|
||||
for (var i = 0; i < 48; i++) {
|
||||
var nowTemp = now.setMinutes(now.getMinutes() + (i ? 30 : 0));
|
||||
var nowTimeStr = util.toDateString(nowTemp, "HH:mm:ss");
|
||||
value.push({
|
||||
text: nowTimeStr,
|
||||
value: nowTimeStr
|
||||
});
|
||||
}
|
||||
return value;
|
||||
}()
|
||||
});
|
||||
|
||||
// 日期时间
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-datetime",
|
||||
type: "datetime",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "昨天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() - 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{ text: "今天", value: Date.now() },
|
||||
{
|
||||
text: "明天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() + 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
// now.setDate(now.getDate() - 1);
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
return [now];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "上个月的前一天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
now.setDate(now.getDate() - 1);
|
||||
return [now];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "某一天",
|
||||
value: "2016-10-14 00:00:00"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// 日期时间全面板
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-datetime-fullPanel",
|
||||
type: "datetime",
|
||||
fullPanel: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "昨天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() - 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{ text: "今天", value: Date.now() },
|
||||
{
|
||||
text: "明天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() + 1);
|
||||
return now;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
// now.setDate(now.getDate() - 1);
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
return [now];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "上个月的前一天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
now.setDate(now.getDate() - 1);
|
||||
return [now];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "某一天",
|
||||
value: "2016-10-14 11:32:32"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// 日期范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-date",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
date1.setMonth(date1.getMonth() - 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "这个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
// date1.setMonth(date1.getMonth() - 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setMonth(date2.getMonth() + 1);
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "下个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
date1.setMonth(date1.getMonth() + 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setMonth(date2.getMonth() + 2);
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}()
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// 年份范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-year",
|
||||
type: "year",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "过去一年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() - 1);
|
||||
return [now, new Date()];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "未来一年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() + 1);
|
||||
return [new Date(), now];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "近三年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() - 3);
|
||||
return [now, new Date()];
|
||||
}()
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 年月范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-month",
|
||||
type: "month",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "去年",
|
||||
value: function(){
|
||||
var date1 = new Date();
|
||||
date1.setFullYear(date1.getFullYear() - 1, 0, 1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
var date2 = new Date();
|
||||
date2.setMonth(0, 1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
return [date1, date2.getTime() - 1];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "明年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() + 1);
|
||||
return [now, now];
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "近三年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() - 3);
|
||||
return [now, new Date()];
|
||||
}()
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 时间范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-time",
|
||||
type: "time",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: '09:30 <p style="text-align: center;">到</p> 11:30',
|
||||
value: (function () {
|
||||
var date1 = new Date();
|
||||
date1.setHours(9, 0, 0, 0);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setHours(11, 30, 0, 0);
|
||||
|
||||
return [date1, date2];
|
||||
})()
|
||||
},
|
||||
{
|
||||
text: '13:00 <p style="text-align: center;">到</p> 15:00',
|
||||
value: (function () {
|
||||
var date1 = new Date();
|
||||
date1.setHours(13, 0, 0, 0);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setHours(15, 0, 0, 0);
|
||||
|
||||
return [date1, date2];
|
||||
})()
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 日期时间范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-datetime",
|
||||
type: "datetime",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
date1.setMonth(date1.getMonth() - 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "这个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
// date1.setMonth(date1.getMonth() - 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setMonth(date2.getMonth() + 1);
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}()
|
||||
},
|
||||
{
|
||||
text: "下个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
date1.setMonth(date1.getMonth() + 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setMonth(date2.getMonth() + 2);
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}()
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<div class="ws-demo-static">
|
||||
<div class="layui-inline" id="ID-laydate-static-1"></div>
|
||||
<div class="layui-inline" id="ID-laydate-static-2"></div>
|
||||
<div class="layui-inline" id="ID-laydate-static-3"></div>
|
||||
<div class="layui-inline" id="ID-laydate-static-4"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 直接嵌套显示
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-static-1',
|
||||
position: 'static'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-static-2',
|
||||
position: 'static',
|
||||
lang: 'en'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-static-3',
|
||||
type: 'month',
|
||||
position: 'static'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-static-4',
|
||||
type: 'time',
|
||||
position: 'static'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">墨绿主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-molv" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义颜色主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-color" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">格子主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-grid" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">混合主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-multi" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 墨绿主题
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-molv',
|
||||
theme: 'molv'
|
||||
});
|
||||
|
||||
// 自定义颜色
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-color',
|
||||
theme: '#FF5722'
|
||||
});
|
||||
|
||||
// 格子主题
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-grid',
|
||||
theme: 'grid'
|
||||
});
|
||||
|
||||
// 混合主题
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-multi',
|
||||
theme: ['molv', 'grid'] // 2.8+ 新增功能
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-year" placeholder="yyyy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-month" placeholder="yyyy-MM">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-time" placeholder="HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<h5 style="margin-bottom: 16px;">
|
||||
同时显示日期和时间选择器（全面板） <sup>2.8+</sup> :
|
||||
</h5>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-datetime-1" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 年选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-year',
|
||||
type: 'year'
|
||||
});
|
||||
|
||||
// 年月选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-month',
|
||||
type: 'month'
|
||||
});
|
||||
|
||||
// 时间选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-time',
|
||||
type: 'time'
|
||||
});
|
||||
|
||||
// 日期时间选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-datetime',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
// 日期时间选择器 - 日期和时间选择器同时显示（全面板）
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-datetime-1',
|
||||
type: 'datetime',
|
||||
fullPanel: true // 2.8+
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
---
|
||||
title: 日期与时间选择器 laydate
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 日期与时间选择器
|
||||
|
||||
> 日期与时间选择器 `laydate` 提供了年、月、日、时、分、秒的多类型选择面板，也是 Layui 的常用组件之一。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true, anchor: null}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<style>
|
||||
.ws-demo-laydate .layui-form-label{width: 100px;}
|
||||
.ws-demo-laydate .layui-form-item{margin-bottom: 0;}
|
||||
.ws-demo-laydate .layui-form-item .layui-inline{margin-bottom: 11px;}
|
||||
.ws-demo-laydate .layui-input-block{margin-left: 130px;}
|
||||
.ws-demo-static .layui-inline{margin: 0 16px 16px 0;}
|
||||
@media screen and (max-width: 450px){
|
||||
.layui-form-item .layui-input-inline{margin-left: 130px;}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="ws-demo-laydate">
|
||||
{{- d.include("docs/laydate/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var laydate = layui.laydate | 获得 `laydate` 模块。 |
|
||||
| [laydate.render(options)](#render) | laydate 组件渲染，核心方法。 |
|
||||
| [laydate.hint(id, opts)](#hint) <sup>2.8+</sup> | 在对应的 laydate 组件面板上弹出提示层。 |
|
||||
| [laydate.getInst(id)](#getInst) <sup>2.8+</sup> | 获取组件对应的渲染实例。 |
|
||||
| [laydate.unbind(id)](#close) <sup>2.8+</sup> | 对目标元素解除当前实例的绑定。 |
|
||||
| [laydate.close(id)](#close) <sup>2.7+</sup> | 关闭日期面板。 |
|
||||
| [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天 |
|
||||
|
||||
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
|
||||
|
||||
`laydate.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
<br>注 <sup>2.8+</sup> : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。
|
||||
|
||||
```
|
||||
<input type="text" id="ID-test-laydate">
|
||||
<input type="text" class="class-test-laydate" lay-options="{value: '2016-10-14'}">
|
||||
<input type="text" class="class-test-laydate" lay-options="{value: '2017-08-21'}">
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
// 单个渲染
|
||||
laydate.render({
|
||||
elem: '#ID-test-laydate'
|
||||
});
|
||||
// 批量渲染
|
||||
laydate.render({
|
||||
elem: '.class-test-laydate'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/laydate/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h3 id="hint" lay-pid="api" class="ws-anchor ws-bold">弹出提示 <sup>2.8+</sup></h3>
|
||||
|
||||
`laydate.hint(id, opts);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||
- 参数 `opts` : 该方法支持的属性可选项，详见下表
|
||||
|
||||
| opts | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| content | 提示内容 | string | - |
|
||||
| ms | 提示层自动消失所需的毫秒数 | number | 3000 |
|
||||
|
||||
该方法用于在指定的日期面板弹出一个提示层。
|
||||
|
||||
```
|
||||
var laydate = layui.laydate;
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 弹出提示
|
||||
laydate.hint('test', {
|
||||
content: '提示内容'
|
||||
});
|
||||
```
|
||||
|
||||
<h3 id="getInst" lay-pid="api" class="ws-anchor ws-bold">获取实例 <sup>2.8+</sup></h3>
|
||||
|
||||
`laydate.getInst(id);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||
|
||||
该方法用于在获取 laydate 对应 id 的渲染实例，以获得该实例对应的成员属性。
|
||||
|
||||
```
|
||||
var laydate = layui.laydate;
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 获取对应的实例
|
||||
var inst = laydate.getInst('test');
|
||||
console.log(inst); // 实例对象
|
||||
```
|
||||
|
||||
|
||||
<h3 id="unbind" lay-pid="api" class="ws-anchor ws-bold">解除实例绑定 <sup>2.8+</sup></h3>
|
||||
|
||||
`laydate.unbind(id);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||
|
||||
该方法用于对目标元素对应的实例的完全解除，即触发元素事件时，不再执行组件渲染。
|
||||
|
||||
```
|
||||
var laydate = layui.laydate;
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 解除对应的实例绑定
|
||||
laydate.unbind('test');
|
||||
```
|
||||
|
||||
|
||||
<h3 id="close" lay-pid="api" class="ws-anchor ws-bold">关闭日期面板 <sup>2.7+</sup></h3>
|
||||
|
||||
`laydate.close(id);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值。 若 `id` 参数不填，则关闭当前打开的日期面板
|
||||
|
||||
该方法用于关闭对应的日期面板
|
||||
|
||||
```
|
||||
var laydate = layui.laydate;
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 关闭对应的日期面板
|
||||
laydate.cllose('test');
|
||||
```
|
||||
|
||||
<h3 id="getEndDate" lay-pid="api" class="ws-anchor ws-bold">获取某月的最后一天</h3>
|
||||
|
||||
`laydate.getEndDate(month, year);`
|
||||
|
||||
- 参数 `month` : 月份，默认为当前月。
|
||||
- 参数 `year` : 年份，默认为今年。
|
||||
|
||||
该方法用于获取某个月份的最后一天
|
||||
|
||||
```
|
||||
var days1 = laydate.getEndDate(10); // 获得 10 月的最后一天为 31 号
|
||||
var days2 = laydate.getEndDate(2, 2080); // 获得 2080 年 2 月的最后一天为 29 号
|
||||
```
|
||||
|
||||
## 贴士
|
||||
|
||||
> laydate 曾经可作为单独组件使用，鉴于维护成本的考量，目前 laydate 组件已完全集成到 Layui 中，而单独版本已不做同步维护。
|
||||
因此，建议直接使用 layui 中 laydate 即可。
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<h2 lay-toc="{id: 'examples', level: 2, hot: true}" class="layui-hide">在线测试</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '在线测试'}, layout: ['preview']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/detail/run.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="type" lay-toc="{level: 2, hot: true}">弹层类型</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '弹层类型'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/type.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-alert" lay-toc="{level: 3}">信息框</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/alert.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-page" lay-toc="{level: 3}">页面层</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/page.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-iframe" lay-toc="{level: 3}">iframe 层</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/iframe.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-load" lay-toc="{level: 3}">加载层</h3>
|
||||
|
||||
为了不影响继续体验，以下每个 loading 示例均会在 3 秒后自动模拟关闭
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/load.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-tips" lay-toc="{level: 3}">Tips 层</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/tips.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-other" lay-toc="{level: 3}">其他层</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/other.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-more" lay-toc="{level: 2, hot: true}">更多演示</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出位置'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/offset.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出方向 <sup>2.8+</sup>'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/direction.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '其他演示'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/more.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-skin" lay-toc="{level: 2, hot: true}">主题风格</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("docs/layer/examples/skin.md") }}
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
### 小贴士
|
||||
|
||||
> 事实上 layer 丰富的基础属性，可足够让您的弹出层变得千变万化，为了避免占用太多篇幅，就不做过多演示了。
|
||||
|
|
@ -0,0 +1,868 @@
|
|||
<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>type</td>
|
||||
<td>
|
||||
|
||||
弹层类型。 可选值有：
|
||||
|
||||
- `0` dialog 信息框
|
||||
- `1` page 页面层
|
||||
- `2` iframe 内联框架层
|
||||
- `3` loading 加载层
|
||||
- `4` tips 贴士层
|
||||
|
||||
`layer` 弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，`layer` 提供的所有的弹出方式均由此衍生。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`0`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>
|
||||
|
||||
弹层标题。其值支持以下可选类型：
|
||||
|
||||
- 若为 `string` 类型 : 则表示为弹层的标题文本，如：
|
||||
|
||||
```
|
||||
title: '标题'
|
||||
```
|
||||
|
||||
- 若为 `array` 类型 : 则可设置标题文本和标题栏 CSS 样式：
|
||||
|
||||
```
|
||||
title: ['标题', 'font-size: 18px;']
|
||||
```
|
||||
|
||||
- 若为 `boolean` 类型 : 则可设为 `false` 不显示标题栏。
|
||||
|
||||
```
|
||||
title: false // 不显示标题栏
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>string<br>array<br>boolean</td>
|
||||
<td>
|
||||
|
||||
`信息`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[content](#options.content)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.content" class="ws-anchor">
|
||||
|
||||
弹层内容。 可传入的值比较灵活，支持以下使用场景：
|
||||
|
||||
- 若 `type: 1`（页面层）: 则 `content` 可传入值如下：
|
||||
|
||||
```
|
||||
// 普通字符
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '传入任意文本或 HTML'
|
||||
});
|
||||
// 捕获页面已存在的 DOM 元素或 jQuery 对象
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: $('#id') // 捕获层
|
||||
});
|
||||
```
|
||||
|
||||
注意： 若采用捕获层，则捕获的元素必须存放在 `<body>` 根节点下，否则可能被父级容器的相对定位所影响。
|
||||
|
||||
</div>
|
||||
|
||||
- 若 `type: 2`（iframe 层）: 则 `content` 可传入值如下：
|
||||
|
||||
```
|
||||
// iframe URL
|
||||
layer.open({
|
||||
type: 2,
|
||||
content: 'http://cn.bing.com' // URL
|
||||
});
|
||||
// 是否屏蔽 iframe 滚动条
|
||||
layer.open({
|
||||
type: 2,
|
||||
// 数组第二个成员设为 no，即屏蔽 iframe 滚动条
|
||||
content: ['http://cn.bing.com', 'yes']
|
||||
});
|
||||
```
|
||||
|
||||
- 若为其他弹层类型，传入普通字符即可。
|
||||
|
||||
相关效果可参考：[#示例](#demo-page)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[area](#options.area)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.area" class="ws-anchor">
|
||||
设置弹层的宽高，其值支持以下可选类型：
|
||||
</div>
|
||||
|
||||
- 若为 `array` 类型，则可同时设置宽高
|
||||
- `area: ['520px', '320px']` 固定宽度和高度
|
||||
- `area: ['auto', '320px']` 宽度自动，高度固定
|
||||
- `area: ['520px', 'auto']` 宽度固定，高度自动
|
||||
- 若为 `string` 类型，则可定义宽度和宽高均自适应：
|
||||
- `area: '520px'` 宽度固定，高度自适应
|
||||
- `area: 'auto'` 宽度和高度均自适应
|
||||
|
||||
</td>
|
||||
<td>array<br>string</td>
|
||||
<td>
|
||||
|
||||
`auto`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxWidth</td>
|
||||
<td>
|
||||
|
||||
弹层的最大宽度。当 `area` 属性值为默认的 `auto'` 时有效。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`360`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxHeight</td>
|
||||
<td>
|
||||
|
||||
弹层的最大高度。当 `area` 属设置高度自适应时有效。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[offset](#options.offset)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.offset" class="ws-anchor">
|
||||
弹层的偏移坐标。 支持以下可选值：
|
||||
</div>
|
||||
|
||||
- `offset: 'auto'` 坐标始终垂直水平居中
|
||||
- `offset: '16px'` 只设置垂直坐标，水平保持居中
|
||||
- `offset: ['16px', '16px']` 设置垂直和水平坐标
|
||||
- `offset: 't'` 上边缘
|
||||
- `offset: 'r'` 右边缘
|
||||
- `offset: 'b'` 下边缘
|
||||
- `offset: 'l'` 左边缘
|
||||
- `offset: 'rt'` 右上角
|
||||
- `offset: 'rb'` 右下角
|
||||
- `offset: 'lt'` 左上角
|
||||
- `offset: 'lb'` 左下角
|
||||
|
||||
当设置边缘坐标时，可配合 `anim` 属性实现抽屉弹出效果。
|
||||
|
||||
</td>
|
||||
<td>string<br>array</td>
|
||||
<td>
|
||||
|
||||
`auto`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[anim](#options.anim)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.anim" class="ws-anchor">
|
||||
弹层的出场动画。支持以下可选值：
|
||||
</div>
|
||||
|
||||
- `anim: 0` 平滑放大。默认
|
||||
- `anim: 1` 从上掉落
|
||||
- `anim: 2` 从最底部往上滑入
|
||||
- `anim: 3` 从左滑入
|
||||
- `anim: 4` 从左翻滚
|
||||
- `anim: 5` 渐显
|
||||
- `anim: 6` 抖动
|
||||
|
||||
边缘抽屉动画 <sup>2.8+</sup>：
|
||||
|
||||
- `anim: 'slideDown'` 从上边缘往下
|
||||
- `anim: 'slideLeft'` 从右边缘往左
|
||||
- `anim: 'slideUp'` 从下边缘往上
|
||||
- `anim: 'slideRight'` 从左边缘往右
|
||||
|
||||
抽屉动画一般配合 `offset` 属性实现边缘弹出。[#详见示例](#demo-more)
|
||||
|
||||
|
||||
</td>
|
||||
<td>number<br>string</td>
|
||||
<td>
|
||||
|
||||
`0`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isOutAnim</td>
|
||||
<td>
|
||||
|
||||
是否开启弹层关闭时的动画。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxmin</td>
|
||||
<td>
|
||||
|
||||
是否开启标题栏的最大化和最小化图标。
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[closeBtn](#options.closeBtn)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.closeBtn" class="ws-anchor">
|
||||
是否开启标题栏的关闭图标，或设置关闭图标风格。
|
||||
</div>
|
||||
|
||||
- `closeBtn: 0` 不显示关闭图标
|
||||
- `closeBtn: 1` 关闭图标默认风格
|
||||
- `closeBtn: 2` 关闭图标风格二
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`1`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[icon](#options.icon)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.icon" class="ws-anchor">
|
||||
提示图标。 信息框和加载层的私有参数。
|
||||
</div>
|
||||
|
||||
- 若为信息框，支持传入 `0-6` 的可选值。<br>默认为 `-1`，即不显示图标。
|
||||
- 若为加载层，支持传入 `0-2` 的可选值
|
||||
|
||||
```
|
||||
// eg1
|
||||
layer.alert('成功提示', {icon: 1});
|
||||
|
||||
// eg2
|
||||
layer.msg('开心表情', {icon: 6});
|
||||
|
||||
// eg3
|
||||
layer.load(1); // 加载层风格一
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`-1`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[btn](#options.btn)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.btn" class="ws-anchor">
|
||||
自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如：
|
||||
</div>
|
||||
|
||||
```
|
||||
// eg1
|
||||
layer.confirm('询问框？', {
|
||||
btn: ['按钮1', '按钮2', '按钮3']
|
||||
});
|
||||
// eg2
|
||||
layer.open({
|
||||
content: 'test',
|
||||
btn: ['按钮1', '按钮2', '按钮3'],
|
||||
// 按钮1 的回调
|
||||
btn1: function(index, layero, that){},
|
||||
btn2: function(index, layero, that){
|
||||
// 按钮2 的回调
|
||||
// return false // 点击该按钮后不关闭弹层
|
||||
},
|
||||
btn3: function(index, layero, that){
|
||||
// 按钮3 的回调
|
||||
// return false // 点击该按钮后不关闭弹层
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[btnAlign](#options.btnAlign)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.btnAlign" class="ws-anchor">
|
||||
按钮水平对其方式。支持以下可选值：
|
||||
</div>
|
||||
|
||||
- `btnAlign: 'l'` 按钮左对齐
|
||||
- `btnAlign: 'c'` 按钮水平居中对齐
|
||||
- `btnAlign: 'r'` 按钮右对齐。默认值，不用设置
|
||||
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`r`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[skin](#options.skin)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.skin" class="ws-anchor">
|
||||
弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：
|
||||
</div>
|
||||
|
||||
- `layui-layer-molv` 墨绿主题
|
||||
- `layui-layer-lan` 深蓝主题
|
||||
- `layui-layer-win10` Windows 10 主题 <sup>2.8+</sup>
|
||||
|
||||
还可传入其他任意 className 来自定义主题。 参考：[#示例](#demo-skin)
|
||||
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[shade](#options.shade)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.shade" class="ws-anchor">
|
||||
弹层的遮罩。 支持以下写法：
|
||||
</div>
|
||||
|
||||
- `shade: 0.3` 设置遮罩深色背景的透明度
|
||||
- `shade: [0.3, '#FFF']` 设置遮罩透明度和颜色值
|
||||
- `shade: 0` 不显示遮罩
|
||||
|
||||
</td>
|
||||
<td>number<br>array</td>
|
||||
<td>
|
||||
|
||||
`0.3`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shadeClose</td>
|
||||
<td>
|
||||
|
||||
是否点击遮罩时关闭弹层。当遮罩存在时有效。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>time</td>
|
||||
<td>
|
||||
|
||||
弹层自动关闭所需的毫秒数。 如 `time: 3000` ，即代表 3 秒后自动关闭。 提示框、加载层、Tips 层三种弹出模式默认开启。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`0`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>
|
||||
|
||||
弹层的 ID 值。一般用于防止页面层或 iframe 层的重复弹出。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fixed</td>
|
||||
<td>
|
||||
|
||||
弹层是否固定定位，即始终显示在页面可视区域。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zIndex</td>
|
||||
<td>
|
||||
|
||||
弹层的初始层叠顺序值。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`19891014`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>resize</td>
|
||||
<td>
|
||||
|
||||
是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scrollbar</td>
|
||||
<td>
|
||||
|
||||
打开弹层时，是否允许浏览器出现滚动条。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>minStack <sup>2.6+</sup></td>
|
||||
<td>
|
||||
|
||||
点击标题栏的最小化时，是否从页面左下角堆叠排列。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>removeFocus <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否移除弹层触发元素的焦点，避免按回车键时重复弹出。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>move</td>
|
||||
<td>
|
||||
|
||||
绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置 `move: false` 禁止拖拽。
|
||||
用法参考：[#示例](#demo-page)
|
||||
|
||||
</td>
|
||||
<td>string<br>DOM<br>boolean</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>moveOut</td>
|
||||
<td>
|
||||
|
||||
否允许拖拽到窗口外
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tips</td>
|
||||
<td>
|
||||
|
||||
设置 tips 层的吸附位置和背景色，tips 层的私有属性。
|
||||
|
||||
- 若为 `number` 类型，则支持 `1-4` 的可选值，分别代表*上右下左*的吸附位置。如： `tips: 1`
|
||||
- 若为 `array` 类型，则支持设置吸附位置和背景色，如：
|
||||
|
||||
```
|
||||
tips: [1, '#000'] // 吸附在上的深色贴士层
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>number<br>array</td>
|
||||
<td>
|
||||
|
||||
`2`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tipsMore</td>
|
||||
<td>
|
||||
|
||||
是否允许同时存在多个 tips 层，即不销毁上一个 tips。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[success](#options.success)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.success" class="ws-anchor">
|
||||
打开弹层成功后的回调函数。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '内容',
|
||||
success: function(layero, index, that){
|
||||
// 弹层的最外层元素的 jQuery 对象
|
||||
console.log(layero);
|
||||
// 弹层的索引值
|
||||
console.log(index);
|
||||
// 弹层内部原型链中的 this --- 2.8+
|
||||
console.log(that);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[yes](#options.yes)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.yes" class="ws-anchor">
|
||||
|
||||
点击「确定」按钮的回调函数。返回的参数同 `success`
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
content: '内容',
|
||||
yes: function(index, layero, that){
|
||||
// do something
|
||||
layer.close(index); // 关闭弹层
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[cancel](#options.cancel)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.cancel" class="ws-anchor">
|
||||
点击标题栏关闭按钮的回调函数。返回的参数同 `success`
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
content: '内容',
|
||||
cancel: function(index, layero, that){
|
||||
if(confirm('确定要关闭么')){
|
||||
layer.close(index);
|
||||
}
|
||||
return false; // 阻止默认关闭行为
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[end](#options.end)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.end" class="ws-anchor">
|
||||
弹层被关闭且销毁后的回调函数。
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
content: '内容',
|
||||
end: function(){
|
||||
console.log('弹层已被移除');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[moveEnd](#options.moveEnd)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.moveEnd" class="ws-anchor">
|
||||
弹层拖拽完毕后的回调函数。
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '内容',
|
||||
moveEnd: function(layero){
|
||||
console.log('拖拽完毕');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[resizing](#options.resizing)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.resizing" class="ws-anchor">
|
||||
弹层拉伸过程中的回调函数
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '内容',
|
||||
resizing: function(layero){
|
||||
console.log('拉伸中');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[full](#options.full)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.full" class="ws-anchor">
|
||||
|
||||
弹层最大化后的回调函数。返回的参数同 `success`
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '内容',
|
||||
full: function(layero, index, that){
|
||||
console.log('弹层已最大化');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[min](#options.min)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.min" class="ws-anchor">
|
||||
|
||||
弹层最小化后的回调函数。返回的参数同 `success`
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '内容',
|
||||
min: function(layero, index, that){
|
||||
// do something
|
||||
// return false; // 阻止默认最小化
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[restore](#options.restore)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.restore" class="ws-anchor">
|
||||
弹层被还原后的回调函数。返回的参数同 `success`
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '内容',
|
||||
restore: function(layero, index, that){
|
||||
console.log('弹层已还原');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<textarea class="layui-textarea ws-demo-editor" id="ID-demo-editor" >
|
||||
// 在此处输入 layer 的任意代码
|
||||
layer.open({
|
||||
type: 1, // page 层类型
|
||||
area: ['500px', '300px'],
|
||||
title: 'Hello layer',
|
||||
shade: 0.6, // 遮罩透明度
|
||||
shadeClose: true, // 点击遮罩区域，关闭弹层
|
||||
maxmin: true, // 允许全屏最小化
|
||||
anim: 0, // 0-6 的动画形式，-1 不开启
|
||||
content: '<div style="padding: 32px;">一个普通的页面层，传入了自定义的 HTML</div>'
|
||||
});</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="layui-btn" id="ID-demo-run">运行效果</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var layer = layui.layer;
|
||||
|
||||
$('#ID-demo-run').on('click', function(){
|
||||
var code = $('#ID-demo-editor').val();
|
||||
try {
|
||||
new Function(code)();
|
||||
} catch(e) {
|
||||
layer.alert('语句异常：'+ e.message, {icon: 2})
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert">对话框带图标</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">询问框</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-dark">深色提示框</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-light">浅色提示框</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert-btn">自定义按钮</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-count-down">关闭倒计时</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
"test-alert": function(){
|
||||
// 示范对话框所有内置图标
|
||||
var icon = 0;
|
||||
(function changeIcon(){
|
||||
layer.alert('点击确定，继续查看图标', {
|
||||
icon: icon,
|
||||
shadeClose: true,
|
||||
title: 'icon: '+ icon
|
||||
}, ++icon > 6 ? function(){
|
||||
layer.msg('内置图标演示完毕', {icon: 1});
|
||||
} : changeIcon);
|
||||
}());
|
||||
},
|
||||
"test-confirm": function(){
|
||||
layer.confirm('一个询问框的示例？', {icon: 3}, function(){
|
||||
layer.msg('点击确定的回调', {icon: 1});
|
||||
}, function(){
|
||||
layer.msg('点击取消的回调');
|
||||
});
|
||||
},
|
||||
"test-msg-dark": function(){
|
||||
layer.msg('深色提示框的示例');
|
||||
},
|
||||
"test-msg-light": function(){
|
||||
layer.msg('浅色提示框的示例', {icon: 0}, function(){
|
||||
// layer.msg('提示框关闭后的回调');
|
||||
});
|
||||
},
|
||||
"test-alert-btn": function(){
|
||||
layer.alert('自定义按钮', {
|
||||
btn: ['按钮一', '按钮二', '按钮三'],
|
||||
btnAlign: 'c', // 按钮居中显示
|
||||
btn1: function(){
|
||||
layer.msg('按钮一的回调');
|
||||
},
|
||||
btn2: function(){
|
||||
layer.msg('按钮二的回调');
|
||||
},
|
||||
btn3: function(){
|
||||
layer.msg('按钮三的回调');
|
||||
}
|
||||
});
|
||||
},
|
||||
"test-count-down": function(){
|
||||
layer.alert('在标题栏显示自动关闭倒计秒数', {
|
||||
time: 5*1000,
|
||||
success: function(layero, index){
|
||||
var timeNum = this.time/1000, setText = function(start){
|
||||
layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
|
||||
};
|
||||
setText(!0);
|
||||
this.timer = setInterval(setText, 1000);
|
||||
if(timeNum <= 0) clearInterval(this.timer);
|
||||
},
|
||||
end: function(){
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
从页面四个边缘弹出（抽屉效果）：
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-t">从上往下</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-r">从右往左</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-b">从下往上</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-l">从左往右</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var $ = layui.$;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-offset-t': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 't',
|
||||
anim: 'slideDown', // 从上往下
|
||||
area: ['100%', '160px'],
|
||||
shade: 0.1,
|
||||
shadeClose: true,
|
||||
id: 'ID-demo-layer-direction-t',
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
});
|
||||
},
|
||||
'test-offset-r': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 'r',
|
||||
anim: 'slideLeft', // 从右往左
|
||||
area: ['320px', '100%'],
|
||||
shade: 0.1,
|
||||
shadeClose: true,
|
||||
id: 'ID-demo-layer-direction-r',
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
});
|
||||
},
|
||||
'test-offset-b': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 'b',
|
||||
anim: 'slideUp', // 从下往上
|
||||
area: ['100%', '160px'],
|
||||
shade: 0.1,
|
||||
shadeClose: true,
|
||||
id: 'ID-demo-layer-direction-b',
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
});
|
||||
},
|
||||
'test-offset-l': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 'l',
|
||||
anim: 'slideRight', // 从左往右
|
||||
area: ['320px', '100%'],
|
||||
shade: 0.1,
|
||||
shadeClose: true,
|
||||
id: 'ID-demo-layer-direction-l',
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-handle">
|
||||
iframe 的父子操作
|
||||
<span id="ID-test-iframe-mark"></span>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-video">弹出多媒体</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-overflow">禁止 iframe 滚动条</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-curl">弹出任意 URL 页面</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-iframe-handle': function(){
|
||||
layer.open({
|
||||
type: 2,
|
||||
area: ['680px', '520px'],
|
||||
content: '/layer/test/iframe.html',
|
||||
fixed: false, // 不固定
|
||||
maxmin: true,
|
||||
shadeClose: true,
|
||||
btn: ['获取表单值', '取消'],
|
||||
btnAlign: 'c',
|
||||
yes: function(index, layero){
|
||||
// 获取 iframe 的窗口对象
|
||||
var iframeWin = window[layero.find('iframe')[0]['name']];
|
||||
var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
|
||||
var value = elemMark.val();
|
||||
|
||||
if($.trim(value) === '') return elemMark.focus();
|
||||
|
||||
// 显示获得的值
|
||||
layer.msg('获得 iframe 中的输入框标记值：'+ value);
|
||||
}
|
||||
});
|
||||
},
|
||||
'test-iframe-video': function(){
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: false,
|
||||
area: ['630px', '360px'],
|
||||
shade: 0.8,
|
||||
closeBtn: 0,
|
||||
shadeClose: true,
|
||||
content: '//player.youku.com/embed/XMzI1NjQyMzkwNA==' // video 地址
|
||||
});
|
||||
layer.msg('点击遮罩区域可关闭');
|
||||
},
|
||||
'test-iframe-overflow': function(){
|
||||
layer.open({
|
||||
type: 2,
|
||||
area: ['360px', '500px'],
|
||||
skin: 'layui-layer-rim', // 加上边框
|
||||
content: ['/layer/test/1.html', 'no'] // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
|
||||
});
|
||||
},
|
||||
'test-iframe-curl': function(){
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: 'iframe 任意 URL',
|
||||
shadeClose: true,
|
||||
maxmin: true, //开启最大化最小化按钮
|
||||
area: ['900px', '600px'],
|
||||
content: 'https://cn.bing.com/'
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-1">风格1</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-2">风格2</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-3">风格3</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-4">风格4</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-load-1': function(){
|
||||
var loadIndex = layer.load(0);
|
||||
// 模拟关闭
|
||||
setTimeout(function(){
|
||||
layer.close(loadIndex)
|
||||
}, 3000);
|
||||
},
|
||||
'test-load-2': function(){
|
||||
var loadIndex = layer.load(1);
|
||||
// 模拟关闭
|
||||
setTimeout(function(){
|
||||
layer.close(loadIndex)
|
||||
}, 3000);
|
||||
},
|
||||
'test-load-3': function(){
|
||||
var loadIndex = layer.load(2);
|
||||
// 模拟关闭
|
||||
setTimeout(function(){
|
||||
layer.close(loadIndex)
|
||||
}, 3000);
|
||||
},
|
||||
'test-load-4': function(){
|
||||
var loadIndex = layer.msg('加载中', {
|
||||
icon: 16,
|
||||
shade: 0.01
|
||||
});;
|
||||
// 模拟关闭
|
||||
setTimeout(function(){
|
||||
layer.close(loadIndex)
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-max">
|
||||
最大化弹出
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-scrollbar">
|
||||
弹出时屏蔽浏览器滚动条
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-lockscreen">
|
||||
页面锁屏 <span class="layui-badge-dot"></span>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-shade">
|
||||
自定义遮罩颜色和透明度
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-stack">
|
||||
<span class="layui-badge-dot"></span> 多窗口模式 + 层叠置顶 + Esc 关闭
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.class-demo-layer-lockscreen{background: url(https://unpkg.com/outeres@0.0.12/img/wallpaper/001.jpg) #16b777; background-size: cover; color: rgba(255,255,255,1);}
|
||||
.class-demo-layer-lockscreen .layui-form{position: absolute; top: 50%; left: 50%; width: 300px; transform: translate(-50%, -50%);}
|
||||
.class-demo-layer-lockscreen .layui-form > div{margin-bottom: 8px;}
|
||||
.class-demo-layer-pin{width: 100%; height: 38px; padding: 0 8px; background-color: rgba(255,255,255,.8); border: none; border-radius: 3px; box-sizing: border-box;}
|
||||
.class-demo-layer-lockscreen .layui-input-suffix{pointer-events: auto; background-color: rgba(0,0,0,.5); border-radius: 0 3px 3px 0;}
|
||||
.class-demo-layer-lockscreen .layui-input-suffix .layui-icon-right{cursor: pointer; color: #fff;}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var form = layui.form;
|
||||
var $ = layui.$;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-more-max': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>',
|
||||
area: ['320px', '195px'], // 初始宽高
|
||||
maxmin: true,
|
||||
success: function(layero, index){
|
||||
layer.full(index); // 最大化
|
||||
}
|
||||
});
|
||||
},
|
||||
'test-more-scrollbar': function(){
|
||||
layer.open({
|
||||
content: '浏览器滚动条已暂时屏蔽，关闭弹层后自动恢复',
|
||||
scrollbar: false
|
||||
});
|
||||
},
|
||||
'test-more-lockscreen': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false, // 禁用标题栏
|
||||
closeBtn: false, // 禁用默认关闭按钮
|
||||
area: ['100%', '100%'],
|
||||
scrollbar: false, // 暂时屏蔽浏览器滚动条
|
||||
anim: -1, // 禁用弹出动画
|
||||
isOutAnim: false, // 禁用关闭动画
|
||||
id: 'ID-layer-demo-inst',
|
||||
skin: 'class-demo-layer-lockscreen', // className
|
||||
content: ['<div class="layui-form">',
|
||||
'<div class="layui-input-wrap">',
|
||||
'<input type="password" class="class-demo-layer-pin" lay-affix="eye">',
|
||||
'<div class="layui-input-suffix">',
|
||||
'<i class="layui-icon layui-icon-right" id="ID-layer-demo-unlock"></i>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div>输入 111111 后回车，即可退出锁屏示例</div>',
|
||||
'</div>'].join(''),
|
||||
success: function(layero, index){
|
||||
var input = layero.find('input');
|
||||
var PASS = '111111';
|
||||
|
||||
form.render(); // 表单组件渲染
|
||||
input.focus();
|
||||
|
||||
// 回车
|
||||
input.on('keyup', function(e){
|
||||
var elem = this;
|
||||
var keyCode = e.keyCode;
|
||||
if(keyCode === 13){
|
||||
if(elem.value === PASS){
|
||||
layer.close(index);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 点击解锁按钮
|
||||
layero.find('#ID-layer-demo-unlock').on('click', function(){
|
||||
if($.trim(input[0].value) === PASS){
|
||||
layer.close(index);
|
||||
layer.closeLast('dialog'); // 关闭最新打开的信息框
|
||||
} else {
|
||||
layer.msg('锁屏密码输入有误', {offset: '16px', anim: 'slideDown'})
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
'test-more-shade': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>',
|
||||
area: ['320px', '195px'], // 初始宽高
|
||||
shade: [0.9, '#000'],
|
||||
shadeClose: true // 点击遮罩区域，关闭弹层
|
||||
});
|
||||
},
|
||||
'test-more-stack': function(){
|
||||
var that = this;
|
||||
|
||||
// 多窗口模式 + 层叠置顶 + Esc 关闭
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '当你选择该窗体时，即会在最顶端',
|
||||
area: ['390px', '260px'],
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
offset: [ // 为了便于演示，此处采用随机坐标
|
||||
Math.random()*($(window).height()-300),
|
||||
Math.random()*($(window).width()-390)
|
||||
],
|
||||
content: '<div style="padding: 16px;">内容标记：'+ new Date().getTime() + '，按 ESC 键可关闭。<br><br>当你的页面有很多很多 layer 窗口，你需要像 Window 窗体那样，点击某个窗口，该窗体就置顶在上面，那么 layer.setTop() 可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优。</div>',
|
||||
btn: ['继续弹出', '全部关闭'], //只是为了演示
|
||||
yes: function(){
|
||||
$(that).click();
|
||||
},
|
||||
btn2: function(){
|
||||
layer.closeAll();
|
||||
},
|
||||
zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
|
||||
success: function(layero, index){
|
||||
layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
|
||||
|
||||
// 记录索引，以便按 esc 键关闭。事件见代码最末尾处。
|
||||
layer.escIndex = layer.escIndex || [];
|
||||
layer.escIndex.unshift(index);
|
||||
// 选中当前层时，将当前层索引放置在首位
|
||||
layero.on('mousedown', function(){
|
||||
var _index = layer.escIndex.indexOf(index);
|
||||
if(_index !== -1){
|
||||
layer.escIndex.splice(_index, 1); //删除原有索引
|
||||
}
|
||||
layer.escIndex.unshift(index); //将索引插入到数组首位
|
||||
});
|
||||
},
|
||||
end: function(){
|
||||
//更新索引
|
||||
if(typeof layer.escIndex === 'object'){
|
||||
layer.escIndex.splice(0, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 多窗口模式 - esc 键
|
||||
$(document).on('keyup', function(e){
|
||||
if(e.keyCode === 27){
|
||||
layer.close(layer.escIndex ? layer.escIndex[0] : 0);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="t">上</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="r">右</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="b">下</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="l">左</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rt">右上</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rb">右下</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lb">左下</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lt">左上</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="auto">正中</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="">任意</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var $ = layui.$;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-offset': function(){
|
||||
var othis = $(this);
|
||||
var offset = othis.data('offset');
|
||||
// 弹出位置
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: offset || ['200px', '280px'], // 详细可参考 offset 属性
|
||||
id: 'ID-demo-layer-offset-'+ offset, // 防止重复弹出
|
||||
content: '<div style="padding: 16px;">'+ othis.text() +'</div>',
|
||||
area: '240px',
|
||||
btn: '关闭全部',
|
||||
btnAlign: 'c', // 按钮居中
|
||||
shade: 0, // 不显示遮罩
|
||||
yes: function(){
|
||||
layer.closeAll();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-tab">tab 层</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-0">prompt - 单行文本框层</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-1">prompt - 密令输入框层</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-2">prompt - 多行文本框层</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos-one">photos - 单张图片层</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos">photos - 多张相册层</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-tips-tab': function(){
|
||||
layer.tab({
|
||||
area: ['600px', '300px'],
|
||||
tab: [{
|
||||
title: 'Title 1',
|
||||
content: '<div style="padding: 16px;">tabs content 111</div>'
|
||||
}, {
|
||||
title: 'Title 2',
|
||||
content: '<div style="padding: 16px;">tabs content 222</div>'
|
||||
}, {
|
||||
title: 'Title 3',
|
||||
content: '<div style="padding: 16px;">tabs content 333</div>'
|
||||
}],
|
||||
shadeClose: true
|
||||
});
|
||||
},
|
||||
'test-tips-prompt-0': function(){
|
||||
layer.prompt({title: '请输入文本'}, function(value, index, elem){
|
||||
if(value === '') return elem.focus();
|
||||
layer.msg('获得：'+ util.escape(value)); // 显示 value
|
||||
// 关闭 prompt
|
||||
layer.close(index);
|
||||
});
|
||||
},
|
||||
'test-tips-prompt-1': function(){
|
||||
layer.prompt({title: '请输入密令', formType: 1}, function(value, index, elem){
|
||||
if(value === '') return elem.focus();
|
||||
layer.msg('获得：'+ util.escape(value)); // 显示 value
|
||||
// 关闭 prompt
|
||||
layer.close(index);
|
||||
});
|
||||
},
|
||||
'test-tips-prompt-2': function(){
|
||||
layer.prompt({title: '请输入文本', formType: 2}, function(value, index, elem){
|
||||
if(value === '') return elem.focus();
|
||||
layer.msg('获得：'+ util.escape(value)); // 显示 value
|
||||
// 关闭 prompt
|
||||
layer.close(index);
|
||||
});
|
||||
},
|
||||
'test-tips-photos-one': function(){
|
||||
layer.photos({
|
||||
photos: {
|
||||
"title": "Photos Demo",
|
||||
"start": 0,
|
||||
"data": [
|
||||
{
|
||||
"alt": "浩瀚宇宙",
|
||||
"pid": 5,
|
||||
"src": "https://unpkg.com/outeres/demo/outer-space.jpg",
|
||||
}
|
||||
]
|
||||
},
|
||||
hideFooter: true // 是否隐藏底部栏 --- 2.8+
|
||||
});
|
||||
},
|
||||
'test-tips-photos': function(){
|
||||
layer.photos({
|
||||
photos: {
|
||||
"title": "Photos Demo",
|
||||
"start": 0,
|
||||
"data": [
|
||||
{
|
||||
"alt": "layer",
|
||||
"pid": 1,
|
||||
"src": "https://unpkg.com/outeres/demo/layer.png",
|
||||
},
|
||||
{
|
||||
"alt": "壁纸",
|
||||
"pid": 3,
|
||||
"src": "https://unpkg.com/outeres/demo/000.jpg",
|
||||
},
|
||||
{
|
||||
"alt": "浩瀚宇宙",
|
||||
"pid": 5,
|
||||
"src": "https://unpkg.com/outeres/demo/outer-space.jpg",
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page">普通页面层</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-wrap">捕获层</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-title">剔除默认标题栏</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-move">绑定弹层的拖拽元素</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-custom">
|
||||
<span class="layui-badge-dot"></span> 弹出任意自定义内容
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="ID-test-layer-wrapper" style="display: none;">
|
||||
<div style="padding:16px;">
|
||||
弹出已经存在于页面中的一段元素<br>
|
||||
通常是放置在 &lt;body&gt; 根节点下
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var form = layui.form;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-page': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
// area: ['420px', '240px'], // 宽高
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
});
|
||||
},
|
||||
'test-page-wrap': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false, // 不显示遮罩
|
||||
content: $('#ID-test-layer-wrapper'), // 捕获的元素
|
||||
end: function(){
|
||||
// layer.msg('关闭后的回调', {icon:6});
|
||||
}
|
||||
});
|
||||
},
|
||||
'test-page-title': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
area: ['420px', '240px'], // 宽高
|
||||
title: false, // 不显示标题栏
|
||||
closeBtn: 0,
|
||||
shadeClose: true, // 点击遮罩关闭层
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容。可点击遮罩区域关闭。</div>'
|
||||
});
|
||||
},
|
||||
'test-page-move': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
area: ['420px', '240px'], // 宽高
|
||||
title: false,
|
||||
content: ['<div style="padding: 11px;">',
|
||||
'任意 HTML 内容',
|
||||
'<div style="padding: 16px 0;">',
|
||||
'<button class="layui-btn" id="ID-test-layer-move">拖拽此处移动弹层</button>',
|
||||
'</div>',
|
||||
'</div>'].join(''),
|
||||
move: '#ID-test-layer-move'
|
||||
});
|
||||
},
|
||||
'test-page-custom': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
area: '350px',
|
||||
resize: false,
|
||||
shadeClose: true,
|
||||
title: 'demo : layer + form',
|
||||
content: `
|
||||
<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
|
||||
<div class="demo-login-container">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
</div>
|
||||
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 10px;">
|
||||
<img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
|
||||
<a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
|
||||
</div>
|
||||
<div class="layui-form-item demo-login-other">
|
||||
<label>社交账号登录</label>
|
||||
<span style="padding: 0 21px 0 6px;">
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
|
||||
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
|
||||
</span>
|
||||
或 <a href="#reg">注册帐号</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
success: function(){
|
||||
// 对弹层中的表单进行初始化渲染
|
||||
form.render();
|
||||
|
||||
// 表单提交事件
|
||||
form.on('submit(demo-login)', function(data){
|
||||
var field = data.field; // 获取表单字段值
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-alert">
|
||||
墨绿与深蓝主题
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10">
|
||||
Windows 10 风格信息框 <span class="layui-badge-dot"></span>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10-page">
|
||||
Win10 风格页面层 <span class="layui-badge-dot"></span>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-custom">自定义任意主题</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 自定义其他任意主题 */
|
||||
.class-layer-demo-custom .layui-layer-title{background-color: #EDEFF2;}
|
||||
.class-layer-demo-custom .layui-layer-btn{padding: 5px 10px 10px;}
|
||||
.class-layer-demo-custom .layui-layer-btn a{background: #fff; border-color: #E9E7E7; color: #333;}
|
||||
.class-layer-demo-custom .layui-layer-btn .layui-layer-btn0{border-color: #FA584D; background-color: #FA584D; color: #fff;}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-skin-alert': function(){
|
||||
layer.alert('墨绿风格，点击继续确认看深蓝', {
|
||||
skin: 'layui-layer-molv' // 样式类名
|
||||
}, function(){
|
||||
layer.alert('深蓝', {
|
||||
skin: 'layui-layer-lan'
|
||||
});
|
||||
});
|
||||
},
|
||||
'test-skin-win10': function(){
|
||||
layer.alert('Windows 10 风格主题', {
|
||||
skin: 'layui-layer-win10', // 2.8+
|
||||
shade: 0.01,
|
||||
btn: ['确定', '取消']
|
||||
})
|
||||
},
|
||||
'test-skin-win10-page': function(){
|
||||
// 此处以一个简单的 Win10 风格记事本为例
|
||||
layer.open({
|
||||
type: 1, // 页面层类型
|
||||
skin: 'layui-layer-win10', // 2.8+
|
||||
shade: 0.01,
|
||||
area: ['50%', '60%'],
|
||||
maxmin: true,
|
||||
title: '*无标题 - 记事本',
|
||||
content: [
|
||||
'<div style="padding: 0 8px; height: 20px; line-height: 20px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box; font-size: 12px;">',
|
||||
// 自定义菜单，此处仅作样式演示，具体功能可自主实现
|
||||
[
|
||||
'<a href="javascript:;">文件(F)</a>',
|
||||
'<a href="javascript:;" >编辑(E)</a> ',
|
||||
'<a href="javascript:;" >格式(O)</a> ',
|
||||
'<a href="javascript:;" >查看(V)</a> ',
|
||||
'<a href="javascript:;" >帮助(H)</a> ',
|
||||
].join(' '),
|
||||
'</div>',
|
||||
'<textarea style="position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); padding: 6px; border: none; resize: none; overflow-y: scroll; box-sizing: border-box;"></textarea>'
|
||||
].join('')
|
||||
});
|
||||
},
|
||||
'test-skin-custom': function(){
|
||||
layer.alert('自定义其他任意主题', {
|
||||
skin: 'class-layer-demo-custom'
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-top">显示在上</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-right">显示在右</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-bottom">显示在下</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-left">显示在左</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-color">自定义背景色</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-more">允许多个 tips</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-tips-top': function(){
|
||||
layer.tips('向上', this, {
|
||||
tips: 1
|
||||
});
|
||||
},
|
||||
'test-tips-right': function(){
|
||||
layer.tips('默认向右', this);
|
||||
},
|
||||
'test-tips-bottom': function(){
|
||||
layer.tips('向下', this, {
|
||||
tips: 3
|
||||
});
|
||||
},
|
||||
'test-tips-left': function(){
|
||||
layer.tips('向左', this, {
|
||||
tips: 4
|
||||
});
|
||||
},
|
||||
'test-tips-color': function(){
|
||||
layer.tips('可自定义任意主题色', this, {
|
||||
tips: [1, '#16b777']
|
||||
});
|
||||
},
|
||||
'test-tips-more': function(){
|
||||
layer.tips('不会关闭之前的 tips', this, {
|
||||
tipsMore: true
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="alert">Alert</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="confirm">Confirm</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="msg">Msg</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="page">Page</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="iframe">Iframe</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="load">Load</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="tips">Tips</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="prompt">Prompt</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="photots">Photots</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 批量事件
|
||||
util.on('lay-on', {
|
||||
alert: function(){
|
||||
layer.alert('对话框内容');
|
||||
},
|
||||
confirm: function(){
|
||||
layer.confirm('一个询问框的示例？', {
|
||||
btn: ['确定', '关闭'] //按钮
|
||||
}, function(){
|
||||
layer.msg('第一个回调', {icon: 1});
|
||||
}, function(){
|
||||
layer.msg('第二个回调', {
|
||||
time: 20000, // 20s 后自动关闭
|
||||
btn: ['明白了', '知道了']
|
||||
});
|
||||
});
|
||||
},
|
||||
msg: function(){
|
||||
layer.msg('一段提示信息');
|
||||
},
|
||||
page: function(){
|
||||
// 页面层
|
||||
layer.open({
|
||||
type: 1,
|
||||
area: ['420px', '240px'], // 宽高
|
||||
content: '<div style="padding: 11px;">任意 HTML 内容</div>'
|
||||
});
|
||||
},
|
||||
iframe: function(){
|
||||
// iframe 层
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: 'iframe test',
|
||||
shadeClose: true,
|
||||
shade: 0.8,
|
||||
area: ['380px', '80%'],
|
||||
content: '/layer/test/1.html' // iframe 的 url
|
||||
});
|
||||
},
|
||||
load: function(){
|
||||
var index = layer.load(0, {shade: false});
|
||||
setTimeout(function(){
|
||||
layer.close(index); // 关闭 loading
|
||||
}, 5000);
|
||||
},
|
||||
tips: function(){
|
||||
layer.tips('一个 tips 层', this, {
|
||||
tips: 1
|
||||
});
|
||||
},
|
||||
prompt: function(){
|
||||
layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
|
||||
layer.close(index);
|
||||
layer.prompt({title: '文本输入框', formType: 2}, function(text, index){
|
||||
layer.close(index);
|
||||
alert('您输入的密令：'+ pass +'；文本：'+ text);
|
||||
});
|
||||
});
|
||||
},
|
||||
photots: function(){
|
||||
layer.photos({
|
||||
photos: {
|
||||
"title": "Photos Demo",
|
||||
"start": 0,
|
||||
"data": [
|
||||
{
|
||||
"alt": "layer",
|
||||
"pid": 1,
|
||||
"src": "https://unpkg.com/outeres/demo/layer.png",
|
||||
},
|
||||
{
|
||||
"alt": "壁纸",
|
||||
"pid": 3,
|
||||
"src": "https://unpkg.com/outeres/demo/000.jpg",
|
||||
},
|
||||
{
|
||||
"alt": "浩瀚宇宙",
|
||||
"pid": 5,
|
||||
"src": "https://unpkg.com/outeres/demo/outer-space.jpg",
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,606 @@
|
|||
---
|
||||
title: 通用弹出层组件 layer
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 弹出层组件 🔥
|
||||
|
||||
> 弹出层组件 `layer` 是 `Layui` 最古老的组件，也是使用覆盖面最广泛的代表性组件。 `layer` 集众多弹层功能为一体，灵活而多样，是许多开发者的网页弹出层的首选交互方案，在各类业务场景都能发挥重要作用。
|
||||
|
||||
|
||||
<h2 id="examples" lay-toc="{anchor: null}">示例</h2>
|
||||
|
||||
点击下述按钮，查看每个示例对应的弹层效果。
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/layer/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var layer = layui.layer | 获得 `layer` 模块。 |
|
||||
| 弹出 : | - |
|
||||
| [layer.open(options)](#open) | 打开弹层，核心方法。下述所有弹出方式均为该方法的二次封装 |
|
||||
| [layer.alert(content, options, yes)](#alert) | 弹出 `dialog` 类型信息框。 |
|
||||
| [layer.confirm(content, options, yes, cancel)](#confirm) | 弹出 `dialog` 类型询问框。 |
|
||||
| [layer.msg(content, options, end)](#msg) | 弹出 `dialog` 类型提示框。 |
|
||||
| [layer.load(icon, options)](#load) | 弹出 `loading` 类型加载层。 |
|
||||
| [layer.tips(content, elem, options)](#tips) | 弹出 `tips` 类型贴士层。 |
|
||||
| [layer.prompt(options, yes)](#prompt) | 弹出 `page` 类型输入框层。 |
|
||||
| [layer.photos(options)](#photos) | 弹出 `page` 类型图片层。 |
|
||||
| [layer.tab(options)](#tab) | 弹出 `page` 类型标签页层。 |
|
||||
| 关闭 : | - |
|
||||
| [layer.close(index)](#close) | 关闭对应的层，核心方法。 |
|
||||
| [layer.closeAll(type)](#closeAll) | 关闭所有对应类型的层。 |
|
||||
| [layer.closeLast(type)](#closeLast) <sup>2.8+</sup> | 关闭最近打开的对应类型的层。 |
|
||||
| 其他 : | - |
|
||||
| [layer.config(options)](#config) | 全局配置默认属性。 |
|
||||
| [layer.ready(callback)](#ready) | 样式初始化就绪。 |
|
||||
| [layer.style(index, css)](#set-style) | 重新设置弹层样式。 |
|
||||
| [layer.title(title, index)](#set-title) | 设置弹层的标题。 |
|
||||
| [layer.getChildFrame(selector, index)](#getChildFrame) | 获取 iframe 页中的元素。 |
|
||||
| [layer.getFrameIndex(window.name)](#getFrameIndex) | 在 iframe 页中获取弹层索引。 |
|
||||
| [layer.iframeAuto(index)](#iframeAuto) | 设置 iframe 层高度自适应。 |
|
||||
| [layer.iframeSrc(index, url)](#iframeSrc) | 重新设置 iframe 层 URL。 |
|
||||
| layer.index | 获取最新弹出层的索引 |
|
||||
| layer.zIndex | 获取最新弹出层的层叠顺序 |
|
||||
| [layer.setTop(layero)](#setTop) | 将对应弹层的层叠顺序为置顶。 |
|
||||
| [layer.full(index)](#full) | 设置弹层最大化尺寸。 |
|
||||
| [layer.min(index)](#min) | 设置弹层最小化尺寸。 |
|
||||
| [layer.restore(index)](#restore) | 还原弹层尺寸。 |
|
||||
|
||||
|
||||
<h2 id="open" lay-toc="{level: 2}">打开弹层</h2>
|
||||
|
||||
`layer.open(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
打开弹层的核心方法，其他不同类型的弹出方法均为该方法的二次封装。
|
||||
|
||||
```
|
||||
// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作
|
||||
var index = layer.open({
|
||||
type: 1, // page 层类型，其他类型详见「基础属性」
|
||||
content: '<div style="padding: 16px;">test</div>'
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">基础属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/layer/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="alert" lay-pid="api" class="ws-anchor ws-bold">弹出信息框</h2>
|
||||
|
||||
`layer.alert(content, options, yes);`
|
||||
|
||||
- 参数 `content` : 弹出内容
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
- 参数 `yes` : 点击确定后的回调函数
|
||||
|
||||
该方法用于弹出 `dialog` 类型信息框（`type: 0`），参数自动向左补位。
|
||||
|
||||
```
|
||||
// eg1
|
||||
layer.alert('一个简单的信息框');
|
||||
// eg2
|
||||
layer.alert('开启图标', {icon: 1}, function(index){
|
||||
// do something
|
||||
// …
|
||||
layer.close(index);
|
||||
});
|
||||
// eg3
|
||||
layer.alert('不开启图标', function(index){
|
||||
// do something
|
||||
// …
|
||||
layer.close(index);
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="confirm" lay-pid="api" class="ws-anchor ws-bold">弹出询问框</h2>
|
||||
|
||||
`layer.confirm(content, options, yes, cancel);`
|
||||
|
||||
- 参数 `content` : 弹出内容
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
- 参数 `yes` : 点击确定后的回调函数
|
||||
- 参数 `cancel` : 点击第二个按钮（默认「取消」）后的回调函数
|
||||
|
||||
该方法用于弹出 `dialog` 类型询问框（`type: 0`），参数自动向左补位。
|
||||
|
||||
```
|
||||
// eg1
|
||||
layer.confirm('确定吗?', {icon: 3, title:'提示'}, function(index){
|
||||
// do something
|
||||
// …
|
||||
layer.close(index);
|
||||
});
|
||||
// eg2
|
||||
layer.confirm('确定吗?', function(index){
|
||||
// do something
|
||||
// …
|
||||
layer.close(index);
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
<h2 id="msg" lay-pid="api" class="ws-anchor ws-bold">弹出提示框</h2>
|
||||
|
||||
`layer.msg(content, options, end);`
|
||||
|
||||
- 参数 `content` : 弹出内容
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
- 参数 `end` : 提示框关闭后的回调函数
|
||||
|
||||
该方法用于弹出 `dialog` 类型提示框（`type: 0`），默认 `3` 秒后自动关闭。参数自动向左补位。
|
||||
|
||||
```
|
||||
// eg1
|
||||
layer.msg('普通提示');
|
||||
// eg2
|
||||
layer.msg('带 icon 的提示', {icon: 6});
|
||||
// eg3
|
||||
layer.msg('关闭后想做些什么', function(){
|
||||
// do something
|
||||
});
|
||||
// eg
|
||||
layer.msg('提示框', {
|
||||
icon: 1,
|
||||
time: 2000 // 设置 2 秒后自动关闭
|
||||
}, function(){
|
||||
// do something
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
<h2 id="load" lay-pid="api" class="ws-anchor ws-bold">弹出加载层</h2>
|
||||
|
||||
`layer.load(icon, options);`
|
||||
|
||||
- 参数 `icon` : 加载图标风格，支持 `0-2` 可选值
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
该方法用于弹出 `load` 类型加载层（`type: 3`）。
|
||||
|
||||
```
|
||||
// eg1
|
||||
var index = layer.load(); // 默认加载图标风格
|
||||
// eg2
|
||||
var index = layer.load(1); // 加载图标风格 1
|
||||
// eg3
|
||||
var index = layer.load(2, {time: 10*1000}); // 加载图标风格，并设置最长等待 10 秒
|
||||
|
||||
// 关闭加载层
|
||||
layer.close(index);
|
||||
```
|
||||
|
||||
<h2 id="tips" lay-pid="api" class="ws-anchor ws-bold">弹出贴士层</h2>
|
||||
|
||||
`layer.tips(content, elem, options);`
|
||||
|
||||
- 参数 `content` : 弹出内容
|
||||
- 参数 `elem` : 吸附的目标元素选择器或对象
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
该方法用于弹出 `tips` 类型贴士层（`type: 4`），默认 `3` 秒后自动关闭。
|
||||
|
||||
```
|
||||
// eg1
|
||||
layer.tips('小贴士', '#id');
|
||||
// eg2
|
||||
$('#id').on('click', function(){
|
||||
var elem = this;
|
||||
layer.tips('小贴士', elem); //在元素的事件回调体中，follow直接赋予this即可
|
||||
});
|
||||
// eg3
|
||||
layer.tips('显示在目标元素上方', '#id', {
|
||||
tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="prompt" lay-pid="api" class="ws-anchor ws-bold">弹出输入框</h2>
|
||||
|
||||
`layer.prompt(options, yes);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。除了支持 [基础属性](#options) 之外，还支持下表私有属性：
|
||||
|
||||
| 私有属性 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| formType | 输入框类型。支持以下可选值：<ul><li> `0` 文本输入框 </li><li> `1` 密令输入框 </li><li> `2` 多行文本输入框 </li></ul> | number | `0` |
|
||||
| value | 输入框初始值 | string | - |
|
||||
| maxlength | 可输入的最大字符长度 | number | `500` |
|
||||
|
||||
|
||||
- 参数 `yes` : 点击确定后的回调函数
|
||||
|
||||
该方法用于弹出输入框层，基于 `type: 1`（即 `page` 层）的自定义内容。 效果参考： [#示例](#demo-other)
|
||||
|
||||
```
|
||||
// eg1
|
||||
layer.prompt(function(value, index, elem){
|
||||
alert(value); // 得到 value
|
||||
layer.close(index); // 关闭层
|
||||
});
|
||||
|
||||
// eg2
|
||||
layer.prompt({
|
||||
formType: 2,
|
||||
value: '初始值',
|
||||
title: '请输入值',
|
||||
area: ['800px', '350px'] // 自定义文本域宽高
|
||||
}, function(value, index, elem){
|
||||
alert(value); // 得到 value
|
||||
layer.close(index); // 关闭层
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="photos" lay-pid="api" class="ws-anchor ws-bold">弹出图片层</h2>
|
||||
|
||||
`layer.photos(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。除了支持 [基础属性](#options) 之外，还支持下表私有属性：
|
||||
|
||||
| 私有属性 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| photos | 图片层的数据源，格式详见下述示例。 | object | - |
|
||||
| tab | 图片层切换后的回调函数，返回的参数见下述示例 | function | - |
|
||||
|
||||
该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。
|
||||
|
||||
**用法一：直接赋值图片数据**。 效果参考： [#示例](#demo-other)
|
||||
|
||||
```
|
||||
layer.photos({
|
||||
photos: { // 图片层的数据源
|
||||
"title": "", // 相册标题
|
||||
"id": 123, // 相册 id
|
||||
"start": 0, // 初始显示的图片序号，默认 0
|
||||
"data": [ // 相册包含的图片，数组格式
|
||||
{
|
||||
"alt": "图片名",
|
||||
"pid": 666, // 图片id
|
||||
"src": "", // 原图地址
|
||||
"thumb": "" // 缩略图地址
|
||||
},
|
||||
// …
|
||||
]
|
||||
},
|
||||
tab: function(data, layero){ // 图片层切换后的回调
|
||||
console.log(data); // 当前图片数据信息
|
||||
console.log(layero); // 图片层的容器对象
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**用法二：绑定页面图片元素**。点击图片时，弹出对应的图片层。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full']}">
|
||||
<textarea>
|
||||
<style>
|
||||
.class-photos-demo img{width: 160px; height: 100px; cursor: pointer;}
|
||||
</style>
|
||||
|
||||
<div id="ID-photos-demo" class="class-photos-demo">
|
||||
<!-- <img src="缩略图" layer-src="大图地址" layer-pid="图片id，可不写" alt="图片名"> -->
|
||||
<img src="https://unpkg.com/outeres/demo/layer.png" layer-src="https://unpkg.com/outeres/demo/layer.png" layer-pid="" alt="layer">
|
||||
<img src="https://unpkg.com/outeres/demo/000.jpg" layer-src="https://unpkg.com/outeres/demo/000.jpg" layer-pid="" alt="壁纸">
|
||||
<img src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-pid="" alt="星空如此深邃">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
// 图片层
|
||||
layer.photos({
|
||||
photos: '#ID-photos-demo'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="tab" lay-pid="api" class="ws-anchor ws-bold">弹出标签层</h2>
|
||||
|
||||
`layer.tab(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。除了支持 [基础属性](#options) 之外，还支持下表私有属性：
|
||||
|
||||
| 私有属性 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| tab | 标签层的数据源，格式详见下述示例。 | array | - |
|
||||
|
||||
该方法用于弹出标签层，基于 `type: 1`（即 `page` 层）的自定义内容。 效果参考： [#示例](#demo-other)
|
||||
|
||||
```
|
||||
layer.tab({
|
||||
area: ['600px', '300px'],
|
||||
tab: [{ // 标签层的数据源
|
||||
title: '标题 1',
|
||||
content: '内容 1'
|
||||
}, {
|
||||
title: '标题 2',
|
||||
content: '内容 2'
|
||||
}, {
|
||||
title: '标题 3',
|
||||
content: '内容 3'
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
<h2 id="close" lay-toc="{level: 2}">关闭弹层</h2>
|
||||
|
||||
`layer.close(index);`
|
||||
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
|
||||
该方法用于关闭对应的弹层。
|
||||
|
||||
```
|
||||
// 每一种弹层调用方式，都会返回一个 index
|
||||
var index1 = layer.open();
|
||||
var index2 = layer.alert();
|
||||
var index3 = layer.load();
|
||||
var index4 = layer.tips();
|
||||
|
||||
// 关闭对应的弹层
|
||||
layer.close(index1);
|
||||
```
|
||||
|
||||
在 iframe 弹层页面中关闭自身
|
||||
|
||||
```
|
||||
var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
|
||||
parent.layer.close(index); // 再执行关闭
|
||||
```
|
||||
|
||||
|
||||
<h2 id="closeAll" lay-pid="api" class="ws-anchor ws-bold">关闭所有层</h2>
|
||||
|
||||
`layer.closeAll(type);`
|
||||
|
||||
- 参数 `type` : 弹层的类型。可选值：`dialog,page,iframe,loading,tips`
|
||||
|
||||
该方法用于关闭所有同类型的弹层。
|
||||
|
||||
```
|
||||
layer.closeAll(); // 关闭所有类型的层
|
||||
layer.closeAll('dialog'); // 关闭所有的信息框
|
||||
layer.closeAll('page'); // 关闭所有的页面层
|
||||
layer.closeAll('iframe'); // 关闭所有的 iframe 层
|
||||
layer.closeAll('loading'); // 关闭所有的加载层
|
||||
layer.closeAll('tips'); // 关闭所有的 tips 层
|
||||
```
|
||||
|
||||
<h2 id="closeLast" lay-pid="api" class="ws-anchor ws-bold">关闭最近一次打开的层 <sup>2.8+</sup></h2>
|
||||
|
||||
`layer.closeLast(type);`
|
||||
|
||||
- 参数 `type` : 弹层的类型。可选值：`dialog,page,iframe,loading,tips`
|
||||
|
||||
该方法用于关闭最近一次打开的对应类型的层。
|
||||
|
||||
```
|
||||
layer.closeLast('dialog'); // 关闭最近一次打开的信息框
|
||||
layer.closeLast('page'); // 关闭最近一次打开的页面层
|
||||
layer.closeLast('iframe'); // 关闭最近一次打开的 iframe 层
|
||||
layer.closeLast('loading'); // 关闭最近一次打开的加载层
|
||||
layer.closeLast('tips'); // 关闭最近一次打开的 tips 层
|
||||
```
|
||||
|
||||
<h2 id="config" lay-pid="api" class="ws-anchor ws-bold">全局配置默认属性</h2>
|
||||
|
||||
`layer.config(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
该方法用于全局设置弹层的默认基础属性。
|
||||
|
||||
```
|
||||
layer.config({
|
||||
title: '默认标题',
|
||||
skin: '', // 设置默认主题
|
||||
// … 其他任意基础属性
|
||||
})
|
||||
```
|
||||
|
||||
<h2 id="ready" lay-pid="api" class="ws-anchor ws-bold">样式初始化就绪</h2>
|
||||
|
||||
`layer.ready(callback);`
|
||||
|
||||
- 参数 `callback` : 初始化完毕后的回调函数
|
||||
|
||||
该方法一般是在源码方式引入 `layui.js`，且要在页面初始即弹出层时使用，以确保弹层所依赖的样式文件先行加载。 而引入 release 版的 `layui.js` 则无需使用该方法，因为弹层样式已经统一合并到 `layui.css` 中。
|
||||
|
||||
```
|
||||
// 页面初始弹出层
|
||||
layer.ready(function(){
|
||||
layer.alert('对话框内容');
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="set-style" lay-pid="api" class="ws-anchor ws-bold">重新设置弹层样式</h2>
|
||||
|
||||
`layer.style(index, css);`
|
||||
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
- 参数 `css` : 要设置的 `css` 属性
|
||||
|
||||
该方法对 `loading` 层和 `tips` 层无效。
|
||||
|
||||
```
|
||||
// 打开弹层
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
content: '内容'
|
||||
});
|
||||
|
||||
// 重新给对应层设定 width、top 等
|
||||
layer.style(index, {
|
||||
width: '1000px',
|
||||
top: '10px'
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="set-title" lay-pid="api" class="ws-anchor ws-bold">设置弹层的标题</h2>
|
||||
|
||||
`layer.title(title, index);`
|
||||
|
||||
- 参数 `title` : 标题
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
|
||||
```
|
||||
// 打开弹层
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
content: '内容'
|
||||
});
|
||||
|
||||
// 重新设置标题
|
||||
layer.title('新标题', index)
|
||||
```
|
||||
|
||||
<h2 id="getChildFrame" lay-pid="api" class="ws-anchor ws-bold">获取 iframe 页中的元素</h2>
|
||||
|
||||
`layer.getChildFrame(selector, index);`
|
||||
|
||||
- 参数 `selector` : iframe 子页面的选择器或元素对象
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
|
||||
该方法用于在父页面获取 iframe 子页面中的元素
|
||||
|
||||
```
|
||||
layer.open({
|
||||
type: 2, // iframe 层
|
||||
content: '/layer/test/iframe.html',
|
||||
success: function(layero, index){
|
||||
// 获取 iframe 中 body 元素的 jQuery 对象
|
||||
var body = layer.getChildFrame('body', index);
|
||||
// 给 iframe 页中的某个输入框赋值
|
||||
body.find('input').val('Hello layer.');
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="getFrameIndex" lay-pid="api" class="ws-anchor ws-bold">在 iframe 页中获取弹层索引</h2>
|
||||
|
||||
`layer.getFrameIndex(window.name);`
|
||||
|
||||
- 参数 `window.name` : 当前 iframe 窗口的 `name` 属性值
|
||||
|
||||
该方法用于在 iframe 页面内部获取当前 iframe 弹层的索引，以便关闭自身。
|
||||
|
||||
```
|
||||
var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引
|
||||
parent.layer.close(index); // 关闭当前 iframe 弹层
|
||||
```
|
||||
|
||||
<h2 id="iframeAuto" lay-pid="api" class="ws-anchor ws-bold">设置 iframe 层高度自适应</h2>
|
||||
|
||||
`layer.iframeAuto(index);`
|
||||
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
|
||||
该方法可让 iframe 高度跟随内容自适应
|
||||
|
||||
```
|
||||
layer.open({
|
||||
type: 2, // iframe 层
|
||||
content: '/layer/test/iframe.html',
|
||||
area: '600px', // 弹层初始宽度
|
||||
success: function(layero, index, that){
|
||||
layer.iframeAuto(index); // 让 iframe 高度自适应
|
||||
that.offset(); // 重新自适应弹层坐标
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="iframeSrc" lay-pid="api" class="ws-anchor ws-bold">重新设置 iframe 层 URL</h2>
|
||||
|
||||
`layer.iframeSrc(index, url);`
|
||||
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
- 参数 `url` : URL 地址
|
||||
|
||||
```
|
||||
// 打开弹层
|
||||
var index = layer.open({
|
||||
type: 2, // iframe 层
|
||||
content: '/layer/test/iframe.html'
|
||||
});
|
||||
// 重置 iframe 页面 URL
|
||||
layer.iframeSrc(index, 'https://cn.bing.com/');
|
||||
```
|
||||
|
||||
<h2 id="setTop" lay-pid="api" class="ws-anchor ws-bold">置顶弹层</h2>
|
||||
|
||||
`layer.setTop(layero);`
|
||||
|
||||
- 参数 `layero` : layer 最外层容器的元素对象，一般可通过各个回调函数返回的参数获取。
|
||||
|
||||
该方法一般用于多弹层模式时，实现点击某个弹层让其层叠顺序置顶。效果参考：[#示例](#demo-more)
|
||||
|
||||
```
|
||||
// 多弹层模式的层叠顺序置顶
|
||||
layer.open({
|
||||
type: 1, // 页面层
|
||||
shade: false,
|
||||
area: ['520px', '320px'],
|
||||
maxmin: true,
|
||||
content: '<div style="padding: 16px;">多弹层模式的层叠顺序置顶</div>',
|
||||
zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
|
||||
success: function(layero){
|
||||
layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
<h2 id="full" lay-pid="api" class="ws-anchor ws-bold">设置弹层最大化</h2>
|
||||
|
||||
`layer.full(index);`
|
||||
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
|
||||
```
|
||||
// 打开弹窗
|
||||
var index = layer.open({
|
||||
type: 1, // 页面层
|
||||
content: '弹层内容'
|
||||
});
|
||||
// 设置弹层最大化
|
||||
layer.full(index);
|
||||
```
|
||||
|
||||
<h2 id="min" lay-pid="api" class="ws-anchor ws-bold">设置弹层最小化</h2>
|
||||
|
||||
`layer.min(index);`
|
||||
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
|
||||
```
|
||||
// 打开弹窗
|
||||
var index = layer.open({
|
||||
type: 1, // 页面层
|
||||
content: '弹层内容'
|
||||
});
|
||||
// 设置弹层最大化
|
||||
layer.min(index);
|
||||
```
|
||||
|
||||
<h2 id="restore" lay-pid="api" class="ws-anchor ws-bold">还原弹层</h2>
|
||||
|
||||
`layer.restore(index);`
|
||||
|
||||
- 参数 `index` : 打开弹层时返回的唯一索引
|
||||
|
||||
当弹层最大化或最小化状态时，执行该方法可还原弹层。
|
||||
|
||||
|
||||
## 贴士
|
||||
|
||||
> layer 曾经可作为单独组件使用，鉴于维护成本的考量，目前 layer 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 layer 即可。
|
||||
|
|
@ -0,0 +1,541 @@
|
|||
---
|
||||
title: 栅格布局
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 栅格布局
|
||||
|
||||
> Layui 栅格系统是一套具备响应式能力的布局方案，采用业界比较常用的容器横向 `12` 等分规则，预设了 `5*12` 种 CSS 排列类，内置多种大小尺寸的多终端适配，能很好地实现响应式布局，这意味着一套系统，能同时适配于电脑的不同大小屏幕和手机、平板等移动屏幕，使得网页布局变得更加灵活，同时也极大地降低了 `HTML/CSS` 代码的耦合。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}">示例</h2>
|
||||
|
||||
> 贴士：以下示例中的*背景色*仅仅只是为了让布局效果显得更加直观，实际使用时并不需要背景色。
|
||||
|
||||
<style>
|
||||
.layui-code-item-preview .layui-row{margin-bottom: 11px;}
|
||||
.layui-code-item-preview .layui-row:last-child{margin-bottom: 0;}
|
||||
</style>
|
||||
|
||||
- 始终等比例水平排列：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'max-height: 450px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs6">
|
||||
<div class="grid-demo grid-demo-bg1">6/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6">
|
||||
<div class="grid-demo">6/12</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs3">
|
||||
<div class="grid-demo grid-demo-bg1">3/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="grid-demo">3/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="grid-demo grid-demo-bg1">3/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="grid-demo">3/12</div>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 移动设备、桌面端的组合响应式展现：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs12 layui-col-md8">
|
||||
<div class="grid-demo grid-demo-bg1">xs:12/12 | md:8/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md4">
|
||||
<div class="grid-demo">xs:6/12 | md:4/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md12">
|
||||
<div class="grid-demo grid-demo-bg2">xs:6/12 | md:12/12</div>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 移动设备、平板、桌面端的复杂组合响应式展现：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
|
||||
<div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
|
||||
<div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
|
||||
<div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
|
||||
<div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
|
||||
<div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12</div>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 常规布局：从小屏幕堆叠到桌面水平排列：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo grid-demo-bg1">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo grid-demo-bg1">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo grid-demo-bg1">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo grid-demo-bg1">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo grid-demo-bg1">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo grid-demo-bg1">1/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md1">
|
||||
<div class="grid-demo">1/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md9">
|
||||
<div class="grid-demo grid-demo-bg1">75%</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo">25%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md4">
|
||||
<div class="grid-demo grid-demo-bg1">33.33%</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="grid-demo">33.33%</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="grid-demo grid-demo-bg1">33.33%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md6">
|
||||
<div class="grid-demo grid-demo-bg1">50%</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="grid-demo">50%</div>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 列间隔：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row layui-col-space1">
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo grid-demo-bg1">1/4</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo">1/4</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo grid-demo-bg1">1/4</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-md4">
|
||||
<div class="grid-demo grid-demo-bg1">1/3</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="grid-demo">1/3</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="grid-demo grid-demo-bg1">1/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md9">
|
||||
<div class="grid-demo grid-demo-bg1">9/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo">3/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md7">
|
||||
<div class="grid-demo grid-demo-bg1">7/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md5">
|
||||
<div class="grid-demo">5/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space30">
|
||||
<div class="layui-col-md7">
|
||||
<div class="grid-demo grid-demo-bg1">7/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md5">
|
||||
<div class="grid-demo">5/12</div>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 列偏移
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md4">
|
||||
<div class="grid-demo grid-demo-bg1">4/12</div>
|
||||
</div>
|
||||
<div class="layui-col-md4 layui-col-md-offset4">
|
||||
<div class="grid-demo">偏移4列</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md3 layui-col-md-offset3">
|
||||
<div class="grid-demo grid-demo-bg1">偏移3列</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo">不便宜</div>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 栅格嵌套：
|
||||
|
||||
> 理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md5">
|
||||
<div class="layui-row grid-demo">
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo grid-demo-bg1">内部列</div>
|
||||
</div>
|
||||
<div class="layui-col-md9">
|
||||
<div class="grid-demo grid-demo-bg2">内部列</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="grid-demo grid-demo-bg3">内部列</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md7">
|
||||
<div class="layui-row grid-demo grid-demo-bg1">
|
||||
<div class="layui-col-md12">
|
||||
<div class="grid-demo">内部列</div>
|
||||
</div>
|
||||
<div class="layui-col-md9">
|
||||
<div class="grid-demo grid-demo-bg2">内部列</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="grid-demo grid-demo-bg3">内部列</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
- 流体容器（宽度自适应，不固定）：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-sm3">
|
||||
<div class="grid-demo grid-demo-bg1">25%</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="grid-demo">25%</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="grid-demo grid-demo-bg1">25%</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3">
|
||||
<div class="grid-demo">25%</div>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<br>
|
||||
|
||||
<h2 id="rule" lay-toc="">栅格布局规则</h2>
|
||||
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="50">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>采用 <em>layui-row</em> 来定义行，如：<em><div class="layui-row"></div></em> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>
|
||||
采用类似 <em>layui-col-md*</em> 这样的预设类来定义一组列（column），且放在行（row）内。其中：
|
||||
<div class="layui-text">
|
||||
<ul>
|
||||
<li>变量<em>md</em> 代表的是不同屏幕下的标记（可选值见下文）</li>
|
||||
<li>变量<em>*</em> 代表的是该列所占用的 12 等分数（如 6/12），可选值为 1 - 12</li>
|
||||
<li>如果多个列的“等分数值”总和等于 12，则刚好满行排列。如果大于12，多余的列将自动另起一行。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>列可以同时出现最多 5 种不同的组合，分别是：xs / sm / md / lg / xl <sup>2.8+</sup>，以在不同尺寸屏幕下进行自动适配。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>可对列追加类似 <em>layui-col-space5</em>、 <em>layui-col-md-offset3</em> 这样的预设类来定义列的间距和偏移。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5.</td>
|
||||
<td>最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="resp" lay-toc="">响应式规则</h2>
|
||||
|
||||
栅格的响应式能力，得益于 `CSS3` 媒体查询（`Media Queries`），针对不同尺寸的屏幕进行相应的适配处理。
|
||||
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="160">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th>超小屏幕<br>(手机<768px)</th>
|
||||
<th>小屏幕<br>(平板≥768px)</th>
|
||||
<th>中等屏幕<br>(桌面≥992px)</th>
|
||||
<th>大型屏幕<br>(桌面≥1200px)</th>
|
||||
<th>超大屏幕<br>(桌面≥1400px)</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><em>layui-container</em></td>
|
||||
<td>auto</td>
|
||||
<td>750px</td>
|
||||
<td>970px</td>
|
||||
<td>1170px</td>
|
||||
<td>1330px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>标记</td>
|
||||
<td>xs</td>
|
||||
<td>sm</td>
|
||||
<td>md</td>
|
||||
<td>lg</td>
|
||||
<td>xl <sup>2.8+</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>列对应类</td>
|
||||
<td>layui-col-xs*</td>
|
||||
<td>layui-col-sm*</td>
|
||||
<td>layui-col-md*</td>
|
||||
<td>layui-col-lg*</td>
|
||||
<td>layui-col-xl*</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>总列数</td>
|
||||
<td colspan="5">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>响应行为</td>
|
||||
<td>始终按比例水平排列</td>
|
||||
<td colspan="4">在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="class" lay-toc="">响应式公共类</h2>
|
||||
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>类名（class）</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>layui-show-*-block</td>
|
||||
<td class="layui-text">定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg、xl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layui-show-*-inline</td>
|
||||
<td>定义不同设备下的 display: inline; * 可选值同上</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layui-show-*-inline-block</td>
|
||||
<td>定义不同设备下的 display: inline-block; * 可选值同上</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layui-hide-*</td>
|
||||
<td>定义不同设备下的隐藏类，即： display: none; * 可选值同上</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="container" lay-toc="">布局容器</h2>
|
||||
|
||||
将栅格放入一个带有 `class="layui-container"` 的特定容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
|
||||
|
||||
```
|
||||
<div class="layui-container">
|
||||
<div class="layui-row">
|
||||
……
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 `class="layui-fluid"`的容器中，那么宽度将不会固定，而是 100% 适应
|
||||
|
||||
```
|
||||
<div class="layui-fluid">
|
||||
……
|
||||
</div>
|
||||
```
|
||||
|
||||
<h2 id="space" lay-toc="">列间距</h2>
|
||||
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="2">通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre class="layui-code">
|
||||
layui-col-space1
|
||||
layui-col-space2
|
||||
layui-col-space4
|
||||
layui-col-space5
|
||||
layui-col-space6
|
||||
layui-col-space8
|
||||
layui-col-space10
|
||||
layui-col-space12
|
||||
layui-col-space14
|
||||
layui-col-space15
|
||||
layui-col-space16
|
||||
layui-col-space18
|
||||
layui-col-space20
|
||||
layui-col-space22
|
||||
layui-col-space24
|
||||
layui-col-space25
|
||||
layui-col-space26
|
||||
layui-col-space28
|
||||
layui-col-space30
|
||||
layui-col-space32
|
||||
|
||||
即：支持列之间为 1px-32px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
下面是一个简单的例子，列间距为 `16px`：
|
||||
|
||||
```
|
||||
<div class="layui-row layui-col-space16">
|
||||
<div class="layui-col-md4">
|
||||
1/3
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
1/3
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
1/3
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<h2 id="offset" lay-toc="">列偏移</h2>
|
||||
|
||||
对列追加类似 `layui-col-md-offset*` 的预设类，从而让列向右偏移。如：`layui-col-md-offset3`，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度。下面是一个采用「列偏移」机制让两个列左右对齐的实例
|
||||
|
||||
```
|
||||
div class="layui-row">
|
||||
<div class="layui-col-md4">
|
||||
4/12
|
||||
</div>
|
||||
<div class="layui-col-md4 layui-col-md-offset4">
|
||||
偏移4列，从而在最右
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
> 请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
|
||||
|
||||
<h2 id="iepatch" lay-toc="">IE8/9 兼容方案</h2>
|
||||
|
||||
事实上 `IE8/IE9` 并不支持 `Media Queries`，但你可以使用下面的补丁进行兼容（补丁来自于开源社区）：
|
||||
|
||||
```
|
||||
<!-- 让 IE8/9 支持媒体查询，从而兼容栅格 -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
||||
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
```
|
||||
|
||||
将上述代码放入你页面 `<body>` 标签内的任意位置即可。
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
---
|
||||
title: Admin UI 框体布局
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 框体布局
|
||||
|
||||
> Layui 的主要应用场景是面向中后台的界面搭建，因此也提供了大框体布局方案。
|
||||
|
||||
<h2 id="examples" lay-toc="">示例</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: 'iframe',style: 'height: 450px;', layout: ['preview', 'code'], tools: ['full','window']}">
|
||||
<textarea>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>layout 管理界面大布局示例 - Layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="{{= d.layui.cdn.css }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div class="layui-header">
|
||||
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
|
||||
<!-- 头部区域（可配合layui 已有的水平导航） -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<!-- 移动端显示 -->
|
||||
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
|
||||
<i class="layui-icon layui-icon-spread-left"></i>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">nav groups</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">menu 11</a></dd>
|
||||
<dd><a href="javascript:;">menu 22</a></dd>
|
||||
<dd><a href="javascript:;">menu 33</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
||||
<a href="javascript:;">
|
||||
<img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
|
||||
tester
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">Your Profile</a></dd>
|
||||
<dd><a href="javascript:;">Settings</a></dd>
|
||||
<dd><a href="javascript:;">Sign out</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
|
||||
<a href="javascript:;">
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll">
|
||||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a class="" href="javascript:;">menu group 1</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">menu 1</a></dd>
|
||||
<dd><a href="javascript:;">menu 2</a></dd>
|
||||
<dd><a href="javascript:;">menu 3</a></dd>
|
||||
<dd><a href="javascript:;">the links</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">menu group 2</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">list 1</a></dd>
|
||||
<dd><a href="javascript:;">list 2</a></dd>
|
||||
<dd><a href="javascript:;">超链接</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">the links</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-body">
|
||||
<!-- 内容主体区域 -->
|
||||
<div style="padding: 15px;">
|
||||
<blockquote class="layui-elem-quote layui-text">
|
||||
Layui 框体布局内容主体区域
|
||||
</blockquote>
|
||||
<div class="layui-card layui-panel">
|
||||
<div class="layui-card-header">
|
||||
下面是充数内容，为的是出现滚动条
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
底部固定区域
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{= d.layui.cdn.js }}"></script>
|
||||
<script>
|
||||
//JS
|
||||
layui.use(['element', 'layer', 'util'], function(){
|
||||
var element = layui.element;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var $ = layui.$;
|
||||
|
||||
//头部事件
|
||||
util.event('lay-header-event', {
|
||||
menuLeft: function(othis){ // 左侧菜单事件
|
||||
layer.msg('展开左侧菜单的操作', {icon: 0});
|
||||
},
|
||||
menuRight: function(){ // 右侧菜单事件
|
||||
layer.open({
|
||||
type: 1
|
||||
,title: '更多'
|
||||
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
|
||||
,area: ['260px', '100%']
|
||||
,offset: 'rt' //右上角
|
||||
,anim: 5
|
||||
,shadeClose: true
|
||||
,scrollbar: false
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<br>
|
||||
|
||||
> 小贴士：以上是一个基础的框体布局方案，若要实现诸如 `iframe` 跳转、侧边菜单收缩等功能，还需按照实际的业务需求自主实现。当然，也可以采用社区已有的 AdminUI 主题方案，如：layuiAdmin 等。
|
||||
|
||||
<h2 id="adminui" lay-toc="">Admin UI</h2>
|
||||
|
||||
<a href="https://dev.layuion.com/themes/layuiadmin/" target="_blank">layuiAdmin</a> 是一套用于开发通用型管理系统的纯静态的 `HTML` 网页界面主题，基于开源的 Layui Web 组件库制作而成，没有任何后端程序及数据库存储等服务端代码。开发者使用该网页模板，可省去前端的大量工作，从而更高效地开发 Web 应用系统。
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '普通用法'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-normal-1"></div>
|
||||
<div id="demo-laypage-normal-2"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 普通用法
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-normal-1',
|
||||
count: 50 // 数据总数
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-normal-2',
|
||||
count: 100 // 数据总数
|
||||
});
|
||||
});
|
||||
</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="demo-laypage-theme-1"></div>
|
||||
<div id="demo-laypage-theme-2"></div>
|
||||
<div id="demo-laypage-theme-3"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 自定义主题
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-theme-1',
|
||||
count: 100,
|
||||
theme: '#1E9FFF'
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-theme-2',
|
||||
count: 100,
|
||||
theme: '#FF5722'
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-theme-3',
|
||||
count: 100,
|
||||
theme: '#FFB800'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-text" class="ws-anchor ws-bold">自定义文本</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-text"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 自定义文本
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-text',
|
||||
count: 100,
|
||||
first: '首页',
|
||||
last: '尾页',
|
||||
prev: '<em>←</em>',
|
||||
next: '<em>→</em>'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-pn-hide" class="ws-anchor ws-bold">不显示上一页、下一页</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-pn-hide"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 不显示上一页、下一页
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-pn-hide',
|
||||
count: 100,
|
||||
prev: false,
|
||||
next: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-pn-show" class="ws-anchor ws-bold">只显示上一页、下一页、当前页</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-pn-show"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 只显示上一页、下一页、当前页
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-pn-show',
|
||||
count: 50,
|
||||
groups: 1,
|
||||
first: false,
|
||||
last: false,
|
||||
layout: ['prev', 'page','next'],
|
||||
jump: function(obj, first){
|
||||
// 首次不执行
|
||||
if(!first){
|
||||
layer.msg('第 '+ obj.curr +' 页');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-layout" class="ws-anchor ws-bold">自定义排版</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-layout-1"></div>
|
||||
<div id="demo-laypage-layout-2"></div>
|
||||
<div id="demo-laypage-layout-3"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 自定义排版
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-layout-1',
|
||||
count: 1000,
|
||||
layout: ['limit', 'prev', 'page', 'next']
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-layout-2',
|
||||
count: 1000,
|
||||
layout: ['prev', 'next', 'page']
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-layout-3',
|
||||
count: 1000,
|
||||
layout: ['page', 'count']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-limits" class="ws-anchor ws-bold">自定义每页条数的选择项</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-limits"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 自定义每页条数的选择项
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-limits',
|
||||
count: 1000,
|
||||
limit: 100,
|
||||
limits: [100, 300, 500],
|
||||
layout: ['prev', 'page', 'next', 'limit']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-all" class="ws-anchor ws-bold">完整显示</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-all"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 完整显示
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-all', // 元素 id
|
||||
count: 100, // 数据总数
|
||||
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
|
||||
jump: function(obj){
|
||||
console.log(obj);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-hash" class="ws-anchor ws-bold">高级 - 开启 HASH</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-hash"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 开启 HASH
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-hash',
|
||||
count: 500,
|
||||
curr: location.hash.replace('#!curr=', ''), // 初始获取 hash 值为 curr 的当前页
|
||||
hash: 'curr' // 自定义 hash 名称
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-data" class="ws-anchor ws-bold">高级 - 将一段已知数组分页展示</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-data"></div>
|
||||
<div id="demo-laypage-data-view"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 将一段已知数组分页展示
|
||||
var data = ["北京","上海","广州","深圳","杭州","长沙","合肥","宁夏","成都","西安","南昌","上饶","沈阳","济南","厦门","福州","九江","宜春","赣州","宁波","绍兴","无锡","苏州","徐州","东莞","佛山","中山","成都","武汉","青岛","天津","重庆","南京","九江","香港","澳门","台北"]; // 测试数据
|
||||
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-data',
|
||||
count: data.length,
|
||||
jump: function(obj){
|
||||
// 模拟渲染
|
||||
document.getElementById('demo-laypage-data-view').innerHTML = function(){
|
||||
var arr = [];
|
||||
var thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
|
||||
layui.each(thisData, function(index, item){
|
||||
arr.push(item);
|
||||
});
|
||||
return arr.join('，');
|
||||
}();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
<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>
|
||||
|
||||
绑定分页容器。值可以是容器 `id` 或 DOM 对象。如：
|
||||
|
||||
- `elem: 'id'` 注意：这里不能加 `#` 号
|
||||
- `elem: document.getElementById('id')`
|
||||
|
||||
</td>
|
||||
<td>string<br>DOM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>count</td>
|
||||
<td>
|
||||
|
||||
数据总数。一般通过后端得到
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>limit</td>
|
||||
<td>
|
||||
|
||||
每页显示的条数。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`10`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>limits</td>
|
||||
<td>
|
||||
|
||||
每页条数的选择项。 若 `layout` 参数开启了 `limit` ，则会出现每页条数的 select 选择框
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>
|
||||
|
||||
`[10,…,50]`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>curr</td>
|
||||
<td>
|
||||
|
||||
初始化当前页码。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`1`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>groups</td>
|
||||
<td>
|
||||
|
||||
连续出现的页码数量
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`5`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>prev</td>
|
||||
<td>
|
||||
|
||||
自定义“上一页”的内容，支持传入普通文本和 HTML
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`上一页`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>next</td>
|
||||
<td>
|
||||
|
||||
自定义“下一页”的内容，用法同上。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`下一页`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>first</td>
|
||||
<td>
|
||||
|
||||
自定义“首页”的内容，用法同上。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`1`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>last</td>
|
||||
<td>
|
||||
|
||||
自定义“尾页”的内容，用法同上。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
*自动获得*
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout</td>
|
||||
<td>
|
||||
|
||||
自定义分页功能区域排版。可自由排列，可选值有：
|
||||
|
||||
- `count` 数据总数区域
|
||||
- `prev` 上一页区域
|
||||
- `page` 分页区域
|
||||
- `next` 下一页区
|
||||
- `limit` 条目选项区域
|
||||
- `refresh` 页面刷新区
|
||||
- `skip` 快捷跳页区
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>
|
||||
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-layer="{
|
||||
title: 'layout 属性默认值',
|
||||
content: '<div>layout: [\'prev\',\'page\',\'next\']</div>'
|
||||
}">查看默认值</button>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>theme</td>
|
||||
<td>
|
||||
|
||||
自定义主题。支持传入：颜色值或任意普通字符。如：
|
||||
|
||||
- `theme: '#c00'` 直接设置当前页按钮背景色
|
||||
- `theme: 'xxx'` 会生成 `class="layui-laypage-xxx"` 的 CSS 类，以便自定义主题
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hash</td>
|
||||
<td>
|
||||
|
||||
设置 `hash` 名称。设置该属性后，点击分页将会自动对当前 `url` 追加：`#{hash}={curr}`，从而在页面刷新时初始化当前页码。[#详细用法参考示例](#demo-hash)
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[jump](#options.jump)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.jump" class="ws-anchor">分页跳转后的回调函数。函数返回两个参数：</div>
|
||||
|
||||
- 参数 `obj` : 当前分页相关的所有选项值
|
||||
- 参数 `first` : 是否首次渲染，一般用于初始加载的判断
|
||||
|
||||
```
|
||||
laypage.render({
|
||||
elem: 'id',
|
||||
count: 70, // 数据总数，从后端得到
|
||||
jump: function(obj, first){
|
||||
console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
|
||||
console.log(obj.limit); // 得到每页显示的条数
|
||||
|
||||
// 首次不执行
|
||||
if(!first){
|
||||
// do something
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: 分页组件 laypage
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 分页组件
|
||||
|
||||
> 分页组件 `laypage` 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div class="ws-detail">
|
||||
{{- d.include("docs/laypage/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var laypage = layui.laypage | 获得 `laypage` 模块。 |
|
||||
| [laypage.render(options)](#render) | laypage 组件渲染，核心方法。 |
|
||||
|
||||
<h2 id="render" lay-toc="{level: 2}">渲染</h2>
|
||||
|
||||
`laypage.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/laypage/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
## 小贴士
|
||||
|
||||
laypage 组件只负责分页本身的逻辑，具体的数据请求及对应的视图渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现，如 table 组件的分页就是采用的 laypage。
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<style>
|
||||
.laytpl-demo{border: 1px solid #eee;}
|
||||
.laytpl-demo:first-child{border-right: none;}
|
||||
.laytpl-demo>textarea{position: relative; display: block; width:100%; height: 300px; padding: 11px; border: 0; box-sizing: border-box; resize: none; background-color: #fff; font-family: Courier New; font-size: 13px;}
|
||||
.laytpl-demo>div:first-child{height: 32px; line-height: 32px; padding: 6px 11px; border-bottom: 1px solid #eee; background-color: #F8F9FA;}
|
||||
</style>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{!
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs6 laytpl-demo">
|
||||
<div>模板</div>
|
||||
<textarea id="ID-tpl-src">
|
||||
<h3>{{= d.title }}</h3>
|
||||
<ul>
|
||||
{{# layui.each(d.list, function(index, item){ }}
|
||||
<li>
|
||||
<span>{{= item.modname }}</span>
|
||||
<span>{{= item.alias }}：</span>
|
||||
<span>{{= item.site || '' }}</span>
|
||||
</li>
|
||||
{{# }); }}
|
||||
|
||||
{{# if(d.list.length === 0){ }}
|
||||
无数据
|
||||
{{# } }}
|
||||
</ul>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs6 laytpl-demo">
|
||||
<div>数据</div>
|
||||
<textarea id="ID-tpl-data">
|
||||
{
|
||||
"title": "Layui 常用模块",
|
||||
"list": [
|
||||
{
|
||||
"modname": "弹层",
|
||||
"alias": "layer",
|
||||
"site": "layer.domain.com"
|
||||
},
|
||||
{
|
||||
"modname": "表单",
|
||||
"alias": "form"
|
||||
},
|
||||
{
|
||||
"modname": "表格",
|
||||
"alias": "table"
|
||||
},
|
||||
{
|
||||
"modname": "日期",
|
||||
"alias": "laydate"
|
||||
},
|
||||
{
|
||||
"modname": "上传",
|
||||
"alias": "upload"
|
||||
}
|
||||
]
|
||||
}
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="layui-col-xs12 laytpl-demo" style="border-top: none;">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs6">视图</div>
|
||||
<div class="layui-col-xs6" style="text-align: right">
|
||||
<span id="ID-tpl-viewtime"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-padding-sm" id="ID-tpl-view" style="max-height: 300px; padding: 16px; overflow: auto;">…</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-clear"></div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laytpl = layui.laytpl;
|
||||
var util = layui.util;
|
||||
var $ = layui.$;
|
||||
|
||||
// 获取模板和数据
|
||||
var get = function(type){
|
||||
return {
|
||||
template: $('#ID-tpl-src').val(), // 获取模板
|
||||
data: function(){ // 获取数据
|
||||
try {
|
||||
return JSON.parse($('#ID-tpl-data').val());
|
||||
} catch(e){
|
||||
$('#ID-tpl-view').html(e);
|
||||
}
|
||||
}()
|
||||
};
|
||||
};
|
||||
|
||||
var data = get();
|
||||
|
||||
// 耗时计算
|
||||
var startTime = new Date().getTime(), timer = function(startTime, title){
|
||||
var endTime = new Date().getTime();
|
||||
$('#ID-tpl-viewtime').html((title || '模板解析耗时：')+ (endTime - startTime) + 'ms');
|
||||
};
|
||||
|
||||
// 渲染模板
|
||||
var thisTpl = laytpl(data.template);
|
||||
|
||||
// 执行渲染
|
||||
thisTpl.render(data.data, function(view){
|
||||
timer(startTime);
|
||||
$('#ID-tpl-view').html(view);
|
||||
});
|
||||
|
||||
// 编辑
|
||||
$('.laytpl-demo textarea').on('input propertychange', function(){
|
||||
var data = get();
|
||||
if(!data.data) return;
|
||||
|
||||
// 计算模板渲染耗时
|
||||
var startTime = new Date().getTime();
|
||||
|
||||
// 若模板有变化，则重新解析模板；若模板没变，数据有变化，则从模板缓存中直接渲染（效率大增）
|
||||
if(this.id === 'ID-tpl-src'){
|
||||
thisTpl.parse(data.template, data.data); // 解析模板
|
||||
}
|
||||
|
||||
// 执行渲染
|
||||
thisTpl.render(data.data, function(view){
|
||||
timer(startTime);
|
||||
$('#ID-tpl-view').html(view);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
!}}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>标签</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{{!
|
||||
<tr>
|
||||
<td>{{= }}</td>
|
||||
<td>
|
||||
|
||||
转义输出。若字段存在 HTML，将进行转义。
|
||||
|
||||
```
|
||||
<h2>{{= d.title }}</h2>
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{- }} <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
原始输出。若字段存在 HTML，将正常渲染。
|
||||
|
||||
```
|
||||
<div>{{- d.content }}</div>
|
||||
```
|
||||
|
||||
该语句一般在需要正常渲染 HTML 时用到，但若字段存在 script 等标签，为防止 xss 问题，可采用 `{{= }}` 进行转义输出。
|
||||
|
||||
> ### 注意
|
||||
> 由于 `2.6.11` 版本对 laytpl 语句进行了重要调整，原 `{{ }}` 语法即等同 `{{- }}`，升级版本时，请进行相应调整。可参考：https://gitee.com/layui/layui/issues/I5AXSP
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{# }}</td>
|
||||
<td>
|
||||
|
||||
JavaScript 语句。一般用于逻辑处理。
|
||||
|
||||
```
|
||||
<div>
|
||||
{{#
|
||||
var fn = function(){
|
||||
return '2017-08-18';
|
||||
};
|
||||
}}
|
||||
{{# if(true){ }}
|
||||
开始日期：{{= fn() }}
|
||||
{{# } else { }}
|
||||
已截止
|
||||
{{# } }}
|
||||
</div>
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>!}}
|
||||
<tr>
|
||||
<td>{{!{{! !}}!}}</td>
|
||||
<td>
|
||||
|
||||
对一段指定的模板区域进行过滤，即不解析该区域的模板。
|
||||
|
||||
```
|
||||
{{! {{! 这里面的模板不会被解析 !}} !}}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
---
|
||||
title: 模板引擎 laytpl
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 模板引擎
|
||||
|
||||
> `laytpl` 是 Layui 的一款轻量 JavaScript 模板引擎，在字符解析上有着比较出色的表现。
|
||||
|
||||
<h2 id="test" lay-toc="{hot: true}" style="margin-bottom: 0;">在线测试</h2>
|
||||
|
||||
在以下*模板*或*数据*中进行编辑，下方*视图*将呈现对应结果。
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/laytpl/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var laytpl = layui.laytpl | 获得 `laytpl` 模块。 |
|
||||
| [laytpl(str, options).render(data, callback)](#render) | laytpl 组件渲染，核心方法。 |
|
||||
| [laytpl.config(options)](#config) | 配置 laytpl 全局属性 |
|
||||
|
||||
<h2 id="render" lay-toc="{level: 2, hot: true, title: '解析和渲染'}">模板解析和渲染</h2>
|
||||
|
||||
`laytpl(str, options).render(data, callback);`
|
||||
|
||||
- 参数 `str` : 模板原始字符
|
||||
- 参数 `options` <sup>2.8+</sup> : 当前模板实例的属性配置项。可选项详见：[#属性配置](#config)
|
||||
- 参数 `data` : 模板数据
|
||||
- 参数 `callback` : 模板渲染完毕的回调函数，并返回渲染后的字符
|
||||
|
||||
{{!
|
||||
|
||||
```
|
||||
layui.use('laytpl', function(){
|
||||
var laytpl = layui.laytpl;
|
||||
|
||||
// 直接解析字符
|
||||
laytpl('{{= d.name }}是一名前端工程师').render({
|
||||
name: '张三'
|
||||
}, function(str){
|
||||
console.log(str); // 张三是一名前端工程师
|
||||
});
|
||||
|
||||
// 同步写法
|
||||
var str = laytpl('{{= d.name }}是一名前端工程师').render({
|
||||
name: '张三'
|
||||
});
|
||||
console.log(str); // 张三是一名前端工程师
|
||||
});
|
||||
```
|
||||
|
||||
若模板字符较大，可存放在页面某个标签中，如：
|
||||
|
||||
```
|
||||
<script id="TPL" type="text/html">
|
||||
<h3>{{= d.name }}</h3>
|
||||
<p>性别：{{= d.sex ? '男' : '女' }}</p>
|
||||
</script>
|
||||
|
||||
<div id="view"></div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laytpl = layui.laytpl;
|
||||
|
||||
// 渲染
|
||||
var data = {
|
||||
name: '张三',
|
||||
sex: 1
|
||||
};
|
||||
var getTpl = document.getElementById('TPL').innerHTML; // 获取模板字符
|
||||
var elemView = document.getElementById('view'); // 视图对象
|
||||
// 渲染并输出结果
|
||||
laytpl(getTpl).render(data, function(str){
|
||||
elemView.innerHTML = str;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
!}}
|
||||
|
||||
在实际使用时，若模板通用，而数据不同，为减少模板解析的开销，可将语句分开书写，如。
|
||||
|
||||
```
|
||||
var compile = laytpl(str); // 模板解析
|
||||
compile.render(data, callback); // 模板渲染
|
||||
```
|
||||
|
||||
<h2 id="grammar" lay-toc="{level: 2, hot: true}">标签语法</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/laytpl/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="config" lay-toc="{level: 2}">属性配置</h2>
|
||||
|
||||
`laytpl.config(options);`
|
||||
|
||||
- 参数 `options` : 属性配置项。可选项详见下表
|
||||
|
||||
| 属性 | 描述 |
|
||||
| --- | --- |
|
||||
| open | 标签符前缀 |
|
||||
| close | 标签符后缀 |
|
||||
|
||||
### 全局配置
|
||||
|
||||
若模板默认的标签符与其他模板存在冲突，可通过该方法重新设置标签符，如：
|
||||
|
||||
```
|
||||
laytpl.config({
|
||||
open: '<%',
|
||||
close: '%>'
|
||||
});
|
||||
|
||||
// 模板语法将默认采用上述定义的标签符书写
|
||||
laytpl(`
|
||||
<%# var job = ["前端工程师"]; %>
|
||||
<%= d.name %>是一名<%= job[d.type] %>。
|
||||
`).render({
|
||||
name: '张三',
|
||||
type: 0
|
||||
}, function(string){
|
||||
console.log(string); // 张三是一名前端工程师。
|
||||
});
|
||||
```
|
||||
|
||||
### 局部配置 <sup>2.8+</sup>
|
||||
|
||||
若不想受到上述全局配置的影响，可在 `laytpl(str, options)` 方法的第二个参数中设置当前模板的局部属性，如：
|
||||
|
||||
```
|
||||
laytpl('<%= d.name %>是一名前端工程师', {
|
||||
open: '<%',
|
||||
close: '%>'
|
||||
}).render({name: '张三'}, function(string){
|
||||
console.log(string); // 张三是一名前端工程师。
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## 贴士
|
||||
|
||||
> Layui table 等组件的动态模板功能，均采用 laytpl 驱动。 laytpl 亦可承载单页面应用开发中的视图模板。
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue