diff --git a/docs/.layui/DOCS_TEMPLATE.md b/docs/.layui/DOCS_TEMPLATE.md new file mode 100644 index 00000000..cc913bd9 --- /dev/null +++ b/docs/.layui/DOCS_TEMPLATE.md @@ -0,0 +1,34 @@ +--- +title: 某某组件 MOD_NAME +toc: true +--- + +# 某某组件 + +> 某某组件 `MOD_NAME` + +

示例

+ +
+{{- d.include("docs/MOD_NAME/detail/demo.md") }} +
+ +

API

+ +| API | 描述 | +| --- | --- | +| var MOD_NAME = layui.MOD_NAME | 获得 `MOD_NAME` 模块。 | +| [MOD_NAME.render(options)](#render) | MOD_NAME 组件渲染，核心方法。 | +| …… | …… | + +

渲染

+ +`MOD_NAME.render(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +

属性

+ +
+{{- d.include("docs/MOD_NAME/detail/options.md") }} +
\ No newline at end of file diff --git a/docs/.layui/DOCS_TEMPLATE_DEMO.md b/docs/.layui/DOCS_TEMPLATE_DEMO.md new file mode 100644 index 00000000..7422e072 --- /dev/null +++ b/docs/.layui/DOCS_TEMPLATE_DEMO.md @@ -0,0 +1,27 @@ +
+  
+
+ +

示例标题

+ +
+  
+
\ No newline at end of file diff --git a/docs/.layui/DOCS_TEMPLATE_OPTIONS.md b/docs/.layui/DOCS_TEMPLATE_OPTIONS.md new file mode 100644 index 00000000..2ccee5ab --- /dev/null +++ b/docs/.layui/DOCS_TEMPLATE_OPTIONS.md @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + +
属性名描述类型默认值
AAA + + + +CCC + + + +
\ No newline at end of file diff --git a/docs/anim/index.md b/docs/anim/index.md new file mode 100644 index 00000000..43d2de98 --- /dev/null +++ b/docs/anim/index.md @@ -0,0 +1,136 @@ +--- +title: 动画 +toc: true +--- + + + +# 动画 + +> Layui 内置了几种常见的 `CSS3` 动画。 + +

示例

+ +
+  
+
+ +对需要动画的标签添加 `class="layui-anim"` 基础类，再追加其他不同的动画类，即可让元素产生动画。 + +

动画列表

+ +点击下述绿色圆体，即可预览不同类名的动画效果。 + +
+  
+
+ + diff --git a/docs/auxiliar/index.md b/docs/auxiliar/index.md new file mode 100644 index 00000000..4b9963d1 --- /dev/null +++ b/docs/auxiliar/index.md @@ -0,0 +1,70 @@ +--- +title: 辅助元素 blockquote,fieldset,hr +toc: true +--- + +# 辅助元素 + +> 辅助元素是指对 `blockquote,fieldset,hr` 等标签的美化，主要是静态展示作用。 + +

引用

+ +
+  
+
+ +

字段集

+ +
+  
+
+ + +

水平线

+ +
+  
+
\ No newline at end of file diff --git a/docs/badge/index.md b/docs/badge/index.md new file mode 100644 index 00000000..9798e390 --- /dev/null +++ b/docs/badge/index.md @@ -0,0 +1,88 @@ +--- +title: 徽章 badge +toc: true +--- + +# 徽章 + +> 徽章 `badge` 通常作为修饰用途而存在，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。 + + +

普通徽章

+ +
+  
+
+ + +

小圆点

+ +
+  
+
+ + +

徽章的搭配

+ +
+  
+
+ +徽章还可以自由佩戴在其他更多元素中，此处不做逐一列举。 + diff --git a/docs/base.md b/docs/base.md new file mode 100644 index 00000000..6d0a96bc --- /dev/null +++ b/docs/base.md @@ -0,0 +1,165 @@ +--- +title: 底层方法 +toc: true +--- + +# 底层方法 + +> Layui 提供了一系列基础 API，以更好地辅助组件的使用。 + +

全局配置

+ +`layui.config(options);` + +您可以在 Layui 模块使用之前，采用该方法进行一些全局化的基础配置，其支持的属性如下： + +``` +layui.config({ + base: '' // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用 + version: false, // 用于更新模块缓存，默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值 + dir: 'layui/', // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。一般无需设置 + debug: false, // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面 +}); +``` + + + + +

链接解析

+ +`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 主题模板则正是基于该方法完成的路由系统。 + + +

本地存储

+ +本地存储是对 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); // 获得“张三” +``` + +

浏览器信息

+ +`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 环境中'); +} +``` + +

API 列表

+ +前面我们特别介绍了几个相对特殊的基础方法，而以下是 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]) 2.7+ | 弃用模块，以便重新扩展新的同名模块。参数支持数组，即可同时弃用多个模块。 如：`layui.disuse(['table'])` | +| layui.link(href) | 加载 CSS，`href` 即为 css 路径。一般用于动态加载你的外部 CSS 文件 | +| layui.getStyle(node, name) | 获得一个原始 DOM 节点的 style 属性值，如：
`layui.getStyle(document.body, 'font-size')` | +| layui.img(src, callback, error) | 图片预加载 | +| layui.each(obj, callback) | 对象（Array、Object、DOM 对象等）遍历，可用于取代 for 语句 | +| layui.type(operand) 2.6.7+ | 获取基本数据类型和各类常见引用类型，如：
`layui.type([]); // array`
`layui.type({}); //object`
`layui.type(new Date()); // date` | +| layui.isArray(obj) 2.7+ | 对象是否为泛数组结构。如 Array、NodeList、jQuery 对象等
`layui.isArray([1,6]); // true`
`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 方法，如：
`var hint = layui.hint();`
`hint.error('出错啦');` | +| layui.stope(e) | 阻止事件冒泡 | +| layui.onevent(modName, events, callback) | 增加自定义模块事件，一般在内置组件中使用。 | +| layui.event(modName, events, params) | 执行自定义模块事件，搭配 onevent 使用。注2.8+：当 events 参数中未设定 filter 时则可重复执行该事件，否则只会执行一次最新添加的事件。 | +| layui.off(events, modName) 2.5.7+ | 用于移除模块相关事件，如：`layui.off('select(filter)', 'form')`，那么`form.on('select(filter)', callback)`事件将会被移除 | +| layui.factory(modName) | 用于获取模块对应的 `layui.define()` 的回调函数 | +| var lay = layui.lay | 基础模块，提供了更多基础 API，一般供 Layui 内置组件中使用 | + +> 基础 API 是整个 UI 的有力支撑，我们在组件的使用过程中也经常会用到。 + + diff --git a/docs/button/index.md b/docs/button/index.md new file mode 100644 index 00000000..ebd39b14 --- /dev/null +++ b/docs/button/index.md @@ -0,0 +1,213 @@ +--- +title: 按钮 +toc: true +--- + +# 按钮 + +> 向任意 `HTML` 标签设定`class="layui-btn"` 建立一个基础按钮。通过追加格式为`layui-btn-{type}`的 `class` 来定义其它按钮风格。内置的按钮 `class` 可以进行任意组合，从而形成更多种按钮风格。 + +

按钮主题

+ +
+  
+
+ +

按钮尺寸

+ +
+  
+
+ +

按钮圆角

+ +
+  
+
+ +

按钮图标

+ +
+  
+
+ +

按钮混搭

+ +
+  
+
+ +

按钮组合

+ +
+  
+
+ +

按钮容器

+ +
+  
+
+ +
+ +## 小贴士 + +> 按钮的主题、尺寸、图标、圆角的交叉组合，可以形成丰富多样的按钮种类。其中颜色也可以根据使用场景自主更改。 \ No newline at end of file diff --git a/docs/carousel/detail/demo.md b/docs/carousel/detail/demo.md new file mode 100644 index 00000000..88ddf988 --- /dev/null +++ b/docs/carousel/detail/demo.md @@ -0,0 +1,215 @@ +

常规用法

+ +
+  
+
+ +- 在元素外层设置 `class="layui-carousel"` 来定义一个轮播容器 +- 在元素内层设置属性 `carousel-item` 用来定义条目容器 + +

属性配置预览

+ +
+  
+
+ +

填充图片轮播

+ +
+  
+
\ No newline at end of file diff --git a/docs/carousel/detail/options.md b/docs/carousel/detail/options.md new file mode 100644 index 00000000..cc2dd333 --- /dev/null +++ b/docs/carousel/detail/options.md @@ -0,0 +1,238 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名描述类型默认值
elem + +绑定元素选择器或 DOM 对象 + +string/DOM-
width + +设定轮播容器宽度，值支持：*像素*、*auto*、*百分比*。 + +string + +`600px` + +
height + +设定轮播容器高度，值支持的类型同 `width` 属性 + +string + +`280px` + +
full + +是否全屏轮播 + +boolean + +`false` + +
anim + +轮播切换动画方式。可选值有： + +- `default` 左右切换 +- `updown` 上下切换 +- `fade` 渐隐渐显切换 + +boolean + +`default` + +
autoplay + +是否自动切换，可选值有： + +- `true` 自动滚动，鼠标移入会暂停、移出重新恢复 +- `false` 不自动滚动 +- `alway` 始终自动滚动，不受鼠标移入移出影响 2.7+ + + +boolean
string		 + +`true` + +
interval + +自动切换的时间间隔，单位： ms （毫秒），不能低于 800 + +number + +`3000` + +
index + +初始开始的条目下标 + +number + +`0` + +
arrow + +切换箭头默认显示状态，可选值有： + +- `hover` 鼠标悬停显示 +- `always` 始终显示 +- `none` 始终不显示 + +string + +`hover` + +
indicator + +指示器位置，可选值有： + +- `inside` 显示在容器内部 +- `outside` 显示在容器外部 +- `none` 不显示 + +注 : 若设定了 `anim: 'updown'` ，则 `outside` 值无效 + +string + +`inside` + +
trigger + +指示器的触发事件 + +string + +`click` + +
+ + +
+ +[回调函数](#options.callback) + +
+ +
change 2.7+ + +
+轮播切换后的回调函数，返回一个对象参数。 +
+ +``` +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); +}); +``` + +
+ +### 贴士 + +> 若轮播的填充内容为图片，且 `width` 或 `height` 为自适应，那么需动态获取父容器宽高，从而适配父容器。 当浏览器窗口尺寸发生变化时，可在窗口 `resize` 事件中通过轮播重载来重设宽高值。 \ No newline at end of file diff --git a/docs/carousel/index.md b/docs/carousel/index.md new file mode 100644 index 00000000..25a13d1e --- /dev/null +++ b/docs/carousel/index.md @@ -0,0 +1,79 @@ +--- +title: 轮播组件 carousel +toc: true +--- + +# 轮播组件 + +> 轮播组件 `carousel` 主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何内容的轮播式切换操作，亦可胜任 `fullpage`（全屏上下轮播）的需求。 + +

示例

+ + + +
+{{- d.include("docs/carousel/detail/demo.md") }} +
+ +

API

+ +| API | 描述 | +| --- | --- | +| var carousel = layui.carousel | 获得 `carousel` 模块。 | +| [var inst = carousel.render(options)](#render) | carousel 组件渲染，核心方法。 | +| [inst.reload(options)](#reload) | 轮播实例重载 | +| [inst.goto(index)](#goto) 2.8+ | 轮播切换到特定下标 | + +

渲染

+ +`carousel.render(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +该方法返回一个实例对象，包含操作当前实例的相关方法成员。 + +``` +var inst = carousel.render(options); +console.log(inst); // 得到当前实例对象 +``` + +

重载

+ +`inst.reload(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +通过渲染返回的实例对象，可获得重载方法，用于实现对实例的属性重载。 + +``` +var inst = carousel.render(options); // 轮播初始渲染 +inst.reload(options); // 轮播重载 +``` + +详细用法可参考：[#示例](#demo) + +

属性

+ +
+{{- d.include("docs/carousel/detail/options.md") }} +
+ + +

切换

+ +`inst.goto(index);` + +- 参数 `index` : 轮播下标，从 `0` 开始计算 + +通过渲染返回的实例对象，可获得切换方法，用于实现对轮播的手动定向切换。 + +``` +var inst = carousel.render(options); // 轮播初始渲染 +inst.goto(0); // 轮播切换到第一项 +inst.goto(1); // 轮播切换到第二项 +``` diff --git a/docs/class/index.md b/docs/class/index.md new file mode 100644 index 00000000..ef9ed6c1 --- /dev/null +++ b/docs/class/index.md @@ -0,0 +1,170 @@ +--- +title: 公共类 class +toc: true +--- + +# 公共类 + +> 公共类是 `layui.css` 中并不以组件形式存在的公共 `class` 选择器，而又能用于任何地方。 + +

普通类

+ +| className | 描述 | +| --- | --- | +| layui-main | 设置一个固定宽度为 `1160px` 的水平居中块 | +| layui-border-box | 设置元素及其所有子元素均为 `box-sizing: content-box` 模型的容器 | +| layui-clear | 清除前面的同级元素产生的浮动 | +| layui-clear-space 2.8+ | 清除容器内的空白符 | +| layui-inline | 设置元素为内联块状结构 | +| layui-elip | 设置单行文本溢出并显示省略号 | +| layui-unselect | 屏蔽选中 | +| layui-disabled | 设置元素为不可点击状态 | +| layui-circle | 设置元素为圆形。需确保 `width` 和 `height` 相同 | + +

显示隐藏

+ +| className | 描述 | +| --- | --- | +| layui-show | 设置元素为 `display: block` 可见状态 | +| layui-hide | 设置元素为 `display: none` 隐藏状态，且不占用空间 | +| layui-show-v | 设置元素为 `visibility: visible` 可见状态 | +| layui-hide-v | 设置元素为 `visibility: hidden` 不可见状态，且依旧占用空间 | + + +

三角实体

+ +| className | 描述 | +| --- | --- | +| layui-edge | 定义一个三角形基础类 | +| layui-edge-top | 设置向上三角 | +| layui-edge-right | 设置向右三角 | +| layui-edge-bottom | 设置向下三角 | +| layui-edge-left | 设置向左三角 | + +示例 + +
+  
+
+ + +

背景颜色

+ +| className | 背景色 | 预览 | +| --- | --- | --- | +| layui-bg-red | 红 |
 
| +| layui-bg-orange | 橙 |
 
| +| layui-bg-green | 绿 |
 
| +| layui-bg-blue | 蓝 |
 
| +| layui-bg-purple | 紫 |
 
| +| layui-bg-black | 深 |
 
| +| layui-bg-gray | 浅 |
 
| + +

文字大小

+ +| className | 文字大小和预览 | +| --- | --- | +| layui-font-12 | 12px | +| layui-font-13 2.8+ | 13px | +| layui-font-14 | 14px | +| layui-font-16 | 16px | +| layui-font-18 | 18px | +| layui-font-20 | 20px | +| layui-font-22 2.8+ | 22px | +| layui-font-24 2.8+ | 24px | +| layui-font-26 2.8+ | 26px | +| layui-font-28 2.8+ | 28px | +| layui-font-30 2.8+ | 30px | +| layui-font-32 2.8+ | 32px | + +

文字颜色

+ +| className | 文字颜色和预览 | +| --- | --- | +| layui-font-red | 红 | +| layui-font-orange | 橙 | +| layui-font-green | 绿 | +| layui-font-blue | 蓝 | +| layui-font-purple | 紫 | +| layui-font-black | 深 | +| layui-font-gray | 浅 | + +

文档容器

+ +通过设置 `class="layui-text"` 定义一段包含标题、段落、列表、链接等组合的文档区域。 + +
+  
+
\ No newline at end of file diff --git a/docs/code/detail/options.md b/docs/code/detail/options.md new file mode 100644 index 00000000..043945fd --- /dev/null +++ b/docs/code/detail/options.md @@ -0,0 +1,268 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名描述类型默认值
elem + +绑定元素选择器或 DOM 对象 + +string/DOM-
preview 2.8+ + +是否开启 Code 预览功能，可选值有： + +- `true` 开启 Code 的普通预览 +- `false` 关闭 Code 预览（默认） +- `"iframe"` 开启 Code 在 iframe 模式中预览 + +当开启该属性时，`elem` 指定的元素需要设置成以下结构： + +``` +
+  
+
+``` + +		boolean
string		 + +`false` + +
layout 2.8+ + +开启预览后的面板布局方式，值为一个数组，数组的可选成员有： + +- `code` 代码区域 +- `preview` 预览区域 + +面板将根据数组的排列顺序来显示，如： + +``` +layout: ['code', 'preview'] +``` + +array-
style 2.8+ + +设置 Code 和预览区域的公共样式 + +string-
codeStyle 2.8+ + +设置 Code 区域的局部样式，优先级高于 `style` 属性 + +string-
previewStyle 2.8+ + +设置预览区域的局部样式，优先级高于 `style` 属性 + +string-
id 2.8+ + +设置实例的唯一索引，以便用于其他操作 + +string-
className 2.8+ + +追加实例面板的 `className`，以便对其自定义样式 + +string-
tools 2.8+ + +用于开启 `preview` 属性后的面板头部右侧区域工具栏图标，值为一个数组，内置成员： + +- `full` 最大化显示 +- `window` 在新窗口预览。一般当 `layout: 'iframe'` 时开启，且 code 中须包含完整的 HTML 方可在新窗口正常预览。 + +工具图标将根据数组的排列顺序来显示，如： + +``` +tools: ['full', 'window'] +``` + +亦可自定义值，值对应[图标](../icon/) `className` 的 `layui-icon-` 后的名称，并通过 `toolsEvent` 回调函数中处理事件。 + +array-
toolsEvent 2.8+ + +点击工具栏的回调函数，函数返回 `tools` 设置的名称，如： + +``` +toolsEvent: function(othis, type){ + console.log(othis); // 当前图标元素对象 + console.log(type); // tools 中设置的对应值 +} +``` + +通过该函数与 `tools` 属性的搭配，可实现对工具栏的扩展。 + +function-
text 2.8+ + +自定义默认文本，值为一个对象，可选成员有: + +``` +text: { + code: '代码栏标题', // 默认: + preview: '预览栏标题' // 默认: Preview +} +``` + +object-
header 2.8+ + +是否开启 Code 栏头部区域 + +boolean + +`false` + +
about + +设置 Code 栏头部右上角信息。必须开启 `header` 属性后有效。 + +string-
ln + +是否显示 Code 区域的行号 + +boolean + +`true` + +
skin + +Code 容器的风格，可选值有： + +- `light` 浅色模式（默认） +- `dark` 深色模式 + +string-
encode + +是否对 Code 区域自动转义 html 标签 + +boolean + +`false` + +
+ +[done](#options.done) 2.8+ + + + +
+组件渲染完毕的回调函数，函数返回一个 object 类型参数 +
+ +``` +done: function(obj){ + var container = obj.container; // 当前面板的容器对象 + obj.render(); // 对预览中的 `element,form` 等组件进行渲染 +} +``` + +
\ No newline at end of file diff --git a/docs/code/index.md b/docs/code/index.md new file mode 100644 index 00000000..13d3bd4d --- /dev/null +++ b/docs/code/index.md @@ -0,0 +1,42 @@ +--- +title: Code 预览组件 code +toc: true +--- + +# Code 预览组件 + +> 代码预览组件 `code` 主要用于对代码区块的修饰和对应的效果预览，如 Layui 各组件文档中的示例演示。 + + +

方法

+ +`layui.code(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options)。 + +属性除了在该方法中传递，也可以直接写在元素的 `lay-options` 属性上，如： + +
+  
+
+ +

属性

+ +
+{{- d.include("docs/code/detail/options.md") }} +
\ No newline at end of file diff --git a/docs/color/index.md b/docs/color/index.md new file mode 100644 index 00000000..91fccd5b --- /dev/null +++ b/docs/color/index.md @@ -0,0 +1,139 @@ +--- +title: 颜色 +toc: true +--- + +# 颜色 + +> Layui 试图在清新与深沉之间寻求某种柔和，以不过分刺激大脑皮层的神经介质，反馈出经久耐看的微妙视图。您可以在我们精心调配的如下色系中合理搭配，减少不必要的违和感，从而使您的 Web 页面看上去尽可能融洽。 + +

基色调

+ +
+
+
+

#16baaa

+

蓝绿色

+
+
+
+
+

#16b777

+

清新绿

+
+
+
+
+

#1e9fff

+

经典蓝

+
+
+
+ +Layui 选取以象征清新与包容的「蓝绿色」作为主色调，它介于蓝与绿之间，亦可称之为「青色」，所谓青者，取之于蓝而深于绿，此间包罗万象，跨越时空。这也是我们对技术创作与人生哲学之间的一点思考。 + + +

辅色调

+ +
+
+
+

#ff5722

+

错误 - Danger

+
+
+
+
+

#ffb800

+

警示 - Warning

+
+
+ +
+
+

#16b777

+

成功 - Success

+
+
+
+
+

#31bdec

+

引导 - Info

+
+
+
+ +页面中同样也少不了辅助色彩的点缀，以对不同含义的内容加以区分。Layui 从暖色系（红/橙）和冷色系（绿/蓝）中，各自调取了我们认为最具代表性的颜色值，它们通常在不同的场景中发挥着不同的作用。 + +

中色调

+ +
+
+
+

#fafafa

+

+
+
+

#f7f7f7

+
+
+

#eeeeee

+
+
+

#e2e2e2

+
+
+

#dddddd

+
+
+

#d2d2d2

+
+
+

#cccccc

+
+
+

#c2c2c2

+
+
+

#2f363c

+
+
+

#23292e

+
+
+ +中性的颜色是页面中的重要组成部分，也被称之为无彩色系，一般用于文本、背景和边框等。它能对由彩色进行视觉冲淡，以达到和谐自然的效果。Layui 认为恰当的灰度调配代表着极简，这是一种神奇的色系，是视觉疲劳的栖息，低调而优雅，且永不过时。 + +

七色调

+ +
+
+ #ff5722 - 红 +
+
+ #ffb800 - 橙 +
+
+ #16baaa - 绿 +
+
+ #1e9fff - 蓝 +
+
+ #a233c6 - 紫 +
+
+ #2f363c - 深 +
+
+ #fafafa - 浅 +
+
+ +Layui 的色调基础，除了前面提到的主辅中色之外，还建立在以上罗列的七种颜色之上。你同样也可以遵循我们提供的色调方案去扩展你的页面元素，使得能与 Layui 的主题风格无缝融合。 + +
+ +## 标语 + +> 不热衷于视觉设计的开发者不是一个好作家。 —— 贤心 \ No newline at end of file diff --git a/docs/colorpicker/detail/demo.md b/docs/colorpicker/detail/demo.md new file mode 100644 index 00000000..a91901da --- /dev/null +++ b/docs/colorpicker/detail/demo.md @@ -0,0 +1,240 @@ +
+  
+
+ +

将颜色值赋给表单

+ +
+  
+
+ +

设置 RGB / RGBA

+ +
+  
+
+ +

开启透明度

+ +
+  
+
+ +

预定义颜色项

+ +
+  
+
+ +

全功能和回调的使用

+ +
+  
+
+ +

颜色框尺寸

+ +
+  
+
+ +

同时绑定多个元素

+ +
+  
+
\ No newline at end of file diff --git a/docs/colorpicker/detail/options.md b/docs/colorpicker/detail/options.md new file mode 100644 index 00000000..2909382b --- /dev/null +++ b/docs/colorpicker/detail/options.md @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名描述类型默认值
elem + +绑定元素选择器或 DOM 对象 + +string/DOM-
color + +默认颜色值，值的格式跟随 `format` 属性的设定。 + +string-
format + +颜色显示/输入格式，支持 `hex` `rgb` 。 若同时开启 `alpha` 属性，则颜色值自动变为 `rgba`。 + +string + +`hex` + +
alpha + +是否开启透明度。当同时开启 `format: 'rga'` 时，`color` 值将采用 `rgba` 格式。 + +boolean + +`false` + +
predefine + +是否开启预定义颜色栏 + +boolean + +`false` + +
colors + +设置可选的颜色列表，需开启 `predefine: true` 有效。 +
用法详见：[#预定义颜色项](#demo-predefine) + +		array-
size + +颜色框的尺寸，可选值： `lg` `sm` `xs` + +string + +`sm` + +
+ + +
+ +[回调函数](#options.callback) + +
+ +
change + +颜色被改变的回调函数。用法详见：[#示例](#demo-all) + +``` +change: function(value){ + console.log(value); // 当前颜色值 +} +``` + +
done + +颜色选择完毕的回调函数。点击“确认”和“清除”按钮均会触发 + +``` +done: function(value){ + console.log(value); // 当前选中的颜色值 +} +``` + +用法详见：[#示例](#demo-all) + +
cancel 2.8+ + +取消颜色选择的回调函数，一般点击非颜色选择面板区域触发。 + +``` +cancel: function(value){ + console.log(value); // 当前颜色值 +} +``` + +用法详见：[#示例](#demo-all) + +
close 2.8+ + +颜色选择面板被关闭后即触发。 + +``` +close: function(value){ + console.log(value); // 当前颜色值 +} +``` + +
\ No newline at end of file diff --git a/docs/colorpicker/index.md b/docs/colorpicker/index.md new file mode 100644 index 00000000..ebd47163 --- /dev/null +++ b/docs/colorpicker/index.md @@ -0,0 +1,61 @@ +--- +title: 颜色选择器 colorpicker +toc: true +--- + +# 颜色选择器 + +> 颜色选择器 `colorpicker` 用于对颜色的快捷选择，支持 `hex,rgb,rgba` 三种颜色类型。 + +

示例

+ +
+{{- d.include("docs/colorpicker/detail/demo.md") }} +
+ +

+ +

API

+ +| API | 描述 | +| --- | --- | +| var colorpicker = layui.colorpicker | 获得 `colorpicker` 模块。 | +| [colorpicker.render(options)](#render) | colorpicker 组件渲染，核心方法。 | + + +

渲染

+ +`colorpicker.render(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) +
注 2.7+ : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。 + +``` +
+
+
+ + +``` + +

属性

+ +
+{{- d.include("docs/colorpicker/detail/options.md") }} +
+ +## 兼容性 + +> colorpicker 组件支持 `Chrome,Edge,Firefox` 等所有高级浏览器，不支持 IE10 低版本浏览器。 \ No newline at end of file diff --git a/docs/dropdown/detail/demo.md b/docs/dropdown/detail/demo.md new file mode 100644 index 00000000..08cb32b0 --- /dev/null +++ b/docs/dropdown/detail/demo.md @@ -0,0 +1,57 @@ +

基础用法

+ +
+  
+
+ +

复杂结构

+ +
+  
+
+ +

在表格中应用

+ +
+  
+
+ +

自定义事件

+ +
+  
+
+ +

右键菜单

+ +
+  
+
+ +

水平对齐方式

+ +
+  
+
+ +

自定义内容

+ +如下以弹出一个 `tab` 为例 + +
+  
+
\ No newline at end of file diff --git a/docs/dropdown/detail/options.data.md b/docs/dropdown/detail/options.data.md new file mode 100644 index 00000000..256b88f0 --- /dev/null +++ b/docs/dropdown/detail/options.data.md @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名描述类型默认值
title + +菜单标题 + +string-
id + +菜单 ID。用户菜单项唯一索引 + + +number/string-
type + +菜单项的类型，支持的可选值如下： + +- `normal` 普通菜单项（默认） +- `group` 纵向组合收缩菜单 +- `parent` 横向父级菜单 +- `-` 分割线 + +string + +`normal` + +
href + +菜单项的 url 地址。若填写，点击菜单将直接发生跳转。 + +string-
target + +菜单 url 打开方式，需设置 `href` 属性后才生效。 一般可设为 `_blank` 或 `_self` 等 + +string + +`_self` + +
disabled 2.8+ + +菜单项是否禁用状态 + +boolean + +`false` + +
templet + +自定义当前菜单项模板，优先级高于基础属性 `templet` + +string/function-
child + +子级菜单数据集合。参数同父级，可无限嵌套。 + +array-
\ No newline at end of file diff --git a/docs/dropdown/detail/options.md b/docs/dropdown/detail/options.md new file mode 100644 index 00000000..406ec566 --- /dev/null +++ b/docs/dropdown/detail/options.md @@ -0,0 +1,266 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名描述类型默认值
elem + +绑定元素选择器或 DOM 对象 + +string/DOM-
+ +[data](#options.data) + + + +下拉菜单的数据源。格式详见：[#data 格式](#options.data) + +array-
trigger + +触发组件的事件类型。支持所有事件，如： `click,hover,mousedown,contextmenu` 等 + +string + +`click` + +
show + +是否渲染即显示组件面板。该属性一般在重载方法中传递。 + +boolean + +`false` + +
align + +下拉面板相对绑定元素的水平对齐方式。支持以下可选值： + +- `left` 左对齐（默认） +- `center` 居中对齐 +- `right` 右对齐 + +string + +`left` + +
isAllowSpread + +是否允许菜单组展开收缩 + +boolean + +`true` + +
isSpreadItem + +是否初始展开子菜单 + +boolean + +`true` + +
delay + +延迟关闭的毫秒数。当 `trigger: 'hover'` 时才生效 + +number + +`300` + +
className + +自定义组件主容器的样式类名，从而在外部重新定义样式。 + +string-
style + +设置组件主容器的 `CSS` 样式。 + +string-
shade 2.8+ + +设置弹出时的遮罩。支持以下方式赋值： + +- 若值为 `number` 类型，则表示为遮罩透明度，如: +
`shade: 0.3` +- 若值为 `array` 类型，则可同时设置透明度和背景色，如: +
`shade: [0.3, '#000']` + +		number
array		 + +`0` + +
templet + +全局定义菜单的列表模板，可添加任意 `html` 字符，且支持 [laytpl](../laytpl/) 模板语法。用法详见：[#示例](#demo-complex) + +注 2.8+ : 模板亦可采用函数写法： + +``` +templet: function(d){ + return ' ' + d.title; +} +``` + +string
function		-
content + + 自定义组件内容，从而替代默认的菜单结构。用法详见：[#示例](#demo-content) + +string-
clickScope 2.8+ + +设置触发点击事件的菜单范围。 支持以下可选值： + +- `all` : 即代表父子菜单均可触发事件 + +默认无需设置，即父级菜单不触发事件 + +string-
+ + +
+ +[回调函数](#options.callback) + +
+ +
ready + +组件成功弹出后的回调函数。返回的参数如下： + +``` +ready: function(elemPanel, elem){ + console.log(elemPanel); // 组件面板元素对象 + console.log(elem); // 当前组件绑定的目标元素对象 +} +``` + +
+ +[click](#options.click) + + + +
+菜单项被点击时的回调函数。返回的参数如下： +
+ +``` +click: function(data, othis){ + console.log(data); // 当前所点击的菜单项对应的数据 + console.log(othis); // 当前所点击的菜单项元素对象 + console.log(this.elem); // 当前组件绑定的目标元素对象，批量绑定中常用 + + // 若返回 false，则点击选项可不关闭面板 --- 2.8+ + /* + return false; + */ +``` + +用法详见：[#示例](#examples) + +
\ No newline at end of file diff --git a/docs/dropdown/examples/align.md b/docs/dropdown/examples/align.md new file mode 100644 index 00000000..ef6910f1 --- /dev/null +++ b/docs/dropdown/examples/align.md @@ -0,0 +1,37 @@ +
+ + + +
+ + \ No newline at end of file diff --git a/docs/dropdown/examples/base.md b/docs/dropdown/examples/base.md new file mode 100644 index 00000000..20bf7d37 --- /dev/null +++ b/docs/dropdown/examples/base.md @@ -0,0 +1,120 @@ +
+ + +
+ +
+ +
+
+ 可以绑定任意元素， + + 比如这段文字 + + +
+ + \ No newline at end of file diff --git a/docs/dropdown/examples/complex.md b/docs/dropdown/examples/complex.md new file mode 100644 index 00000000..1782a86a --- /dev/null +++ b/docs/dropdown/examples/complex.md @@ -0,0 +1,128 @@ + + + \ No newline at end of file diff --git a/docs/dropdown/examples/content.md b/docs/dropdown/examples/content.md new file mode 100644 index 00000000..9c74fda1 --- /dev/null +++ b/docs/dropdown/examples/content.md @@ -0,0 +1,39 @@ + + + + + \ No newline at end of file diff --git a/docs/dropdown/examples/contextmenu.md b/docs/dropdown/examples/contextmenu.md new file mode 100644 index 00000000..4f3e4d54 --- /dev/null +++ b/docs/dropdown/examples/contextmenu.md @@ -0,0 +1,88 @@ +
+ 在此区域单击鼠标右键 +
+ + + + \ No newline at end of file diff --git a/docs/dropdown/examples/on.md b/docs/dropdown/examples/on.md new file mode 100644 index 00000000..489fca0b --- /dev/null +++ b/docs/dropdown/examples/on.md @@ -0,0 +1,37 @@ +
+ + + +
+ + \ No newline at end of file diff --git a/docs/dropdown/examples/reload.md b/docs/dropdown/examples/reload.md new file mode 100644 index 00000000..97c424dc --- /dev/null +++ b/docs/dropdown/examples/reload.md @@ -0,0 +1,39 @@ + + + \ No newline at end of file diff --git a/docs/dropdown/examples/reloadData.md b/docs/dropdown/examples/reloadData.md new file mode 100644 index 00000000..67a0e0c9 --- /dev/null +++ b/docs/dropdown/examples/reloadData.md @@ -0,0 +1,57 @@ +
+
+ +
+ +
+
+
+ + \ No newline at end of file diff --git a/docs/dropdown/examples/table.md b/docs/dropdown/examples/table.md new file mode 100644 index 00000000..546ef5b0 --- /dev/null +++ b/docs/dropdown/examples/table.md @@ -0,0 +1,76 @@ +
+ + + + \ No newline at end of file diff --git a/docs/dropdown/index.md b/docs/dropdown/index.md new file mode 100644 index 00000000..1c43ccc4 --- /dev/null +++ b/docs/dropdown/index.md @@ -0,0 +1,135 @@ +--- +title: 下拉菜单 dropdown +toc: true +--- + +# 下拉菜单 2.6+ + +> 下拉菜单 `dropdown` 是基于基础菜单结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的*下拉菜单*，更可用于*右键菜单*来实现更多的交互可能。 + +

示例

+ +
+{{- d.include("docs/dropdown/detail/demo.md") }} +
+ +在 `content` 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更丰富的弹出内容。 + +

API

+ +| API | 描述 | +| --- | --- | +| var dropdown = layui.dropdown | 获得 `dropdown` 模块。 | +| [dropdown.render(options)](#render) | dropdown 组件渲染，核心方法。 | +| [dropdown.reload(id, options)](#reload) | 完整重载 | +| [dropdown.reloadData(id, options)](#reload) 2.8+ | 仅重载数据或内容 | +| [dropdown.close(id)](#close) | 关闭对应的组件面板 | + +

渲染

+ +`dropdown.render(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) +
注 2.8+ : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。 + +``` + + + + + +``` + +

属性

+ +
+{{- d.include("docs/dropdown/detail/options.md") }} +
+ +

data 格式

+ +
+{{- d.include("docs/dropdown/detail/options.data.md") }} +
+ + +

重载

+ +即对一段已经渲染好的下拉菜单重新设置相关属性并渲染，可分为以下几种重载方式： + +| 重载方式 | API | +| --- | --- | +| [完整重载](#dropdown.reload) | [dropdown.reload(id, options, deep)](#dropdown.reload) | +| [仅数据或内容重载](#dropdown.reloadData) 2.8+ | [dropdown.reloadData(id, options, deep)](#dropdown.reloadData) | + + +两者重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。 + + + +`dropdown.reload(id, options);` + +- 参数 `id` : 组件渲染时定义的 `id` 属性值 +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +该方法用于对下拉菜单进行完整重载，所有属性均可参与到重载中。 + +
+  
+
+ + + +`dropdown.reloadData(id, options);` + +- 参数同 `dropdown.reload(id, options)` 参数 + +使用该方法时，与数据无关的属性不会参与到重载中。因此若只是更新数据或内容，该方法可大幅提升体验。 + +
+  
+
+ + +

关闭面板 2.8+

+ +`dropdown.close(id);` + +- 参数 `id` : 组件渲染时定义的 `id` 属性值 + +该方法用于关闭对应的 `dropdown` 组件面板。 + +``` +var dropdown = layui.dropdown; + +// 渲染 +dropdown.render({ + elem: '', // 绑定元素选择器 + id: 'test', // 自定义 id + // 其他属性 … +}); +// 关闭对应的组件面板 +dropdown.close('test'); +``` \ No newline at end of file diff --git a/docs/fixbar/detail/demo.md b/docs/fixbar/detail/demo.md new file mode 100644 index 00000000..97a686be --- /dev/null +++ b/docs/fixbar/detail/demo.md @@ -0,0 +1,69 @@ +
+  
+
\ No newline at end of file diff --git a/docs/fixbar/detail/options.md b/docs/fixbar/detail/options.md new file mode 100644 index 00000000..debfbc30 --- /dev/null +++ b/docs/fixbar/detail/options.md @@ -0,0 +1,171 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名描述类型默认值
bars 2.8+ + +设置固定工具条列表。可支持定义以下子属性： + +``` +bars: [ + { + type: '', // bar 类型名，用于事件区分 + icon: '', // bar 图标的 className + content: '', // bar 任意内容 + style: '' // bar 任意样式 + }, + // … +] +``` + +该属性比较灵活，具体用法可参考：[#示例](#examples) + +array + + + +
default 2.8+ + +是否显示默认的固定条 ，如 `top` （点击可让滚动条置顶）等 + +boolean + +`true` + +
bgcolor + +固定条的默认背景色 + +string-
css + +工具条外层容器的任意 css 属性。如设置工具条的坐标： + +``` +css: {right: 32, bottom: 32} +``` + +object-
target 2.8+ + +插入固定条的目标元素选择器 + +object + +`body` + +
scroll 2.8+ + +固定条最外层容器滚动条所在的元素，若不设置则默认取 `target` 属性值 + +object + +`body` + +
margin 2.8+ + +用于设置默认 `TOP` 条出现滚动条的高度临界值 + +number + +`200` + +
duration 2.8+ + +用于默认 `TOP` 条等动画时长 + +number + +`200` + +
on 2.8+ + +用于定义固定条列表的任意事件，触发事件时的回调将返回 `bars` 属性的 `type` 值。 + +``` +on: { + // 点击事件 + click: function(type){ + // bars 对属性应的 type 值 + console.log(type); + }, + // … +} +``` + +该属性一般与 `bars` 属性搭配使用，具体用法可参考：[#示例](#examples) + +object-
+ + +### 贴士 + +> 灵活运用 `bars` 属性的 `content,style` 子属性，可实现更多丰富多样的固定条。 \ No newline at end of file diff --git a/docs/fixbar/index.md b/docs/fixbar/index.md new file mode 100644 index 00000000..3362d140 --- /dev/null +++ b/docs/fixbar/index.md @@ -0,0 +1,33 @@ +--- +title: 固定条组件 fixbar +toc: true +--- + +# 固定条组件 + +> 固定条组件 `fixbar` 是指当滚动条滑动时，始终固定在页面一侧的工具条元素，除了内置的 `TOP` 条功能外，还可以灵活地扩展任意自定义的工具条。在 `2.x` 版本中，`fixbar` 属于 `util` 模块的子集。 + +

示例

+ +
+{{- d.include("docs/fixbar/detail/demo.md") }} +
+ +

API

+ +| API | 描述 | +| --- | --- | +| var util = layui.util | 获得 `util` 模块。 | +| [util.fixbar(options)](#fixbar) | fixbar 组件渲染，核心方法。 | + +

渲染

+ +`util.fixbar(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +

属性

+ +
+{{- d.include("docs/fixbar/detail/options.md") }} +
\ No newline at end of file diff --git a/docs/flow/detail/demo.md b/docs/flow/detail/demo.md new file mode 100644 index 00000000..02cc034e --- /dev/null +++ b/docs/flow/detail/demo.md @@ -0,0 +1,61 @@ +

滚动加载

+ +
+  
+
+ +

手动加载

+ +
+  
+
\ No newline at end of file diff --git a/docs/flow/detail/options.md b/docs/flow/detail/options.md new file mode 100644 index 00000000..f55adf04 --- /dev/null +++ b/docs/flow/detail/options.md @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名描述类型默认值
elem + +绑定元素选择器或 DOM 对象 + +string-
scrollElem + +指定触发流加载的滚动条所在元素选择器。 + +string + +`document` + +
isAuto + +是否自动加载。 若设为 `false`，则会在列表底部生成一个「加载更多」的按钮，那么可点击该按钮加载下一页数据。 + +boolean + +`true` + +
end + +设置加载完毕后的最尾部的内容，可传入任意 HTML 字符。 + +string + +没有更多了 + +
isLazyimg + +是否开启信息流中的图片懒加载。若设为 `true` ，则只会对在可视区域的图片进行按需加载。但同时，在拼接列表字符的时候，您不能给列表中的 `` 标签赋值 `src`，必须要用 `lay-src` 属性取代，如： + +``` +layui.each(data, function(index, item){ + lis.push('
    • '); +}); +``` + +    		boolean + +`false` + +
    mb + +与底部的临界距离。 即当滚动条与底部产生该距离时，触发加载。 必须 `isAuto:true` 时有效。 + +*小贴士*： 此处 `mb` 属性名是 css 中 `margin-bottom` 的简写，可并非国粹之语 😅 + +number + +`50` + +
    done + +
    +滚动条到达临界点触发加载的回调函数。函数返回的参数如下： +
    + +``` +done: function(page, next){ + console.log(page) // 获得当前页 + + // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 + // 只有当前页小于总页数的情况下，才会继续出现加载更多 + next('列表 HTML 片段', page < res.pages); +} +``` + +详细用法可参考：[#示例](#examples) + +
    \ No newline at end of file diff --git a/docs/flow/index.md b/docs/flow/index.md new file mode 100644 index 00000000..be1ea987 --- /dev/null +++ b/docs/flow/index.md @@ -0,0 +1,90 @@ +--- +title: 流加载 flow +toc: true +--- + +# 流加载 + +> 流加载 `flow` 是用于在*信息流*和*图片列表*场景中的滚动按需加载，对前后端的体验和性能优化具有一定帮助。 + +

    示例

    + + + +
    +{{- d.include("docs/flow/detail/demo.md") }} +
    + +

    API

    + +| API | 描述 | +| --- | --- | +| var flow = layui.flow | 获得 `flow` 模块。 | +| [flow.load(options)](#load) | 信息流加载，核心方法。 | +| [flow.lazyimg(options)](#lazyimg) | 图片懒加载。 | + +

    信息流

    + +`flow.load(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +信息流是分页的另一种表现形式，新加载的内容不替换原有的内容，而是随着滚动条滚动而追加显示。[#详见示例](#examples) + +

    属性

    + +
    +{{- d.include("docs/flow/detail/options.md") }} +
    + +

    图片懒加载

    + +`flow.lazyimg(options);` + +- 参数 `options` : 属性配置项。可选项见下表。 + +| 属性名 | 描述 | +| --- | --- | +| elem | 绑定容器中需进行懒加载的图片元素选择器 | +| scrollElem | 滚动条所在元素选择器，默认 `document` 。 | + +
    +  
+
    + +无论滚动条上滑还是下滑，都会始终加载当前屏的图片。 + diff --git a/docs/form/checkbox.md b/docs/form/checkbox.md new file mode 100644 index 00000000..98c57a68 --- /dev/null +++ b/docs/form/checkbox.md @@ -0,0 +1,119 @@ +--- +title: 复选框 +toc: true +--- + +# 复选框 + +> 复选框组件是对 `` 元素的美化替代，在原有的特性基础上，对 UI 进行了加强。 + + +

    默认风格

    + +
    +  
+
    + +- 属性 `title` 可设置复选框标题 +- 属性 `checked` 可设置默认选中 +- 属性 `disabled` 可设置禁用状态 +- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制） +- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`2.8+,`switch`，默认风格可不填 + +特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。 + +注 2.8+： `lay-skin` 属性在之前版本默认为标签风格，新版本调整为默认原始风格（`lay-skin="primary"`）。 + +

    标签风格

    + +
    +  
+
    + + +

    开关风格

    + +
    +  
+
    + +在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题 + + +

    复选框事件

    + +`form.on('checkbox(filter)', callback);` + +- `checkbox` 为复选框事件固定名称 +- `filter` 为复选框元素对应的 `lay-filter` 属性值 + +该事件在复选框选中或取消选中时触发。 + +
    +  
+
    \ No newline at end of file diff --git a/docs/form/examples/form.demo.md b/docs/form/examples/form.demo.md new file mode 100644 index 00000000..2f84b569 --- /dev/null +++ b/docs/form/examples/form.demo.md @@ -0,0 +1,256 @@ +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    6 到 12 位字符
    +
    +
    +
    + +
    + +
    +
    -
    +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    + + + +
    +
    +
    + +
    + + + +
    +
    +
    + +
    + +
    +
    +
    + +
    + + + +
    +
    +
    + +
    + <textarea placeholder="请输入内容" class="layui-textarea"></textarea> +
    +
    +
    +
    + + +
    +
    +
    + + \ No newline at end of file diff --git a/docs/form/examples/form.grid.md b/docs/form/examples/form.grid.md new file mode 100644 index 00000000..731ddb81 --- /dev/null +++ b/docs/form/examples/form.grid.md @@ -0,0 +1,108 @@ +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    + + +
    +
    + + \ No newline at end of file diff --git a/docs/form/examples/form.login.md b/docs/form/examples/form.login.md new file mode 100644 index 00000000..39610aae --- /dev/null +++ b/docs/form/examples/form.login.md @@ -0,0 +1,79 @@ + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + + 忘记密码？ +
    +
    + +
    + +
    +
    + + \ No newline at end of file diff --git a/docs/form/examples/form.pane.md b/docs/form/examples/form.pane.md new file mode 100644 index 00000000..fac32f12 --- /dev/null +++ b/docs/form/examples/form.pane.md @@ -0,0 +1,101 @@ + +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    请务必填写用户名
    +
    +
    +
    + +
    + +
    +
    -
    +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + + + +
    +
    +
    + +
    + <textarea placeholder="请输入内容" class="layui-textarea"></textarea> +
    +
    +
    + + +
    +
    + + \ No newline at end of file diff --git a/docs/form/examples/form.reg.md b/docs/form/examples/form.reg.md new file mode 100644 index 00000000..f4af24b0 --- /dev/null +++ b/docs/form/examples/form.reg.md @@ -0,0 +1,130 @@ + +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    + + + 用户协议 + +
    +
    + +
    +
    + + + + + + + 登录已有帐号 +
    +
    +
    + + \ No newline at end of file diff --git a/docs/form/examples/form.val.md b/docs/form/examples/form.val.md new file mode 100644 index 00000000..41ba84f5 --- /dev/null +++ b/docs/form/examples/form.val.md @@ -0,0 +1,112 @@ +
    +
    + + +
    + +
    + +
    + +
    +
    + +
    + +
    + +
    +
    + +
    + +
    + +
    +
    + +
    + +
    + + + +
    +
    + +
    + +
    + +
    +
    + +
    + +
    + + +
    +
    + +
    + +
    + <textarea placeholder="请输入" class="layui-textarea" name="desc"></textarea> +
    +
    + +
    +
    + + +
    +
    +
    + + \ No newline at end of file diff --git a/docs/form/examples/form.validate.md b/docs/form/examples/form.validate.md new file mode 100644 index 00000000..ed3ff895 --- /dev/null +++ b/docs/form/examples/form.validate.md @@ -0,0 +1,56 @@ +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + + \ No newline at end of file diff --git a/docs/form/examples/form.verify.md b/docs/form/examples/form.verify.md new file mode 100644 index 00000000..62cfdee6 --- /dev/null +++ b/docs/form/examples/form.verify.md @@ -0,0 +1,50 @@ +
    + +
    + +
    + +
    + + \ No newline at end of file diff --git a/docs/form/examples/input.affix.custom.md b/docs/form/examples/input.affix.custom.md new file mode 100644 index 00000000..01f29066 --- /dev/null +++ b/docs/form/examples/input.affix.custom.md @@ -0,0 +1,39 @@ +
    +
    + +
    +
    +
    + +
    +
    + + \ No newline at end of file diff --git a/docs/form/examples/input.group.md b/docs/form/examples/input.group.md new file mode 100644 index 00000000..6ef3d65a --- /dev/null +++ b/docs/form/examples/input.group.md @@ -0,0 +1,82 @@ +
    +
    +
    +
    + 身高 +
    + +
    + cm +
    +
    +
    +
    +
    +
    + 手机号 +
    + +
    + +
    +
    +
    +
    +
    +
    + 用户名 +
    + +
    +
    + +
    +
    + +
    + +
    +
    +
    +
    +
    +
    + 搜索 +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + 身高 +
    + +
    + cm +
    +
    +
    +
    +
    +
    + 昵称 +
    + +
    +
    +
    +
    + +
    + 任意后置内容 +
    +
    +
    +
    \ No newline at end of file diff --git a/docs/form/examples/input.pre.suf.md b/docs/form/examples/input.pre.suf.md new file mode 100644 index 00000000..76d14cdb --- /dev/null +++ b/docs/form/examples/input.pre.suf.md @@ -0,0 +1,94 @@ +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    \ No newline at end of file diff --git a/docs/form/index.md b/docs/form/index.md new file mode 100644 index 00000000..1c85b2d6 --- /dev/null +++ b/docs/form/index.md @@ -0,0 +1,396 @@ +--- +title: 表单组件 form +toc: true +--- + +# 表单组件 🔥 + +> 表单组件`form`是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。`form`是 Layui 最常用的组件之一。 + +

    示例

    + +

    综合演示

    + +
    +  
+
    + +

    方框风格

    + +
    +  
+
    + +

    登录模板 2.8+

    + +
    +  
+
    + +

    注册模板 2.8+

    + +
    +  
+
    + +更多其他表单模板均可自由布局实现，为了避免影响文档其他重要版面的阅读，我们就不做过多演示了。 + + +

    表单布局

    + +### 🌕 普通布局 + +在上文的「[综合演示](#examples)」示例中，我们用的是 form 组件自身的普通布局。其要点为： + +- 通过 `class="layui-form"` 定义一个表单域，通常设置在`
    `标签上， 或普通`
    ` 标签亦可。 +- 通过 `class="layui-form-item"` 定义一个块级元素的表单项容器 +- 通过 `class="layui-form-label"` 定义标签 +- 通过 `class="layui-form-block"` 定义表单项父容器为块级元素 +- 通过 `class="layui-form-inline"` 或 `class="layui-inline"` 定义表单项父容器为行内块元素 + +即必须按照规定的层级定义相应的 `class`。 + +### 🌕 栅格布局 + +form 还可以借助*栅格*实现更灵活的响应式布局。 + +
    +  
+
    + +

    API

    + +| API | 描述 | +| --- | --- | +| var form = layui.form | 获得 `form` 模块。 | +| [form.render(type, filter)](#render) | 表单域组件渲染，核心方法。[#用法](#render) | +| [form.verify(obj)](#verify) | 自定义表单验证的规则。[#用法](#verify) | +| [form.validate(elem)](#validate) 2.7+ | 主动触发执行验证。[#用法](#validate) | +| [form.val(filter, obj)](#val) | 表单赋值或取值。 [#用法](#val) | +| [form.submit(filter, callback)](#submit) 2.7+ | 用于主动执行指定表单的提交。[#用法](#submit) | +| [form.on(\'event(filter)\', callback)](#on) | 事件。[#用法](#on) | +| form.config | 获取 form 组件全局配置项。 | +| form.set(options) | 设置 form 组件全局配置项。 | + +

    属性

    + +在表单域中，有时还需要定义一些特定属性来配合组件的使用，它们一般以 `lay-*` 为命名格式，如： + +``` + + + + + + +``` + +以下为 `form` 组件的特定属性列表： + +| 属性 | 值 | 描述 | +| --- | --- | --- | +| title | 自定义 | 设置表单元素标题，一般用于 `checkbox,radio` 元素 | +| lay-filter | 自定义 | 设置表单元素的过滤器，以便用于执行相关方法时的参数匹配 | +| lay-verify | `required`必填项
    `phone`手机号
    `email`邮箱
    `url`网址
    `number`数字
    `date`日期
    `identity`身份证
    `自定义规则值` | 设置表单项的验证规则，支持单条或多条规则（多条用`\|`分隔），如：
    `lay-verify="required"`
    `lay-verify="required\|email"`
    `lay-verify="其他自定义规则值"`
    自定义规则的用法：[#详见](#verify) | +| lay-vertype | `tips`吸附层
    `alert` 对话框
    `msg` 默认 | 设置验证异常时的提示层模式 | +| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 | +| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，``元素 **私有属性** | +| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `` 元素 **私有属性** | +| lay-search | 默认不区分大小写;
    设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。` + + + +
    + + +``` + +### **忽略渲染** + +若表单域中的部分表单不需要 Layui 来渲染，那么可通过 `lay-ignore` 属性让其保留系统原始 UI 风格。 + +
    +  
+
    + + +

    验证

    + +Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay-verify=""` 属性值即可指定验证规则，如： + +``` +
    + + + + +
    +``` + +其中，`lay-verify` 属性的内置规则值可参考上文的：[#属性介绍](#attr)。 当表单提交时，会自动触发验证。 + +

    自定义验证规则

    + +`form.verify(obj);` + +- 参数 `obj` 是一个对象，用于定义验证规则的集合。 + +当内置的验证规则无法满足业务需求时，我们可以通过该方法自定义验证规则。如： + +
    +  
+
    + +更多「自定义验证规则」示例参考： + +> - 将 form 提示语显示在表单项旁边，并在提交时批量触发验证 +> - 重置 form 内置验证规则，让其：当非空值才进行验证；加了 required 时才验证非空 + + +

    主动触发验证 2.7+

    + +`form.validate(elem);` + +- 参数 `elem` 为元素选择器或 jQuery 对象； 若验证通过，该方法将返回 true，否则返回 false + +
    +  
+
    + + +

    赋值/取值

    + +`form.val(filter, obj);` + +- 参数 `filter` 为表单域容器（`class="layui-form"`）的 `lay-filter` 属性值 +- 参数 `obj` 可选。若参数存在，则对表单域进行赋值；若参数不存在，则为对表单域进行取值。 + +
    +  
+
    + + +

    提交

    + +表单的提交可以通过事件触发或方法触发 + +### **提交事件** + +在表单域中，对指定按钮设置 `lay-submit` 属性，即意味着点击该按钮时，将触发提交事件。如： + +
    +  
+
    + +### **提交方法** 2.7+ + +`form.submit(filter, callback);` + +- 参数 `filter` 为表单域容器的 `lay-filter` 属性值 +- 参数 `callback` 为执行提交事件后的回调函数 + +使用该方法可以实现在任意位置对指定表单的主动提交，相比上述的提交事件更加灵活。 + +
    +  
+
    + +

    事件

    + +`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); +}); + +// 指向元素为 `` 的选择事件 +form.on('select(test)', function(data){ + console.log(data); +}); +``` \ No newline at end of file diff --git a/docs/form/input.md b/docs/form/input.md new file mode 100644 index 00000000..46e7b5a7 --- /dev/null +++ b/docs/form/input.md @@ -0,0 +1,199 @@ +--- +title: 输入框 / 文本域 +toc: true +--- + +# 输入框 + +> 输入框组件是对文本框``和多行文本框` + + + +

    输入框点缀 2.8+

    + +输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：*容器、前缀、输入框、后缀*。 + +``` +
    +
    + +
    +
    +``` + +- 容器类： + - 前置和后置结构：`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 类来实现点缀布局，再按照不同需求，在前缀和后缀中放置图标等任意内容。 + + +

    前置和后置

    + +前置和后置结构是*输入框的自适应结构*，可以很灵活地控制前后置内容与输入框的宽度比例。 + +- 结构： + +``` +
    +
    前置内容
    + +
    后缀内容
    +
    +``` + +- 示例： + +
    +  
+
    + + +

    前缀和后缀

    + +输入框前缀和后缀是*输入框的纯修饰结构*，前缀和后缀宽度固定且其元素不可触及，即只能触及输入框本身。 + +- 结构： + +``` +
    +
    前缀图标
    + +
    后缀图标
    +
    +``` + +- 示例： + +
    +  
+
    + +注意「前置和后置」与「前缀和后缀」 二者使用时切勿混淆。 + + +

    动态点缀 2.8+

    + +该功能允许对输入框内容进行相关动态操作。通过对输入框元素设置 `lay-affix` 属性来开启动态点缀，且输入框元素必须放置在一个具有输入框点缀结构的容器中（上文有讲解）。如： + +``` +input 放在前后置容器中： +
    + +
    + +input 放在前后缀容器中： +
    + +
    +``` + +`lay-affix` 属性支持设置内置属性值和自定义值 + +| 值 | 描述 | +| --- | --- | +| `lay-affix="eye"` | 密码框显隐 | +| `lay-affix="clear"` | 内容清除 | +| `lay-affix="自定义图标值"` | 值对应图标类`layui-icon-`后面的名称（[#详见图标列表](../icon/#list)）。
    可通过「[点缀事件](#affix-event)」完成自定义操作 | + + +

    密码显隐

    + +
    +  
+
    + +

    内容清除

    + +
    +  
+
    + +

    自定义动态点缀

    + +我们还可以对 `lay-affix` 属性设置任意图标值，从而实现自定义动态点缀功能。 + +
    +  
+
    + +输入框的自定义动态点缀功能，让原本单一的输入框有了更多的想象空间。 + + +

    点缀事件

    + +`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 属性值 +}); +``` + + + + diff --git a/docs/form/radio.md b/docs/form/radio.md new file mode 100644 index 00000000..64d43f56 --- /dev/null +++ b/docs/form/radio.md @@ -0,0 +1,103 @@ +--- +title: 单选框 +toc: true +--- + +# 单选框 + +> 单选框组件是对 `` 元素的美化替代。 + +

    普通单选框

    + +
    +  
+
    + +- 属性 `title` 可设置单选框标题 +- 属性 `checked` 可设置默认选中 +- 属性 `disabled` 可设置禁用状态 +- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）。同组单选框一般设置相同值。 + +

    自定义标题模板

    + +在 `radio` 元素后的相邻元素设置特定属性 `lay-radio`，可以与 `radio` 标题进行绑定。 + +
    +  
+
    + +

    单选框事件

    + +`form.on('radio(filter)', callback);` + +- `radio` 为单选框事件固定名称 +- `filter` 为单选框元素对应的 `lay-filter` 属性值 + +该事件在单选框被点击或选中时触发。 + +
    +  
+
diff --git a/docs/form/select.md b/docs/form/select.md
new file mode 100644
index 00000000..e79641cd
--- /dev/null
+++ b/docs/form/select.md
@@ -0,0 +1,203 @@
+---
+title: 选择框
+toc: true
+---
+ 
+# 选择框
+
+> 选择框组件是对 `
+
    + +- 若第一项 `value` 为空，通常只作为选择框提示性引导；若第一项 `value` 不为空，则作为默认选中项。 +- 通过给选项添加 `selected` 属性优先设置默认选中项。 +- 通过给 `` 标签上同样支持设置表单的其他公共属性（[#详见](./#attr)）。 + +

    分组选择框

    + +通过 `` 标签给选择框分组 + +
    +  
+
    + + + + +在 ` + + + +

    选择框事件

    + +`form.on('select(filter)', callback);` + +- `select` 为选择框事件固定名称 +- `filter` 为选择框元素对应的 `lay-filter` 属性值 + +该事件在选择框选项选中后触发。 + +
    +  
+
    diff --git a/docs/icon/index.md b/docs/icon/index.md new file mode 100644 index 00000000..3e3a852e --- /dev/null +++ b/docs/icon/index.md @@ -0,0 +1,1174 @@ +--- +title: 图标 +toc: true +--- + +# 图标 + +> Layui 图标采用字体形式，取材于阿里巴巴矢量图标库 `iconfont`，因此可以把一个 `icon` 看作是一个普通的文本，直接通过 `css` 即可设定其样式。图标支持 `font-class` 或 `unicode` 两种格式。 + +

    示例

    + +
    +  
+
    + +通过对一个内联元素（如 ``标签）添加基础类 `class="layui-icon"` 来定义一个图标，然后对元素加上图标对应的 `font-class`，即可显示出你想要的图标，如上所示。 + + +

    图标列表（186 个）

    + +
    +
    + +
    Github
    +
    &#xe6a7;
    +
    layui-icon-github
    +
    +
    + +
    月亮
    +
    &#xe6c2;
    +
    layui-icon-moon
    +
    +
    + +
    错误
    +
    &#xe693;
    +
    layui-icon-error
    +
    +
    + +
    成功
    +
    &#xe697;
    +
    layui-icon-success
    +
    +
    + +
    问号
    +
    &#xe699;
    +
    layui-icon-question
    +
    +
    + +
    锁定
    +
    &#xe69a;
    +
    layui-icon-lock
    +
    + +
    + +
    显示
    +
    &#xe695;
    +
    layui-icon-eye
    +
    +
    + +
    隐藏
    +
    &#xe696;
    +
    layui-icon-eye-invisible
    +
    +
    + +
    清空/删除
    +
    &#xe788;
    +
    layui-icon-clear
    +
    +
    + +
    退格
    +
    &#xe694;
    +
    layui-icon-backspace
    +
    +
    + +
    禁用
    +
    &#xe6cc;
    +
    layui-icon-disabled
    +
    +
    + +
    感叹号/提示
    +
    &#xeb2e;
    +
    layui-icon-tips-fill
    +
    + +
    + +
    测试/K线图
    +
    &#xe692;
    +
    layui-icon-test
    +
    +
    + +
    音乐/音符
    +
    &#xe690;
    +
    layui-icon-music
    +
    +
    + +
    Chrome
    +
    &#xe68a;
    +
    layui-icon-chrome
    +
    +
    + +
    Firefox
    +
    &#xe686;
    +
    layui-icon-firefox
    +
    +
    + +
    Edge
    +
    &#xe68b;
    +
    layui-icon-edge
    +
    +
    + +
    IE
    +
    &#xe7bb;
    +
    layui-icon-ie
    +
    + +
    + +
    实心
    +
    &#xe68f;
    +
    layui-icon-heart-fill
    +
    +
    + +
    空心
    +
    &#xe68c;
    +
    layui-icon-heart
    +
    +
    + +
    太阳/明亮
    +
    &#xe748;
    +
    layui-icon-light
    +
    +
    + +
    时间/历史
    +
    &#xe68d;
    +
    layui-icon-time
    +
    + +
    + +
    蓝牙
    +
    &#xe689;
    +
    layui-icon-bluetooth
    +
    +
    + +
    @艾特
    +
    &#xe687;
    +
    layui-icon-at
    +
    +
    + +
    静音
    +
    &#xe685;
    +
    layui-icon-mute
    +
    +
    + +
    录音/麦克风
    +
    &#xe6dc;
    +
    layui-icon-mike
    +
    +
    + +
    密钥/钥匙
    +
    &#xe683;
    +
    layui-icon-key
    +
    +
    + +
    礼物/活动
    +
    &#xe627;
    +
    layui-icon-gift
    +
    +
    + +
    邮箱
    +
    &#xe618;
    +
    layui-icon-email
    +
    +
    + +
    RSS
    +
    &#xe808;
    +
    layui-icon-rss
    +
    +
    + +
    WiFi
    +
    &#xe7e0;
    +
    layui-icon-wifi
    +
    +
    + +
    退出/注销
    +
    &#xe682;
    +
    layui-icon-logout
    +
    +
    + +
    Android 安卓
    +
    &#xe684;
    +
    layui-icon-android
    +
    +
    + +
    Apple IOS 苹果
    +
    &#xe680;
    +
    layui-icon-ios
    +
    +
    + +
    Windows
    +
    &#xe67f;
    +
    layui-icon-windows
    +
    +
    + +
    穿梭框
    +
    &#xe691;
    +
    layui-icon-transfer
    +
    +
    + +
    客服
    +
    &#xe626;
    +
    layui-icon-service
    +
    +
    + +
    减
    +
    &#xe67e;
    +
    layui-icon-subtraction
    +
    +
    + +
    加
    +
    &#xe624;
    +
    layui-icon-addition
    +
    +
    + +
    滑块
    +
    &#xe714;
    +
    layui-icon-slider
    +
    +
    + +
    打印
    +
    &#xe66d;
    +
    layui-icon-print
    +
    +
    + +
    导出
    +
    &#xe67d;
    +
    layui-icon-export
    +
    +
    + +
    列
    +
    &#xe610;
    +
    layui-icon-cols
    +
    +
    + +
    退出全屏
    +
    &#xe758;
    +
    layui-icon-screen-restore
    +
    +
    + +
    全屏
    +
    &#xe622;
    +
    layui-icon-screen-full
    +
    + +
    + +
    半星
    +
    &#xe6c9;
    +
    layui-icon-rate-half
    +
    +
    + +
    星星-空心
    +
    &#xe67b;
    +
    layui-icon-rate
    +
    +
    + +
    星星-实心
    +
    &#xe67a;
    +
    layui-icon-rate-solid
    +
    +
    + +
    手机
    +
    &#xe678;
    +
    layui-icon-cellphone
    +
    +
    + +
    验证码
    +
    &#xe679;
    +
    layui-icon-vercode
    +
    +
    + +
    微信
    +
    &#xe677;
    +
    layui-icon-login-wechat
    +
    +
    + +
    QQ
    +
    &#xe676;
    +
    layui-icon-login-qq
    +
    + +
    + +
    微博
    +
    &#xe675;
    +
    layui-icon-login-weibo
    +
    +
    + +
    密码
    +
    &#xe673;
    +
    layui-icon-password
    +
    +
    + +
    用户名
    +
    &#xe66f;
    +
    layui-icon-username
    +
    +
    + +
    刷新-粗
    +
    &#xe9aa;
    +
    layui-icon-refresh-3
    +
    +
    + +
    授权
    +
    &#xe672;
    +
    layui-icon-auz
    +
    +
    + +
    左向右伸缩菜单
    +
    &#xe66b;
    +
    layui-icon-spread-left
    +
    +
    + +
    右向左伸缩菜单
    +
    &#xe668;
    +
    layui-icon-shrink-right
    +
    + +
    + +
    雪花
    +
    &#xe6b1;
    +
    layui-icon-snowflake
    +
    +
    + +
    提示说明
    +
    &#xe702;
    +
    layui-icon-tips
    +
    +
    + +
    便签
    +
    &#xe66e;
    +
    layui-icon-note
    +
    +
    + +
    主页
    +
    &#xe68e;
    +
    layui-icon-home
    +
    +
    + +
    高级
    +
    &#xe674;
    +
    layui-icon-senior
    +
    +
    + +
    刷新
    +
    &#xe669;
    +
    layui-icon-refresh
    +
    +
    + +
    刷新
    +
    &#xe666;
    +
    layui-icon-refresh-1
    +
    + +
    + +
    旗帜
    +
    &#xe66c;
    +
    layui-icon-flag
    +
    +
    + +
    主题
    +
    &#xe66a;
    +
    layui-icon-theme
    +
    +
    + +
    消息-通知
    +
    &#xe667;
    +
    layui-icon-notice
    +
    +
    + +
    网站
    +
    &#xe7ae;
    +
    layui-icon-website
    +
    +
    + +
    控制台
    +
    &#xe665;
    +
    layui-icon-console
    +
    +
    + +
    表情-惊讶
    +
    &#xe664;
    +
    layui-icon-face-surprised
    +
    +
    + +
    设置-空心
    +
    &#xe716;
    +
    layui-icon-set
    +
    + +
    + +
    模板
    +
    &#xe656;
    +
    layui-icon-template-1
    +
    +
    + +
    应用
    +
    &#xe653;
    +
    layui-icon-app
    +
    +
    + +
    模板
    +
    &#xe663;
    +
    layui-icon-template
    +
    +
    + +
    赞
    +
    &#xe6c6;
    +
    layui-icon-praise
    +
    +
    + +
    踩
    +
    &#xe6c5;
    +
    layui-icon-tread
    +
    +
    + +
    男
    +
    &#xe662;
    +
    layui-icon-male
    +
    + +
    + +
    女
    +
    &#xe661;
    +
    layui-icon-female
    +
    +
    + +
    相机-空心
    +
    &#xe660;
    +
    layui-icon-camera
    +
    +
    + +
    相机-实心
    +
    &#xe65d;
    +
    layui-icon-camera-fill
    +
    +
    + +
    菜单-水平
    +
    &#xe65f;
    +
    layui-icon-more
    +
    +
    + +
    菜单-垂直
    +
    &#xe671;
    +
    layui-icon-more-vertical
    +
    +
    + +
    金额-人民币
    +
    &#xe65e;
    +
    layui-icon-rmb
    +
    +
    + +
    金额-美元
    +
    &#xe659;
    +
    layui-icon-dollar
    +
    +
    + +
    钻石-等级
    +
    &#xe735;
    +
    layui-icon-diamond
    +
    + +
    + +
    火
    +
    &#xe756;
    +
    layui-icon-fire
    +
    +
    + +
    返回
    +
    &#xe65c;
    +
    layui-icon-return
    +
    +
    + +
    位置-地图
    +
    &#xe715;
    +
    layui-icon-location
    +
    +
    + +
    办公-阅读
    +
    &#xe705;
    +
    layui-icon-read
    +
    +
    + +
    调查
    +
    &#xe6b2;
    +
    layui-icon-survey
    +
    +
    + +
    表情-微笑
    +
    &#xe6af;
    +
    layui-icon-face-smile
    +
    +
    + +
    表情-哭泣
    +
    &#xe69c;
    +
    layui-icon-face-cry
    +
    + +
    + +
    购物车
    +
    &#xe698;
    +
    layui-icon-cart-simple
    +
    +
    + +
    购物车
    +
    &#xe657;
    +
    layui-icon-cart
    +
    +
    + +
    下一页
    +
    &#xe65b;
    +
    layui-icon-next
    +
    +
    + +
    上一页
    +
    &#xe65a;
    +
    layui-icon-prev
    +
    +
    + +
    上传-空心-拖拽
    +
    &#xe681;
    +
    layui-icon-upload-drag
    +
    +
    + +
    上传-实心
    +
    &#xe67c;
    +
    layui-icon-upload
    +
    +
    + +
    下载-圆圈
    +
    &#xe601;
    +
    layui-icon-download-circle
    +
    + +
    + +
    组件
    +
    &#xe857;
    +
    layui-icon-component
    +
    +
    + +
    文件-粗
    +
    &#xe655;
    +
    layui-icon-file-b
    +
    +
    + +
    用户
    +
    &#xe770;
    +
    layui-icon-user
    +
    +
    + +
    发现-实心
    +
    &#xe670;
    +
    layui-icon-find-fill
    +
    +
    + +
    loading
    +
    &#xe63d;
    +
    layui-icon-loading
    +
    +
    + +
    loading
    +
    &#xe63e;
    +
    layui-icon-loading-1
    +
    +
    + +
    添加
    +
    &#xe654;
    +
    layui-icon-add-1
    +
    + +
    + +
    播放
    +
    &#xe652;
    +
    layui-icon-play
    +
    +
    + +
    暂停
    +
    &#xe651;
    +
    layui-icon-pause
    +
    +
    + +
    音频-耳机
    +
    &#xe6fc;
    +
    layui-icon-headset
    +
    +
    + +
    视频
    +
    &#xe6ed;
    +
    layui-icon-video
    +
    +
    + +
    语音-声音
    +
    &#xe688;
    +
    layui-icon-voice
    +
    +
    + +
    消息-通知-喇叭
    +
    &#xe645;
    +
    layui-icon-speaker
    +
    +
    + +
    删除线
    +
    &#xe64f;
    +
    layui-icon-fonts-del
    +
    + +
    + +
    代码
    +
    &#xe64e;
    +
    layui-icon-fonts-code
    +
    +
    + +
    HTML
    +
    &#xe64b;
    +
    layui-icon-fonts-html
    +
    +
    + +
    字体加粗
    +
    &#xe62b;
    +
    layui-icon-fonts-strong
    +
    +
    + +
    删除链接
    +
    &#xe64d;
    +
    layui-icon-unlink
    +
    +
    + +
    图片
    +
    &#xe64a;
    +
    layui-icon-picture
    +
    +
    + +
    链接
    +
    &#xe64c;
    +
    layui-icon-link
    +
    +
    + +
    表情-笑-粗
    +
    &#xe650;
    +
    layui-icon-face-smile-b
    +
    + +
    + +
    左对齐
    +
    &#xe649;
    +
    layui-icon-align-left
    +
    +
    + +
    右对齐
    +
    &#xe648;
    +
    layui-icon-align-right
    +
    +
    + +
    居中对齐
    +
    &#xe647;
    +
    layui-icon-align-center
    +
    +
    + +
    字体-下划线
    +
    &#xe646;
    +
    layui-icon-fonts-u
    +
    +
    + +
    字体-斜体
    +
    &#xe644;
    +
    layui-icon-fonts-i
    +
    +
    + +
    Tabs 选项卡
    +
    &#xe62a;
    +
    layui-icon-tabs
    +
    +
    + +
    单选框-选中
    +
    &#xe643;
    +
    layui-icon-radio
    +
    + +
    + +
    单选框-候选
    +
    &#xe63f;
    +
    layui-icon-circle
    +
    +
    + +
    编辑
    +
    &#xe642;
    +
    layui-icon-edit
    +
    +
    + +
    分享
    +
    &#xe641;
    +
    layui-icon-share
    +
    +
    + +
    删除
    +
    &#xe640;
    +
    layui-icon-delete
    +
    +
    + +
    表单
    +
    &#xe63c;
    +
    layui-icon-form
    +
    +
    + +
    手机-细体
    +
    &#xe63b;
    +
    layui-icon-cellphone-fine
    +
    +
    + +
    聊天 对话 沟通
    +
    &#xe63a;
    +
    layui-icon-dialogue
    +
    + +
    + +
    文字格式化
    +
    &#xe639;
    +
    layui-icon-fonts-clear
    +
    +
    + +
    窗口
    +
    &#xe638;
    +
    layui-icon-layer
    +
    +
    + +
    日期
    +
    &#xe637;
    +
    layui-icon-date
    +
    +
    + +
    水 下雨
    +
    &#xe636;
    +
    layui-icon-water
    +
    +
    + +
    代码-圆圈
    +
    &#xe635;
    +
    layui-icon-code-circle
    +
    +
    + +
    轮播组图
    +
    &#xe634;
    +
    layui-icon-carousel
    +
    +
    + +
    翻页
    +
    &#xe633;
    +
    layui-icon-prev-circle
    +
    + +
    + +
    布局
    +
    &#xe632;
    +
    layui-icon-layouts
    +
    +
    + +
    工具
    +
    &#xe631;
    +
    layui-icon-util
    +
    +
    + +
    选择模板
    +
    &#xe630;
    +
    layui-icon-templeate-1
    +
    +
    + +
    上传-圆圈
    +
    &#xe62f;
    +
    layui-icon-upload-circle
    +
    +
    + +
    树
    +
    &#xe62e;
    +
    layui-icon-tree
    +
    +
    + +
    表格
    +
    &#xe62d;
    +
    layui-icon-table
    +
    +
    + +
    图表
    +
    &#xe62c;
    +
    layui-icon-chart
    +
    + +
    + +
    图标 报表 屏幕
    +
    &#xe629;
    +
    layui-icon-chart-screen
    +
    +
    + +
    引擎
    +
    &#xe628;
    +
    layui-icon-engine
    +
    +
    + +
    下三角
    +
    &#xe625;
    +
    layui-icon-triangle-d
    +
    +
    + +
    右三角
    +
    &#xe623;
    +
    layui-icon-triangle-r
    +
    +
    + +
    文件
    +
    &#xe621;
    +
    layui-icon-file
    +
    +
    + +
    设置-小型
    +
    &#xe620;
    +
    layui-icon-set-sm
    +
    +
    + +
    减少-圆圈
    +
    &#xe616;
    +
    layui-icon-reduce-circle
    +
    +
    + +
    添加-圆圈
    +
    &#xe61f;
    +
    layui-icon-add-circle
    +
    + + +
    + +
    404
    +
    &#xe61c;
    +
    layui-icon-404
    +
    +
    + +
    关于
    +
    &#xe60b;
    +
    layui-icon-about
    +
    +
    + +
    箭头 向上
    +
    &#xe619;
    +
    layui-icon-up
    +
    +
    + +
    箭头 向下
    +
    &#xe61a;
    +
    layui-icon-down
    +
    +
    + +
    箭头 向左
    +
    &#xe603;
    +
    layui-icon-left
    +
    +
    + +
    箭头 向右
    +
    &#xe602;
    +
    layui-icon-right
    +
    +
    + +
    圆点
    +
    &#xe617;
    +
    layui-icon-circle-dot
    +
    + +
    + +
    搜索
    +
    &#xe615;
    +
    layui-icon-search
    +
    +
    + +
    设置-实心
    +
    &#xe614;
    +
    layui-icon-set-fill
    +
    +
    + +
    群组
    +
    &#xe613;
    +
    layui-icon-group
    +
    +
    + +
    好友
    +
    &#xe612;
    +
    layui-icon-friends
    +
    +
    + +
    回复 评论 实心
    +
    &#xe611;
    +
    layui-icon-reply-fill
    +
    +
    + +
    菜单 隐身 实心
    +
    &#xe60f;
    +
    layui-icon-menu-fill
    +
    +
    + +
    记录
    +
    &#xe60e;
    +
    layui-icon-log
    +
    + +
    + +
    图片-细体
    +
    &#xe60d;
    +
    layui-icon-picture-fine
    +
    +
    + +
    表情-笑-细体
    +
    &#xe60c;
    +
    layui-icon-face-smile-fine
    +
    +
    + +
    列表
    +
    &#xe60a;
    +
    layui-icon-list
    +
    +
    + +
    发布 纸飞机
    +
    &#xe609;
    +
    layui-icon-release
    +
    +
    + +
    对 OK
    +
    &#xe605;
    +
    layui-icon-ok
    +
    +
    + +
    帮助
    +
    &#xe607;
    +
    layui-icon-help
    +
    +
    + +
    客服
    +
    &#xe606;
    +
    layui-icon-chat
    +
    + +
    + +
    top 置顶
    +
    &#xe604;
    +
    layui-icon-top
    +
    +
    + +
    收藏-空心
    +
    &#xe600;
    +
    layui-icon-star
    +
    +
    + +
    收藏-实心
    +
    &#xe658;
    +
    layui-icon-star-fill
    +
    +
    + +
    关闭-实心
    +
    &#x1007;
    +
    layui-icon-close-fill
    +
    +
    + +
    关闭-空心
    +
    &#x1006;
    +
    layui-icon-close
    +
    +
    + +
    正确
    +
    &#x1005;
    +
    layui-icon-ok-circle
    +
    +
    + +
    添加-圆圈-细体
    +
    &#xe608;
    +
    layui-icon-add-circle-fine
    +
    +
    + + +

    跨域处理

    + +由于浏览器存在同源策略，若 Layui 文件地址与你当前的页面地址*不在同一个域下*，即会出现图标跨域问题。因此，要么将 Layui 文件与网站放在同一服务器，要么对 Layui 文件所在的静态资源服务器的 `Response Headers` 添加：`Access-Control-Allow-Origin: *` 或对跨资源共享指定域名，即可解决图标跨域问题。 \ No newline at end of file diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 00000000..758dbfd2 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,119 @@ +--- +title: 开始使用 +toc: true +--- + +

    开始使用

    + +> Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。 + +

    + Layui +

    + + + + + + + + + + + + +
    谐音：类 UI用途：用于更简单快速地构建网页界面
    环境：全部主流 Web 浏览器（IE8 以下除外）特性：原生态开发 / 轻量级模块化 / 外简内丰 / 开箱即用
    + +

    下载引用

    + +您可以通过以下任意一种方式获得 Layui : + +### 🌕 官网下载 + +您可以在我们的 [官网首页](/) 下载到 Layui 当前版本，它经过了自动化构建，更适合用于生产环境。目录结构如下： + +``` +layui/ + ├─css + │ └─layui.css # 核心样式库 + └─layui.js # 核心模块库 +``` + +### 🌕 Git 下载 + +> 您也可以通过 [GitHub](https://github.com/layui/layui/releases) 或 [Gitee](https://gitee.com/layui/layui/releases) 的 releases 列表下载，或直接下载整个仓库。 + +

    + + +

    +
    + GitHub + Gitee +
    + +### 🌕 npm 下载 + +``` +npm i layui +``` + +### 🌕 第三方 CDN 方式引入： + +> UNPKG 和 CDNJS 均为第三方免费 CDN，资源通过 NPM/GitHub 进行同步。另外还可以采用国内的 [Staticfile CDN](https://www.staticfile.org/)。 + +
    + UNPKG + CDNJS +
    + + +``` + + + + + + + + + + + +点击上方 `Preview` 标签可进行效果预览。 + +

    其他帮助

    + +- 在线测试：https://codepen.io/layui/pen/bGxZXrd +- 深色主题：https://github.com/Sight-wcg/layui-theme-dark + + +## 初识寄语 + +> 愿 Layui 从此成为您得心应手的 Web 界面解决方案，化作您方寸屏幕前的亿万字节！ \ No newline at end of file diff --git a/docs/laydate/detail/demo.md b/docs/laydate/detail/demo.md new file mode 100644 index 00000000..494d905c --- /dev/null +++ b/docs/laydate/detail/demo.md @@ -0,0 +1,97 @@ +

    常规用法

    + +
    +  
+
    + +

    多类型选择器

    + +默认为日期选择器，即上文「常规用法」示例中的效果。以下主要呈现其他类型选择器： + +
    +  
+
    + +

    范围选择

    + +
    +  
+
    + +

    配置快捷选项 2.8+

    + +
    +  
+
    + + +

    自定义格式

    + +
    +  
+
    + + +

    节日及标注

    + +
    +  
+
    + + +

    限制可选日期

    + +
    +  
+
    + + +

    批量绑定元素

    + +
    +  
+
    + + +

    更多功能示例

    + +
    +  
+
    + + +

    自定义主题

    + +
    +  
+
    + +

    直接静态显示

    + +
    +  
+
    \ No newline at end of file diff --git a/docs/laydate/detail/options.md b/docs/laydate/detail/options.md new file mode 100644 index 00000000..1acb4b28 --- /dev/null +++ b/docs/laydate/detail/options.md @@ -0,0 +1,679 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    属性名描述类型默认值
    elem + +绑定元素选择器或 DOM 对象 + +string/DOM-
    + +[type](#options.type) + + + +
    + 组件面板选择类型。支持以下可选值： +
    + +- `year` 年选择器，只提供年列表选择 +- `month` 年月选择器，只提供年、月选择 +- `date` 日期选择器（默认），可选择：年、月、日选择 +- `time` 时间选择器，只提供时、分、秒选择 +- `datetime` 日期时间选择器，可选择：年月日、时分秒 + +效果详见： [#示例](#demo-type) + +    		string + +`date` + +
    + +[range](#options.range) + + + +
    + +开启左右面板的范围选择，将会根据 `type` 类型呈现对应的范围选择面板。该属性值支持以下类型： + +
    + +- 若为 `boolean` 类型，即表示是否开启范围选择，若设为 `true`，则开始日期与结束日期默认采用 `-` 连接符 +- 若为 `string` 类型，则表示开启范围选择，且自定义开始日期与结束日期的连接符。如： `range: '~'` +- 若为 `boolean` 类型，即表示开启范围选，且开始日期和结束日期分别赋值在两个目标选择器中，如： + +``` +range: ['#start', '#end'] +``` + +详细用法可参考： [#示例](#demo-range) + + +    		boolean
    string
    array    		 + +`false` + +
    rangeLinked 2.8+ + +是否开启日期范围选择时的区间联动标注模式，该必须开启 `range` 属性后生效。日期范围默认采用的是*左右面板独立选择模式*，设置该属性后，将采用*左右面板联动选择模式*。 +
    效果详见： [#示例](#demo-range) + +    		boolean + +`false` + +
    fullPanel 2.8+ + +是否开启全面板，即日期和时间显示在同一面板。 当 `type: 'datetime'` 且未设置 `range` 属性时生效。 +
    效果详见： [#示例](#demo-type) + +    		boolean + +`false` + +
    + +[format](#options.format) + + + +
    + +自定义日期和时间值的返回格式,默认值： `yyyy-MM-dd`。 其格式符规则如下： + +
    + + +| 格式符 | 描述 | +| --- | --- | +| 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) + +
    + +[value](#options.value) + + + +
    +初始值。值支持以下类型： +
    + +- 若为 `string` 类型，则必须和 `format` 属性的格式对应。 + +``` +value: '2018-08-18' +``` + +- 若为 `date` 对象类型，则赋值 `new Date()` 的实例即可。 + +``` +value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的毫秒数 +``` + +    		string
    date    		 + +`new Date()` + +
    isInitValue + +是否将初始值填充在目标元素中，一般配合 `value` 属性使用 + +boolean + +`false` + +
    + +[shortcuts](#options.shortcuts) 2.8+ + + + +
    +用于开启面板左侧的快捷选择栏。其值配置规则如下： +
    + +``` +shortcuts: [ + { + text: "快捷选项文本", + value: '快捷选项值' + }, + // 更多选项 … +] +``` + +其中 `value` 支持以下类型： + +- 若为 `string` 类型，必须和 `format` 设置的格式对应； +- 若为 `date` 对象类型，则可通过操作 `new Date()` 来对选项值进行相应的返回计算； +- 若为 `array` 类型，则数组成员可填写开始日期和结束日期。 + +详细用法可参考： [#示例](#demo-shortcut) + +    		string
    date
    array    		-
    weekStart 2.7+ + +设置起始周。 支持 0-6 的数字，`0` 即代表从周日开始。 + +``` +weekStart: 1 // 设置周一为起始周 +``` + +number + +`0` + +
    isPreview + +用于是否在面板左下角显示当前结果的预览。当 `type:datetime` 时强制为 `false`。 + +boolean + +`true` + +
    + +[min / max](#options.minmax) + + + +
    + +限制可供选择的最小或最大日期时间值。默认值： + +- `min: '1900-1-1'` +- `max: '2099-12-31'` + +
    + +属性值支持以下可选类型： + +- 若值为字符类型，则：年月日必须用 `-` 连接，且时分秒必须用 `:` 连接。 此处无需遵循 `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) + +
    trigger + +自定义弹出组件面板的事件 + +string + +`click` + +
    show + +是否在渲染时默认显示组件面板。组件在执行渲染时，默认需通过触发目标元素的事件，方可显示组件面板，而该属性可跳过目标元素的事件，直接显示组件面板。 + +boolean + +`false` + +
    position + +设置组件面板的定位方式。支持以下可选值： + +- `absolute` 绝对定位，始终吸附在绑定元素周围。 +- `fixed` 固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。 +- `static` 静态定位，控件将直接嵌套显示在指定容器中。用法详见：[#示例](#demo-static) + +string + +`absolute` + +
    zIndex + +设置组件面板的层叠顺序。一般用于解决与其它元素的互相被遮掩的问题。若 `positio: 'tatic'` 时，则该属性无效。 + +number + +`99999999` + +
    + +[shade](#options.shade) 2.8+ + +
    +用于开启弹出日期面板时的遮罩。值支持以下可选类型： +
    + +- 若为 `number` 类型，则表示遮罩透明度。如： + +``` +shade: 0.5 +``` + +- 若为 `array` 类型，则可设置遮罩颜色和透明度，如： + +``` +shade: [0.5, '#000'] // 遮罩的透明度和背景色 +``` + +效果详见： [#示例](#demo-more) + +    		number
    array    		-
    showBottom + +是否显示组件面板的底部栏 + +boolean + +`true` + +
    btns + +自定义排版组件面板底部栏中的按钮，按钮将按照数组顺序排列。内置按钮名称：`clear,now,confirm` 。 + +``` + // 显示清空、确认按钮 +btns: ['clear', 'confirm'] +``` + +array-
    autoConfirm 2.8+ + +是否在选中目标值时即自动确认。 + +boolean + +`true` + +
    lang + +设置组件的语言版本。可选值如下： + +- `cn` 中文版 +- `en` 英文版 + +string + +`cn` + +
    + +[theme](#options.theme) + + + +
    + +设置组件面板主题。除了默认主题，还内置主题： `molv` `grid` ，且支持直接传入自定义的主题色。 + +
    + +``` +theme: '#FF5722' +``` + +注 2.8+ : 多个主题可用数组格式，如： + +``` +theme: ['grid', '#FF5722'] +``` + +效果及用法详见： [#示例](#demo-theme) + +    		string
    array    		-
    calendar + +是否显示我国常见的公历节日。当 `lang: 'en'` 时无效。 + +boolean + +`true` + +
    + +[mark](#options.mark) + + + +
    +自定义日期标记。该属性是对 `calendar` 属性的进一步延伸，灵活度更高。属性可批量设置多个日期标记，如： +
    + +``` +mark: { + '0-10-14': '生日', //每年每月的某一天 + '0-0-10': '工资', // 每月 10 号 + '2008-8-8': '开幕', // 指定的日期 +} +``` + +前缀 `0-` 即代表每年，`0-0-` 即代表每年每月。 + +效果详见： [#示例](#demo-mark) + + +    		object-
    + +[holidays](#options.holidays) 2.7+ + + + +
    +用于标注节假日及补班日。值是一个二维数组，如： +
    + +``` +holidays: [ + // 2023 年的节假日 + ['2023-1-1','2023-1-2','2023-1-3'], + // 2023 年的补班日 + ['2023-1-28','2023-1-29'] +] +``` + +相关日期值可详细参考国家每年公布的法定节假日安排 + +效果详见： [#示例](#demo-mark) + +    		array-
    + + +
    + +[回调函数](#options.callback) + +
    + +
    + +[ready](#options.ready) + + + +
    +组件面板初始打开的回调函数。返回的参数如下： +
    + +``` +ready: function(date){ + /* 得到初始的日期时间对象，date 参数格式如下： + { + year: 2017, // 年 + month: 8, // 月 + date: 18, // 日 + hours: 0, // 时 + minutes: 0, // 分 + seconds: 0 // 秒 + } + */ + console.log(date); +} +``` + +
    + +[change](#options.change) + + + +
    +日期时间被切换后的回调函数。返回的参数如下： +
    + +``` +change: function(value, date, endDate){ + console.log(value); // 日期字符，如： 2017-08-18 + console.log(date); // 包含年月日时分秒各项值的对象 + console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。 +} +``` + +
    + +[done](#options.done) + + + +
    +日期时间选择完毕的回调函数，点击清空、现在、确定也均会触发。返回的参数如下： +
    + +``` +done: function(value, date, endDate){ + console.log(value); // 日期字符，如： 2017-08-18 + console.log(date); // 包含年月日时分秒各项值的对象 + console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。 +} +``` + +
    onConfirm 2.8+ + +点击底部栏「确定」按钮时的回调函数。返回的参数同 `done`。 + +
    onNow 2.8+ + +点击底部栏「现在」按钮时的回调函数。返回的参数同 `done`。 + +
    onClear 2.8+ + +点击底部栏「清空」按钮时的回调函数。返回的参数同 `done`。 + +
    close 2.7+ + +组件面板被关闭（移除）后的回调函数。无返回参数。 + +
    \ No newline at end of file diff --git a/docs/laydate/examples/elem.md b/docs/laydate/examples/elem.md new file mode 100644 index 00000000..a57bc1c6 --- /dev/null +++ b/docs/laydate/examples/elem.md @@ -0,0 +1,24 @@ +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/format.md b/docs/laydate/examples/format.md new file mode 100644 index 00000000..9c8eb68a --- /dev/null +++ b/docs/laydate/examples/format.md @@ -0,0 +1,77 @@ +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/limit.md b/docs/laydate/examples/limit.md new file mode 100644 index 00000000..961edd66 --- /dev/null +++ b/docs/laydate/examples/limit.md @@ -0,0 +1,57 @@ +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    + 这里以控制在 9:30-17:30 为例 +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/mark.md b/docs/laydate/examples/mark.md new file mode 100644 index 00000000..1a97c9f5 --- /dev/null +++ b/docs/laydate/examples/mark.md @@ -0,0 +1,66 @@ +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/more.md b/docs/laydate/examples/more.md new file mode 100644 index 00000000..4456d551 --- /dev/null +++ b/docs/laydate/examples/more.md @@ -0,0 +1,198 @@ +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    + +
    +
    + 2.8+ +
    +
    +
    +
    +
    + 覆盖实例与解除实例 2.8+ : +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/normal.md b/docs/laydate/examples/normal.md new file mode 100644 index 00000000..0cacaf03 --- /dev/null +++ b/docs/laydate/examples/normal.md @@ -0,0 +1,32 @@ +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/range.md b/docs/laydate/examples/range.md new file mode 100644 index 00000000..8b408b3e --- /dev/null +++ b/docs/laydate/examples/range.md @@ -0,0 +1,110 @@ +
    +
    + 左右面板独立选择模式（默认） : +
    +
    +
    + +
    +
    + +
    +
    -
    +
    + +
    +
    +
    +
    +
    + 左右面板联动选择模式 2.8+ : +
    +
    +
    + +
    +
    + +
    +
    -
    +
    + +
    +
    +
    +
    +
    其他类型的范围选择 :
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/shortcut.md b/docs/laydate/examples/shortcut.md new file mode 100644 index 00000000..81ccfd6f --- /dev/null +++ b/docs/laydate/examples/shortcut.md @@ -0,0 +1,548 @@ +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/static.md b/docs/laydate/examples/static.md new file mode 100644 index 00000000..82862105 --- /dev/null +++ b/docs/laydate/examples/static.md @@ -0,0 +1,33 @@ +
    +
    +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/theme.md b/docs/laydate/examples/theme.md new file mode 100644 index 00000000..3c4b48a5 --- /dev/null +++ b/docs/laydate/examples/theme.md @@ -0,0 +1,58 @@ +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/examples/type.md b/docs/laydate/examples/type.md new file mode 100644 index 00000000..aadd5c66 --- /dev/null +++ b/docs/laydate/examples/type.md @@ -0,0 +1,77 @@ +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    +
    + 同时显示日期和时间选择器（全面板） 2.8+ : +
    +
    +
    + +
    + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/docs/laydate/index.md b/docs/laydate/index.md new file mode 100644 index 00000000..4086fd70 --- /dev/null +++ b/docs/laydate/index.md @@ -0,0 +1,184 @@ +--- +title: 日期与时间选择器 laydate +toc: true +--- + +# 日期与时间选择器 + +> 日期与时间选择器 `laydate` 提供了年、月、日、时、分、秒的多类型选择面板，也是 Layui 的常用组件之一。 + +

    示例

    + + + +
    +{{- d.include("docs/laydate/detail/demo.md") }} +
    + +

    + +

    API

    + +| API | 描述 | +| --- | --- | +| var laydate = layui.laydate | 获得 `laydate` 模块。 | +| [laydate.render(options)](#render) | laydate 组件渲染，核心方法。 | +| [laydate.hint(id, opts)](#hint) 2.8+ | 在对应的 laydate 组件面板上弹出提示层。 | +| [laydate.getInst(id)](#getInst) 2.8+ | 获取组件对应的渲染实例。 | +| [laydate.unbind(id)](#close) 2.8+ | 对目标元素解除当前实例的绑定。 | +| [laydate.close(id)](#close) 2.7+ | 关闭日期面板。 | +| [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天 | + +

    渲染

    + +`laydate.render(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) +
    注 2.8+ : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。 + +``` + + + + + +``` + +

    属性

    + +
    +{{- d.include("docs/laydate/detail/options.md") }} +
    + +

    弹出提示 2.8+

    + +`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: '提示内容' +}); +``` + +

    获取实例 2.8+

    + +`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); // 实例对象 +``` + + +

    解除实例绑定 2.8+

    + +`laydate.unbind(id);` + +- 参数 `id` : 组件渲染时定义的 `id` 属性值 + +该方法用于对目标元素对应的实例的完全解除，即触发元素事件时，不再执行组件渲染。 + +``` +var laydate = layui.laydate; +// 渲染 +laydate.render({ + elem: '', // 绑定元素选择器 + id: 'test', // 自定义 id + // 其他属性 … +}); +// 解除对应的实例绑定 +laydate.unbind('test'); +``` + + +

    关闭日期面板 2.7+

    + +`laydate.close(id);` + +- 参数 `id` : 组件渲染时定义的 `id` 属性值。 若 `id` 参数不填，则关闭当前打开的日期面板 + +该方法用于关闭对应的日期面板 + +``` +var laydate = layui.laydate; +// 渲染 +laydate.render({ + elem: '', // 绑定元素选择器 + id: 'test', // 自定义 id + // 其他属性 … +}); +// 关闭对应的日期面板 +laydate.cllose('test'); +``` + +

    获取某月的最后一天

    + +`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 即可。 + + diff --git a/docs/layer/detail/demo.md b/docs/layer/detail/demo.md new file mode 100644 index 00000000..09bc6f06 --- /dev/null +++ b/docs/layer/detail/demo.md @@ -0,0 +1,99 @@ +

    在线测试

    + +
    +  
+
    + +

    弹层类型

    + +
    +  
+
    + +

    信息框

    + +
    +  
+
    + +

    页面层

    + +
    +  
+
    + +

    iframe 层

    + +
    +  
+
    + +

    加载层

    + +为了不影响继续体验，以下每个 loading 示例均会在 3 秒后自动模拟关闭 + +
    +  
+
    + +

    Tips 层

    + +
    +  
+
    + +

    其他层

    + +
    +  
+
    + +

    更多演示

    + +
    +  
+
    + +
    +  
+
    + +
    +  
+
    + + +

    主题风格

    + +
    +  
+
    + +### 小贴士 + +> 事实上 layer 丰富的基础属性，可足够让您的弹出层变得千变万化，为了避免占用太多篇幅，就不做过多演示了。 \ No newline at end of file diff --git a/docs/layer/detail/options.md b/docs/layer/detail/options.md new file mode 100644 index 00000000..ff197ebe --- /dev/null +++ b/docs/layer/detail/options.md @@ -0,0 +1,868 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    属性名描述类型默认值
    type + +弹层类型。 可选值有： + +- `0` dialog 信息框 +- `1` page 页面层 +- `2` iframe 内联框架层 +- `3` loading 加载层 +- `4` tips 贴士层 + +`layer` 弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，`layer` 提供的所有的弹出方式均由此衍生。 + +number + +`0` + +
    title + +弹层标题。其值支持以下可选类型： + +- 若为 `string` 类型 : 则表示为弹层的标题文本，如： + +``` +title: '标题' +``` + +- 若为 `array` 类型 : 则可设置标题文本和标题栏 CSS 样式： + +``` + title: ['标题', 'font-size: 18px;'] +``` + +- 若为 `boolean` 类型 : 则可设为 `false` 不显示标题栏。 + +``` +title: false // 不显示标题栏 +``` + +string
    array
    boolean    		 + +`信息` + +
    + +[content](#options.content) + + + +
    + +弹层内容。 可传入的值比较灵活，支持以下使用场景： + +- 若 `type: 1`（页面层）: 则 `content` 可传入值如下： + +``` +// 普通字符 +layer.open({ + type: 1, + content: '传入任意文本或 HTML' +}); +// 捕获页面已存在的 DOM 元素或 jQuery 对象 +layer.open({ + type: 1, + content: $('#id') // 捕获层 +}); +``` + +注意： 若采用捕获层，则捕获的元素必须存放在 `` 根节点下，否则可能被父级容器的相对定位所影响。 + +
    + +- 若 `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) + +
    + +[area](#options.area) + + + +
    +设置弹层的宽高，其值支持以下可选类型： +
    + +- 若为 `array` 类型，则可同时设置宽高 + - `area: ['520px', '320px']` 固定宽度和高度 + - `area: ['auto', '320px']` 宽度自动，高度固定 + - `area: ['520px', 'auto']` 宽度固定，高度自动 +- 若为 `string` 类型，则可定义宽度和宽高均自适应： + - `area: '520px'` 宽度固定，高度自适应 + - `area: 'auto'` 宽度和高度均自适应 + +    		array
    string    		 + +`auto` + +
    maxWidth + +弹层的最大宽度。当 `area` 属性值为默认的 `auto'` 时有效。 + +number + +`360` + +
    maxHeight + +弹层的最大高度。当 `area` 属设置高度自适应时有效。 + +number-
    + +[offset](#options.offset) + + + +
    +弹层的偏移坐标。 支持以下可选值： +
    + +- `offset: 'auto'` 坐标始终垂直水平居中 +- `offset: '16px'` 只设置垂直坐标，水平保持居中 +- `offset: ['16px', '16px']` 设置垂直和水平坐标 +- `offset: 't'` 上边缘 +- `offset: 'r'` 右边缘 +- `offset: 'b'` 下边缘 +- `offset: 'l'` 左边缘 +- `offset: 'rt'` 右上角 +- `offset: 'rb'` 右下角 +- `offset: 'lt'` 左上角 +- `offset: 'lb'` 左下角 + +当设置边缘坐标时，可配合 `anim` 属性实现抽屉弹出效果。 + +    		string
    array    		 + +`auto` + +
    + +[anim](#options.anim) + + + +
    +弹层的出场动画。支持以下可选值： +
    + +- `anim: 0` 平滑放大。默认 +- `anim: 1` 从上掉落 +- `anim: 2` 从最底部往上滑入 +- `anim: 3` 从左滑入 +- `anim: 4` 从左翻滚 +- `anim: 5` 渐显 +- `anim: 6` 抖动 + +边缘抽屉动画 2.8+： + +- `anim: 'slideDown'` 从上边缘往下 +- `anim: 'slideLeft'` 从右边缘往左 +- `anim: 'slideUp'` 从下边缘往上 +- `anim: 'slideRight'` 从左边缘往右 + +抽屉动画一般配合 `offset` 属性实现边缘弹出。[#详见示例](#demo-more) + + +    		number
    string    		 + +`0` + +
    isOutAnim + +是否开启弹层关闭时的动画。 + +boolean + +`true` + +
    maxmin + +是否开启标题栏的最大化和最小化图标。 + +array + +`false` + +
    + +[closeBtn](#options.closeBtn) + + + +
    +是否开启标题栏的关闭图标，或设置关闭图标风格。 +
    + +- `closeBtn: 0` 不显示关闭图标 +- `closeBtn: 1` 关闭图标默认风格 +- `closeBtn: 2` 关闭图标风格二 + +    		number + +`1` + +
    + +[icon](#options.icon) + + + +
    +提示图标。 信息框和加载层的私有参数。 +
    + +- 若为信息框，支持传入 `0-6` 的可选值。
    默认为 `-1`，即不显示图标。 +- 若为加载层，支持传入 `0-2` 的可选值 + +``` +// eg1 +layer.alert('成功提示', {icon: 1}); + +// eg2 +layer.msg('开心表情', {icon: 6}); + +// eg3 +layer.load(1); // 加载层风格一 +``` + +    		number + +`-1` + +
    + +[btn](#options.btn) + + + +
    +自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如： +
    + +``` +// 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 // 点击该按钮后不关闭弹层 + } +}); +``` + +    		string-
    + +[btnAlign](#options.btnAlign) + + + +
    +按钮水平对其方式。支持以下可选值： +
    + +- `btnAlign: 'l'` 按钮左对齐 +- `btnAlign: 'c'` 按钮水平居中对齐 +- `btnAlign: 'r'` 按钮右对齐。默认值，不用设置 + + +    		string + +`r` + +
    + +[skin](#options.skin) + + + +
    +弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题： +
    + +- `layui-layer-molv` 墨绿主题 +- `layui-layer-lan` 深蓝主题 +- `layui-layer-win10` Windows 10 主题 2.8+ + +还可传入其他任意 className 来自定义主题。 参考：[#示例](#demo-skin) + + +    		string-
    + +[shade](#options.shade) + + + +
    +弹层的遮罩。 支持以下写法： +
    + +- `shade: 0.3` 设置遮罩深色背景的透明度 +- `shade: [0.3, '#FFF']` 设置遮罩透明度和颜色值 +- `shade: 0` 不显示遮罩 + +    		number
    array    		 + +`0.3` + +
    shadeClose + +是否点击遮罩时关闭弹层。当遮罩存在时有效。 + +boolean + +`false` + +
    time + +弹层自动关闭所需的毫秒数。 如 `time: 3000` ，即代表 3 秒后自动关闭。 提示框、加载层、Tips 层三种弹出模式默认开启。 + +number + +`0` + +
    id + +弹层的 ID 值。一般用于防止页面层或 iframe 层的重复弹出。 + +string-
    fixed + +弹层是否固定定位，即始终显示在页面可视区域。 + +boolean + +`true` + +
    zIndex + +弹层的初始层叠顺序值。 + +number + +`19891014` + +
    resize + +是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。 + +boolean + +`true` + +
    scrollbar + +打开弹层时，是否允许浏览器出现滚动条。 + +boolean + +`true` + +
    minStack 2.6+ + +点击标题栏的最小化时，是否从页面左下角堆叠排列。 + +boolean + +`true` + +
    removeFocus 2.8+ + +是否移除弹层触发元素的焦点，避免按回车键时重复弹出。 + +boolean + +`true` + +
    move + +绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置 `move: false` 禁止拖拽。 +用法参考：[#示例](#demo-page) + +string
    DOM
    boolean    		-
    moveOut + +否允许拖拽到窗口外 + +boolean + +`false` + +
    tips + +设置 tips 层的吸附位置和背景色，tips 层的私有属性。 + +- 若为 `number` 类型，则支持 `1-4` 的可选值，分别代表*上右下左*的吸附位置。如： `tips: 1` +- 若为 `array` 类型，则支持设置吸附位置和背景色，如： + +``` +tips: [1, '#000'] // 吸附在上的深色贴士层 +``` + +number
    array    		 + +`2` + +
    tipsMore + +是否允许同时存在多个 tips 层，即不销毁上一个 tips。 + +boolean + +`false` + +
    + + +
    + +[回调函数](#options.callback) + +
    + +
    + +[success](#options.success) + + + +
    +打开弹层成功后的回调函数。返回的参数如下： +
    + +``` +layer.open({ + type: 1, + content: '内容', + success: function(layero, index, that){ + // 弹层的最外层元素的 jQuery 对象 + console.log(layero); + // 弹层的索引值 + console.log(index); + // 弹层内部原型链中的 this --- 2.8+ + console.log(that); + } +}); +``` + +
    + +[yes](#options.yes) + + + +
    + +点击「确定」按钮的回调函数。返回的参数同 `success` + +
    + +``` +layer.open({ + content: '内容', + yes: function(index, layero, that){ + // do something + layer.close(index); // 关闭弹层 + } +}); +``` + +
    + +[cancel](#options.cancel) + + + +
    +点击标题栏关闭按钮的回调函数。返回的参数同 `success` +
    + +``` +layer.open({ + content: '内容', + cancel: function(index, layero, that){ + if(confirm('确定要关闭么')){ + layer.close(index); + } + return false; // 阻止默认关闭行为 + } +}); +``` + +
    + +[end](#options.end) + + + +
    +弹层被关闭且销毁后的回调函数。 +
    + +``` +layer.open({ + content: '内容', + end: function(){ + console.log('弹层已被移除'); + } +}); +``` + +
    + +[moveEnd](#options.moveEnd) + + + +
    +弹层拖拽完毕后的回调函数。 +
    + +``` +layer.open({ + type: 1, + content: '内容', + moveEnd: function(layero){ + console.log('拖拽完毕'); + } +}); +``` + +
    + +[resizing](#options.resizing) + + + +
    +弹层拉伸过程中的回调函数 +
    + +``` +layer.open({ + type: 1, + content: '内容', + resizing: function(layero){ + console.log('拉伸中'); + } +}); +``` + +
    + +[full](#options.full) + + + +
    + +弹层最大化后的回调函数。返回的参数同 `success` + +
    + +``` +layer.open({ + type: 1, + content: '内容', + full: function(layero, index, that){ + console.log('弹层已最大化'); + } +}); +``` + +
    + +[min](#options.min) + + + +
    + +弹层最小化后的回调函数。返回的参数同 `success` + +
    + +``` +layer.open({ + type: 1, + content: '内容', + min: function(layero, index, that){ + // do something + // return false; // 阻止默认最小化 + } +}); +``` + +
    + +[restore](#options.restore) + + + +
    +弹层被还原后的回调函数。返回的参数同 `success` +
    + +``` +layer.open({ + type: 1, + content: '内容', + restore: function(layero, index, that){ + console.log('弹层已还原'); + } +}); +``` + +
    \ No newline at end of file diff --git a/docs/layer/detail/run.md b/docs/layer/detail/run.md new file mode 100644 index 00000000..3a41eb8b --- /dev/null +++ b/docs/layer/detail/run.md @@ -0,0 +1,35 @@ +
    +
    + <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: '
    一个普通的页面层，传入了自定义的 HTML
    ' +});</textarea> +
    +
    + +
    +
    + + \ No newline at end of file diff --git a/docs/layer/examples/alert.md b/docs/layer/examples/alert.md new file mode 100644 index 00000000..91b8f67d --- /dev/null +++ b/docs/layer/examples/alert.md @@ -0,0 +1,78 @@ +
    + + + + + + +
    + + \ No newline at end of file diff --git a/docs/layer/examples/direction.md b/docs/layer/examples/direction.md new file mode 100644 index 00000000..8b9277d1 --- /dev/null +++ b/docs/layer/examples/direction.md @@ -0,0 +1,68 @@ +从页面四个边缘弹出（抽屉效果）： + +
    + + + + +
    + + \ No newline at end of file diff --git a/docs/layer/examples/iframe.md b/docs/layer/examples/iframe.md new file mode 100644 index 00000000..cddbce98 --- /dev/null +++ b/docs/layer/examples/iframe.md @@ -0,0 +1,74 @@ +
    + + + + +
    + + \ No newline at end of file diff --git a/docs/layer/examples/load.md b/docs/layer/examples/load.md new file mode 100644 index 00000000..a71d848c --- /dev/null +++ b/docs/layer/examples/load.md @@ -0,0 +1,48 @@ +
    + + + + +
    + + \ No newline at end of file diff --git a/docs/layer/examples/more.md b/docs/layer/examples/more.md new file mode 100644 index 00000000..d8abd312 --- /dev/null +++ b/docs/layer/examples/more.md @@ -0,0 +1,169 @@ +
    + + + + + +
    + + + + \ No newline at end of file diff --git a/docs/layer/examples/offset.md b/docs/layer/examples/offset.md new file mode 100644 index 00000000..61dc784a --- /dev/null +++ b/docs/layer/examples/offset.md @@ -0,0 +1,42 @@ +
    + + + + + + + + + + +
    + + \ No newline at end of file diff --git a/docs/layer/examples/other.md b/docs/layer/examples/other.md new file mode 100644 index 00000000..775d9870 --- /dev/null +++ b/docs/layer/examples/other.md @@ -0,0 +1,100 @@ +
    + + + + + + +
    + + \ No newline at end of file diff --git a/docs/layer/examples/page.md b/docs/layer/examples/page.md new file mode 100644 index 00000000..15656694 --- /dev/null +++ b/docs/layer/examples/page.md @@ -0,0 +1,150 @@ +
    + + + + + +
    + + + + \ No newline at end of file diff --git a/docs/layer/examples/skin.md b/docs/layer/examples/skin.md new file mode 100644 index 00000000..77d46944 --- /dev/null +++ b/docs/layer/examples/skin.md @@ -0,0 +1,76 @@ +
    + + + + +
    + + + + \ No newline at end of file diff --git a/docs/layer/examples/tips.md b/docs/layer/examples/tips.md new file mode 100644 index 00000000..478342db --- /dev/null +++ b/docs/layer/examples/tips.md @@ -0,0 +1,47 @@ +
    + + + + + + +
    + + \ No newline at end of file diff --git a/docs/layer/examples/type.md b/docs/layer/examples/type.md new file mode 100644 index 00000000..f18286ea --- /dev/null +++ b/docs/layer/examples/type.md @@ -0,0 +1,104 @@ +
    + + + + + + + + + +
    + + \ No newline at end of file diff --git a/docs/layer/index.md b/docs/layer/index.md new file mode 100644 index 00000000..6b3072d5 --- /dev/null +++ b/docs/layer/index.md @@ -0,0 +1,606 @@ +--- +title: 通用弹出层组件 layer +toc: true +--- + +# 弹出层组件 🔥 + +> 弹出层组件 `layer` 是 `Layui` 最古老的组件，也是使用覆盖面最广泛的代表性组件。 `layer` 集众多弹层功能为一体，灵活而多样，是许多开发者的网页弹出层的首选交互方案，在各类业务场景都能发挥重要作用。 + + +

    示例

    + +点击下述按钮，查看每个示例对应的弹层效果。 + +
    +{{- d.include("docs/layer/detail/demo.md") }} +
    + +

    API

    + +| 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) 2.8+ | 关闭最近打开的对应类型的层。 | +| 其他 : | - | +| [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) | 还原弹层尺寸。 | + + +

    打开弹层

    + +`layer.open(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +打开弹层的核心方法，其他不同类型的弹出方法均为该方法的二次封装。 + +``` +// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作 +var index = layer.open({ + type: 1, // page 层类型，其他类型详见「基础属性」 + content: '
    test
    ' +}); +``` + +

    基础属性

    + +
    +{{- d.include("docs/layer/detail/options.md") }} +
    + +

    弹出信息框

    + +`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); +}); +``` + +

    弹出询问框

    + +`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); +}); +``` + + +

    弹出提示框

    + +`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 +}); +``` + + +

    弹出加载层

    + +`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); +``` + +

    弹出贴士层

    + +`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 介绍 +}); +``` + +

    弹出输入框

    + +`layer.prompt(options, yes);` + +- 参数 `options` : 基础属性配置项。除了支持 [基础属性](#options) 之外，还支持下表私有属性： + +| 私有属性 | 描述 | 类型 | 默认值 | +| --- | --- | --- | --- | +| formType | 输入框类型。支持以下可选值： | 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); // 关闭层 +}); +``` + +

    弹出图片层

    + +`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); // 图片层的容器对象 + } +}); +``` + +**用法二：绑定页面图片元素**。点击图片时，弹出对应的图片层。 + +
    +  
+
    + + +

    弹出标签层

    + +`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' + }] +}); +``` + + +

    关闭弹层

    + +`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); // 再执行关闭 +``` + + +

    关闭所有层

    + +`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 层 +``` + +

    关闭最近一次打开的层 2.8+

    + +`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 层 +``` + +

    全局配置默认属性

    + +`layer.config(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +该方法用于全局设置弹层的默认基础属性。 + +``` +layer.config({ + title: '默认标题', + skin: '', // 设置默认主题 + // … 其他任意基础属性 +}) +``` + +

    样式初始化就绪

    + +`layer.ready(callback);` + +- 参数 `callback` : 初始化完毕后的回调函数 + +该方法一般是在源码方式引入 `layui.js`，且要在页面初始即弹出层时使用，以确保弹层所依赖的样式文件先行加载。 而引入 release 版的 `layui.js` 则无需使用该方法，因为弹层样式已经统一合并到 `layui.css` 中。 + +``` +// 页面初始弹出层 +layer.ready(function(){ + layer.alert('对话框内容'); +}); +``` + +

    重新设置弹层样式

    + +`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' +}); +``` + +

    设置弹层的标题

    + +`layer.title(title, index);` + +- 参数 `title` : 标题 +- 参数 `index` : 打开弹层时返回的唯一索引 + +``` +// 打开弹层 +var index = layer.open({ + type: 1, + content: '内容' +}); + +// 重新设置标题 +layer.title('新标题', index) +``` + +

    获取 iframe 页中的元素

    + +`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.'); + } +}); +``` + +

    在 iframe 页中获取弹层索引

    + +`layer.getFrameIndex(window.name);` + +- 参数 `window.name` : 当前 iframe 窗口的 `name` 属性值 + +该方法用于在 iframe 页面内部获取当前 iframe 弹层的索引，以便关闭自身。 + +``` +var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引 +parent.layer.close(index); // 关闭当前 iframe 弹层 +``` + +

    设置 iframe 层高度自适应

    + +`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(); // 重新自适应弹层坐标 + } +}); +``` + +

    重新设置 iframe 层 URL

    + +`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/'); +``` + +

    置顶弹层

    + +`layer.setTop(layero);` + +- 参数 `layero` : layer 最外层容器的元素对象，一般可通过各个回调函数返回的参数获取。 + +该方法一般用于多弹层模式时，实现点击某个弹层让其层叠顺序置顶。效果参考：[#示例](#demo-more) + +``` +// 多弹层模式的层叠顺序置顶 +layer.open({ + type: 1, // 页面层 + shade: false, + area: ['520px', '320px'], + maxmin: true, + content: '
    多弹层模式的层叠顺序置顶
    ', + zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序， + success: function(layero){ + layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶 + } +}); +``` + +

    设置弹层最大化

    + +`layer.full(index);` + +- 参数 `index` : 打开弹层时返回的唯一索引 + +``` +// 打开弹窗 +var index = layer.open({ + type: 1, // 页面层 + content: '弹层内容' +}); +// 设置弹层最大化 +layer.full(index); +``` + +

    设置弹层最小化

    + +`layer.min(index);` + +- 参数 `index` : 打开弹层时返回的唯一索引 + +``` +// 打开弹窗 +var index = layer.open({ + type: 1, // 页面层 + content: '弹层内容' +}); +// 设置弹层最大化 +layer.min(index); +``` + +

    还原弹层

    + +`layer.restore(index);` + +- 参数 `index` : 打开弹层时返回的唯一索引 + +当弹层最大化或最小化状态时，执行该方法可还原弹层。 + + +## 贴士 + +> layer 曾经可作为单独组件使用，鉴于维护成本的考量，目前 layer 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 layer 即可。 \ No newline at end of file diff --git a/docs/layout/grid.md b/docs/layout/grid.md new file mode 100644 index 00000000..28b48903 --- /dev/null +++ b/docs/layout/grid.md @@ -0,0 +1,541 @@ +--- +title: 栅格布局 +toc: true +--- + +# 栅格布局 + +> Layui 栅格系统是一套具备响应式能力的布局方案，采用业界比较常用的容器横向 `12` 等分规则，预设了 `5*12` 种 CSS 排列类，内置多种大小尺寸的多终端适配，能很好地实现响应式布局，这意味着一套系统，能同时适配于电脑的不同大小屏幕和手机、平板等移动屏幕，使得网页布局变得更加灵活，同时也极大地降低了 `HTML/CSS` 代码的耦合。 + +

    示例

    + +> 贴士：以下示例中的*背景色*仅仅只是为了让布局效果显得更加直观，实际使用时并不需要背景色。 + + + +- 始终等比例水平排列： + +
    +  
+
    + +- 移动设备、桌面端的组合响应式展现： + +
    +  
+
    + +- 移动设备、平板、桌面端的复杂组合响应式展现： + +
    +  
+
    + +- 常规布局：从小屏幕堆叠到桌面水平排列： + +
    +  
+
    + +- 列间隔： + +
    +  
+
    + +- 列偏移 + +
    +  
+
    + +- 栅格嵌套： + +> 理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力 + +
    +  
+
    + +- 流体容器（宽度自适应，不固定）： + +
    +  
+
    + +
    + +

    栅格布局规则

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    1.采用 layui-row 来定义行，如：<div class="layui-row"></div>
    2. + 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中： +
    +
      +
    • 变量md 代表的是不同屏幕下的标记（可选值见下文）
      • +
    • 变量* 代表的是该列所占用的 12 等分数（如 6/12），可选值为 1 - 12
      • +
    • 如果多个列的“等分数值”总和等于 12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
      • +
    +
    +
    3.列可以同时出现最多 5 种不同的组合，分别是：xs / sm / md / lg / xl 2.8+，以在不同尺寸屏幕下进行自动适配。
    4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
    5.最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！
    + +

    响应式规则

    + +栅格的响应式能力，得益于 `CSS3` 媒体查询（`Media Queries`），针对不同尺寸的屏幕进行相应的适配处理。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    超小屏幕
    (手机<768px)    		小屏幕
    (平板≥768px)    		中等屏幕
    (桌面≥992px)    		大型屏幕
    (桌面≥1200px)    		超大屏幕
    (桌面≥1400px)
    layui-containerauto750px970px1170px1330px
    标记xssmmdlgxl 2.8+
    列对应类layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*layui-col-xl*
    总列数12
    响应行为始终按比例水平排列在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列
    + +

    响应式公共类

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    类名（class）说明
    layui-show-*-block定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg、xl
    layui-show-*-inline定义不同设备下的 display: inline; * 可选值同上
    layui-show-*-inline-block定义不同设备下的 display: inline-block; * 可选值同上
    layui-hide-*定义不同设备下的隐藏类，即： display: none; * 可选值同上
    + +

    布局容器

    + +将栅格放入一个带有 `class="layui-container"` 的特定容器中，以便在小屏幕以上的设备中固定宽度，让列可控。 + +``` +
    +
    + …… +
    +
    +``` + +当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 `class="layui-fluid"`的容器中，那么宽度将不会固定，而是 100% 适应 + +``` +
    + …… +
    +``` + +

    列间距

    + + + + + + + + + + + + + + +
    通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：
    + 
    +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 的单数间隔
    +
    + +下面是一个简单的例子，列间距为 `16px`： + +``` +
    +
    + 1/3 +
    +
    + 1/3 +
    +
    + 1/3 +
    +
    +``` + +

    列偏移

    + +对列追加类似 `layui-col-md-offset*` 的预设类，从而让列向右偏移。如：`layui-col-md-offset3`，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度。下面是一个采用「列偏移」机制让两个列左右对齐的实例 + +``` +div class="layui-row"> +
    + 4/12 +
    +
    + 偏移4列，从而在最右 +
    + +``` + +> 请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。 + +

    IE8/9 兼容方案

    + +事实上 `IE8/IE9` 并不支持 `Media Queries`，但你可以使用下面的补丁进行兼容（补丁来自于开源社区）： + +``` + + +``` + +将上述代码放入你页面 `` 标签内的任意位置即可。 \ No newline at end of file diff --git a/docs/layout/index.md b/docs/layout/index.md new file mode 100644 index 00000000..f31c2e13 --- /dev/null +++ b/docs/layout/index.md @@ -0,0 +1,153 @@ +--- +title: Admin UI 框体布局 +toc: true +--- + +# 框体布局 + +> Layui 的主要应用场景是面向中后台的界面搭建，因此也提供了大框体布局方案。 + +

    示例

    + +
    +  
+
    + +
    + +> 小贴士：以上是一个基础的框体布局方案，若要实现诸如 `iframe` 跳转、侧边菜单收缩等功能，还需按照实际的业务需求自主实现。当然，也可以采用社区已有的 AdminUI 主题方案，如：layuiAdmin 等。 + +

    Admin UI

    + +layuiAdmin 是一套用于开发通用型管理系统的纯静态的 `HTML` 网页界面主题，基于开源的 Layui Web 组件库制作而成，没有任何后端程序及数据库存储等服务端代码。开发者使用该网页模板，可省去前端的大量工作，从而更高效地开发 Web 应用系统。 diff --git a/docs/laypage/detail/demo.md b/docs/laypage/detail/demo.md new file mode 100644 index 00000000..7c7e97cb --- /dev/null +++ b/docs/laypage/detail/demo.md @@ -0,0 +1,258 @@ +
    +  
+
    + +

    自定义主题

    + +
    +  
+
    + +

    自定义文本

    + +
    +  
+
    + +

    不显示上一页、下一页

    + +
    +  
+
    + +

    只显示上一页、下一页、当前页

    + +
    +  
+
    + +

    自定义排版

    + +
    +  
+
    + +

    自定义每页条数的选择项

    + +
    +  
+
    + +

    完整显示

    + +
    +  
+
    + +

    高级 - 开启 HASH

    + +
    +  
+
    + +

    高级 - 将一段已知数组分页展示

    + +
    +  
+
    \ No newline at end of file diff --git a/docs/laypage/detail/options.md b/docs/laypage/detail/options.md new file mode 100644 index 00000000..35951478 --- /dev/null +++ b/docs/laypage/detail/options.md @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    属性名描述类型默认值
    elem + +绑定分页容器。值可以是容器 `id` 或 DOM 对象。如： + +- `elem: 'id'` 注意：这里不能加 `#` 号 +- `elem: document.getElementById('id')` + +string
    DOM    		-
    count + +数据总数。一般通过后端得到 + +number-
    limit + +每页显示的条数。 + +number + +`10` + +
    limits + +每页条数的选择项。 若 `layout` 参数开启了 `limit` ，则会出现每页条数的 select 选择框 + +array + +`[10,…,50]` + +
    curr + +初始化当前页码。 + +number + +`1` + +
    groups + +连续出现的页码数量 + +number + +`5` + +
    prev + +自定义“上一页”的内容，支持传入普通文本和 HTML + +string + +`上一页` + +
    next + +自定义“下一页”的内容，用法同上。 + +string + +`下一页` + +
    first + +自定义“首页”的内容，用法同上。 + +string + +`1` + +
    last + +自定义“尾页”的内容，用法同上。 + +string + +*自动获得* + +
    layout + +自定义分页功能区域排版。可自由排列，可选值有： + +- `count` 数据总数区域 +- `prev` 上一页区域 +- `page` 分页区域 +- `next` 下一页区 +- `limit` 条目选项区域 +- `refresh` 页面刷新区 +- `skip` 快捷跳页区 + +array + + + +
    theme + +自定义主题。支持传入：颜色值或任意普通字符。如： + +- `theme: '#c00'` 直接设置当前页按钮背景色 +- `theme: 'xxx'` 会生成 `class="layui-laypage-xxx"` 的 CSS 类，以便自定义主题 + +string-
    hash + +设置 `hash` 名称。设置该属性后，点击分页将会自动对当前 `url` 追加：`#{hash}={curr}`，从而在页面刷新时初始化当前页码。[#详细用法参考示例](#demo-hash) + +string-
    + + +
    + +[回调函数](#options.callback) + +
    + +
    + +[jump](#options.jump) + + + +
    分页跳转后的回调函数。函数返回两个参数：
    + +- 参数 `obj` : 当前分页相关的所有选项值 +- 参数 `first` : 是否首次渲染，一般用于初始加载的判断 + +``` +laypage.render({ + elem: 'id', + count: 70, // 数据总数，从后端得到 + jump: function(obj, first){ + console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。 + console.log(obj.limit); // 得到每页显示的条数 + + // 首次不执行 + if(!first){ + // do something + } + } +}); +``` + +
    + diff --git a/docs/laypage/index.md b/docs/laypage/index.md new file mode 100644 index 00000000..90ec6522 --- /dev/null +++ b/docs/laypage/index.md @@ -0,0 +1,37 @@ +--- +title: 分页组件 laypage +toc: true +--- + +# 分页组件 + +> 分页组件 `laypage` 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率。 + +

    示例

    + +
    +{{- d.include("docs/laypage/detail/demo.md") }} +
    + +

    API

    + +| API | 描述 | +| --- | --- | +| var laypage = layui.laypage | 获得 `laypage` 模块。 | +| [laypage.render(options)](#render) | laypage 组件渲染，核心方法。 | + +

    渲染

    + +`laypage.render(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) + +

    属性

    + +
    +{{- d.include("docs/laypage/detail/options.md") }} +
    + +## 小贴士 + +laypage 组件只负责分页本身的逻辑，具体的数据请求及对应的视图渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现，如 table 组件的分页就是采用的 laypage。 \ No newline at end of file diff --git a/docs/laytpl/detail/demo.md b/docs/laytpl/detail/demo.md new file mode 100644 index 00000000..271fba8e --- /dev/null +++ b/docs/laytpl/detail/demo.md @@ -0,0 +1,135 @@ + + +
    +  
+
    \ No newline at end of file diff --git a/docs/laytpl/detail/options.md b/docs/laytpl/detail/options.md new file mode 100644 index 00000000..b26499cc --- /dev/null +++ b/docs/laytpl/detail/options.md @@ -0,0 +1,78 @@ + + + + + + + + + + + + {{! + + + + + + + + + + + + !}} + + + + + +
    标签描述
    {{= }} + +转义输出。若字段存在 HTML，将进行转义。 + +``` +

    {{= d.title }}

    +``` + +
    {{- }} 2.8+ + +原始输出。若字段存在 HTML，将正常渲染。 + +``` +
    {{- d.content }}
    +``` + +该语句一般在需要正常渲染 HTML 时用到，但若字段存在 script 等标签，为防止 xss 问题，可采用 `{{= }}` 进行转义输出。 + +> ### 注意 +> 由于 `2.6.11` 版本对 laytpl 语句进行了重要调整，原 `{{ }}` 语法即等同 `{{- }}`，升级版本时，请进行相应调整。可参考：https://gitee.com/layui/layui/issues/I5AXSP + +
    {{# }} + + JavaScript 语句。一般用于逻辑处理。 + + ``` +
    +{{# + var fn = function(){ + return '2017-08-18'; + }; +}} +{{# if(true){ }} + 开始日期：{{= fn() }} +{{# } else { }} + 已截止 +{{# } }} +
    + ``` + +
    {{!{{! !}}!}} + +对一段指定的模板区域进行过滤，即不解析该区域的模板。 + +``` +{{! {{! 这里面的模板不会被解析 !}} !}} +``` + +
    diff --git a/docs/laytpl/index.md b/docs/laytpl/index.md new file mode 100644 index 00000000..3cfa243f --- /dev/null +++ b/docs/laytpl/index.md @@ -0,0 +1,151 @@ +--- +title: 模板引擎 laytpl +toc: true +--- + +# 模板引擎 + +> `laytpl` 是 Layui 的一款轻量 JavaScript 模板引擎，在字符解析上有着比较出色的表现。 + +

    在线测试

    + +在以下*模板*或*数据*中进行编辑，下方*视图*将呈现对应结果。 + +
    +{{- d.include("docs/laytpl/detail/demo.md") }} +
    + +

    API

    + +| API | 描述 | +| --- | --- | +| var laytpl = layui.laytpl | 获得 `laytpl` 模块。 | +| [laytpl(str, options).render(data, callback)](#render) | laytpl 组件渲染，核心方法。 | +| [laytpl.config(options)](#config) | 配置 laytpl 全局属性 | + +

    模板解析和渲染

    + +`laytpl(str, options).render(data, callback);` + +- 参数 `str` : 模板原始字符 +- 参数 `options` 2.8+ : 当前模板实例的属性配置项。可选项详见：[#属性配置](#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); // 张三是一名前端工程师 +}); +``` + +若模板字符较大，可存放在页面某个标签中，如： + +``` + + +
    + + +``` + +!}} + +在实际使用时，若模板通用，而数据不同，为减少模板解析的开销，可将语句分开书写，如。 + +``` +var compile = laytpl(str); // 模板解析 +compile.render(data, callback); // 模板渲染 +``` + +

    标签语法

    + +
    +{{- d.include("docs/laytpl/detail/options.md") }} +
    + + +

    属性配置

    + +`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); // 张三是一名前端工程师。 +}); +``` + +### 局部配置 2.8+ + +若不想受到上述全局配置的影响，可在 `laytpl(str, options)` 方法的第二个参数中设置当前模板的局部属性，如： + +``` +laytpl('<%= d.name %>是一名前端工程师', { + open: '<%', + close: '%>' +}).render({name: '张三'}, function(string){ + console.log(string); // 张三是一名前端工程师。 +}); +``` + + +## 贴士 + +> Layui table 等组件的动态模板功能，均采用 laytpl 驱动。 laytpl 亦可承载单页面应用开发中的视图模板。 + diff --git a/docs/menu/examples/demo.md b/docs/menu/examples/demo.md new file mode 100644 index 00000000..9ee3e92a --- /dev/null +++ b/docs/menu/examples/demo.md @@ -0,0 +1,117 @@ + + + + + 基础菜单 - Layui + + + + + + +
    +
      +
    • +
      menu item 1
      +
      • +
    • +
      + menu item 2 +
      +
      • +
    • +
    • +
      + menu group +
      +
        +
      • +
        menu item 3-1
        +
        • +
      • +
        menu group 2
        +
          +
        • +
          menu item 3-2-1
          +
          • +
        • menu item 3-2-2
          • +
        +
        • +
      • menu item 3-3
        • +
      +
      • +
    • +
    • menu item 4 1
      • +
    • menu item 5
      • +
    • menu item 6
      • +
    • +
      + menu item 7 Children + +
      +
      +
        +
      • +
        + menu item 7-1 + +
        +
        +
          +
        • menu item 7-2-1
          • +
        • menu item 7-2-2
          • +
        • menu item 7-2-3
          • +
        • menu item 7-2-4
          • +
        +
        +
        • +
      • menu item 7-2
        • +
      • menu item 7-3
        • +
      +
      +
      • +
    • menu item 8
      • +
    • +
    • +
      menu group 9
      +
        +
      • menu item 9-1
        • +
      • +
        + menu item 9-2 + +
        +
        +
          +
        • menu item 9-2-1
          • +
        • menu item 9-2-2
          • +
        • menu item 9-2-3
          • +
        +
        +
        • +
      • menu item 9-31
        • +
      +
      • +
    • +
    • menu item 10
      • +
    +
    + + + + + \ No newline at end of file diff --git a/docs/menu/index.md b/docs/menu/index.md new file mode 100644 index 00000000..456bb4b2 --- /dev/null +++ b/docs/menu/index.md @@ -0,0 +1,62 @@ +--- +title: 基础菜单 menu +toc: true +--- + +# 基础菜单 + +> 基础菜单 `menu` 是垂直导航菜单的另一个替代方案，它是基于 `dropdown` 组件驱动的静态元素结构。 + +

    示例

    + +
    +  
+
    + +

    结构

    + +基础菜单层级与样式结构如下： + +- 通过 `` 命名基础菜单容器 + - 追加 `className` 为 `layui-menu-lg` 可设置基础菜单的大尺寸风格 + - 通过 `
  • ` 放置菜单列表项 + - 属性： + - 追加 `className` 为　`layui-menu-item-group` 可设置当前菜单为菜单组，即子菜单为纵向层级。 + - 或追加 `className` 为 `layui-menu-item-parent` 可这支当前菜单为父级菜单，即子菜单为横向层级。 + - 追加 `className` 为 `layui-menu-item-divider` 可设置分隔线。 + - 追加 `className` 为 `layui-menu-item-up` 或 `layui-menu-item-down` 可设置子菜单默认收缩或展开。 + - 追加 `className` 为 `layui-menu-item-checked` 可设置当前菜单为选中状态 + - 添加 `lay-options="{}"` 可设置对应菜单列表的基础属性 + - 内容： + - 通过 `
    ` 放置菜单标题容器 + - 通过 `
    ` 放置横向子菜单外层面板 + - 通过 `` 放置子菜单列表，其中 `
  • ` 中的规则同父级。 +- 再将基础菜单放置在一个面板容器中，以更好地定义尺寸、边框或阴影等外观，详细可参考上述示例。 + + +

    属性

    + +属性即命名在基础菜单列表元素 `
  • ` 中的 `lay-options` 属性值，如：`
  • `，其支持的属性如下： + +| 属性 | 描述 | +| --- | --- | +| title | 设置菜单标题。默认读取标题容器内容中的文本。 | +| type | 设置菜单类型。可选值如下： | +| isAllowSpread | 子菜单是否允许展开收缩操作。默认 `true` | + +

    事件

    + +`dropdown.on('click(filter)', callback)` + +- 参数 `click(filter)` 是一个特定结构。 + - `click` 为基础菜单项点击事件固定值； + - `filter` 为基础菜单容器属性 `lay-filter` 对应的值。 +- 参数 `callback` 为事件执行时的回调函数，并返回一个 object 类型的参数。 + +点击菜单列表项时触发。用法：[#详见示例](#examples) + +## 贴士 + +基础菜单相当于是 `dropdown` 组件的一种静态化呈现，因此在事件等动态操作上需借助 `dropdown` 组件的 API 来完成。 \ No newline at end of file diff --git a/docs/modules.md b/docs/modules.md new file mode 100644 index 00000000..55126a9a --- /dev/null +++ b/docs/modules.md @@ -0,0 +1,264 @@ +--- +title: 模块系统 +toc: true +--- + +

    模块系统

    + +> Layui 制定了一套适合自身应用场景的轻量级模块规范，以便在不同规模的项目中，也能对前端代码进行很好的管理或维护。 Layui 的轻量级模块系统，并非有意违背 CommonJS 和 ES Module ，而是试图以更简单的方式去诠释高效，这种对*返璞归真*的执念源于在主流标准尚未完全普及的前 ES5 时代，后来也成为 Layui 独特的表达方式，而沿用至今。 + +如下是一个关于模块的简单示例： + +``` +// 定义模块（通常单独作为一个 JS 文件） +layui.define([mods], function(exports){ + // … + + exports('mod1', api); // 输出模块 +}); + +// 使用模块 +layui.use(['mod1'], function(args){ + var mod1 = layui.mod1; + + // … +}); +``` + +我们可以将其视为「像使用普通 API 一样来管理模块」，在此前提下，组件的承载也变得轻松自如，我们完全可以游刃在以浏览器为宿主的原生态的 HTML/CSS/JavaScript 的开发模式中，而不必卷入层出不穷的主流框架的浪潮之中，给心灵一个栖息之所。 + +当然，Layui 自然也不是一个模块加载器，而是一套相对完整的 UI 解决方案，但与 Bootstrap 又并不相同，除了 HTML+CSS 本身的静态化处理，Layui 的组件更倾向于 JavaScript 的动态化渲染，并为之提供了相对丰富和统一的 API，使用时，只需稍加熟悉，便可在各种交互中应付自如。 + + +

    定义模块

    + +`layui.define([mods], callback);` + +- 参数 `mods` 可选，用于声明该模块所依赖的模块； +- 参数 `callback` 即为模块加载完毕的回调函数，它返回一个 `exports` 参数，用于输出该模块的接口。 + +``` +/** demo.js **/ +layui.define(function(exports){ + // do something + + // 输出 demo 模块 + exports('demo', { + msg: 'Hello Demo' + }); +}); + +// 若该模块需要依赖别的模块，则在 `mods` 参数中声明即可： +// layui.define(['layer', 'form'], callback); +``` + +如上所示，`callback` 返回的 `exports` 参数是一个函数，它接受两个参数：参数一为*模块名*，参数二为*模块接口*。 + +另外， `callback` 将会在初次加载该模块时被自动执行。而有时，在某些特殊场景中可能需要再次执行该 `callback`，那么可以通过 `layui.factory(mod)` 方法获得。如： + +``` +var demoCallback = layui.factory('demo'); // 得到定义 demo 模块时的 `callback` +``` + +- **模块命名空间** + +Layui 定义的模块将会被绑定在 `layui` 对象下，如：`var demo = layui.demo;` 每个模块都有一个特定命名，且无法被占用，所以你无需担心模块的命名空间被污染，除非通过 `layui.disuse([mods])` 方法弃用已定义的模块。 + +以下是定义一个「依赖 Layui 内置模块」的模块示例： + +``` +layui.define(['layer', 'laydate'], function(exports){ + var layer = layui.layer // 获得 layer 模块 + var laydate = layui.laydate; // 获得 laydate 模块 + + // 输出模块 + exports('demo', {}); // 模块名 demo 未被占用，此时模块定义成功 + // exports('layer', {}); // 模块名 layer 已经存在，此时模块定义失败 +}); +``` + +同样的，在「扩展模块」时，也同样不能命名已经存在的模块名。 + + +

    使用模块

    + +`layui.use([mods], callback);` + +- 参数 `mods` 若填写，必须是已被成功定义的模块名； +
    注2.6+：若 mods 不填，即只传一个 callback 参数时，则表示引用所有内置模块。 +- 参数 `callback` 即为使用模块成功后回调函数。 +
    注2.6+：该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作。 + +``` +// 使用指定模块 +layui.use(['layer', 'table'], function(){ + var layer = layui.layer; + var table = layui.table; + + // do something +}); + +// 使用所有内置模块（layui v2.6 开始支持） +layui.use(function(){ + var layer = layui.layer; + var table = layui.table; + var laydate = layui.laydate; + // … + + // do something +}); +``` + +你还可以通过 `callback` 返回的参数得到模块对象，如： + +``` +layui.use(['layer', 'table'], function(layer, table){ + // 使用 layer + layer.msg('test'); + + // 使用 table + table.render({}); +}); +``` + +- **执行「定义模块」时的回调函数** + +在上文的定义模块中，我们提到一个特殊场景，即重新获取定义模块时的 `callback` 函数, 譬如在*单页面应用*开发中，我们在视图碎片中使用某个模块，由于定义模块时的 `callback` 只会在模块初次加载中被调用，而当视图碎片在每次被渲染时，又往往需要该 `callback` 被再次执行，那么则可以通过以下方式实现： + +``` +// 在单页面视图碎片渲染时，再次调用「定义模块」时的 `callback` +layui.use('demo', layui.factory('demo')); +``` + +

    扩展模块

    + +`layui.extend(obj);` + +- 参数 `obj` 是一个对象，必选，用于声明模块别名。 + +除了 Layui 的内置模块，在实际项目开发时，必不可少也需要扩展模块（可以简单理解为符合 layui 模块规范的 JS 文件）。 现在，让我们尝试着扩展一个 Layui 第三方模块： + +1. **创建模块** + +我们在前文的「模块命名空间」提到，模块名具有唯一性，即不可被占用，因此我们扩展的模块必须是一个未被定义过的模块名。假设为：`firstMod`，然后新建一个 `firstMod.js` 文件并放入项目的任意目录中（最好不要放入到 Layui 原始目录） + +2. **编写模块** + +接下来我们开始定义 `firstMod` 模块，并编写改模块主体代码。 + +``` +/** + * 编写一个 firstMod 模块 + **/ +layui.define(function(exports){ // 也可以依赖其他模块 + var obj = { + hello: function(str){ + alert('Hello '+ (str || 'firstMod')); + } + }; + + // 输出 firstMod 接口 + exports('firstMod', obj); +}); +``` + +3. **声明模块** + +现在，我们只需声明模块名及模块文件路径，即完成模块扩展。 + +``` +// 假设 firstMod 模块文件所在路径在： /js/layui_exts/firstMod.js +layui.config({ + base: '/js/layui_exts/' // 配置 Layui 第三方扩展模块存放的基础目录 +}).extend({ + firstMod: 'firstMod', // 定义模块名和模块文件路径，继承 layui.config 的 base 路径 + // mod2: 'mod2' // 可同时声明其他更多模块 +}); + +// 也可以不继承 layui.config 的 base 路径，即单独指定路径 +layui.extend({ + firstMod: '{/}/js/layui_exts/firstMod' // 开头特定符 {/} 即代表采用单独路径 +}); + +// 然后我们就可以像使用内置模块一样使用扩展模块 +layui.use(['firstMod'], function(){ + var firstMod = layui.firstMod; + + firstMod.hello('World'); +}); +``` + +> 扩展模块是项目开发的重要环节，它既可以是工具性组件，也可以是纯业务组件，是 Layui 的延伸，也是项目的支撑。 + + +

    建立模块入口

    + +在不同的页面中，可能需要用到不同的业务模块。以首页为例： + +``` + + +``` + +上述的 `index` 模块即对应的模块文件 `/js/modules/index.js`，它同样也必须符合 Layui 模块规范。如： + +``` +/** + * index.js 首页业务模块 + */ +layui.define(['layer', 'form'], function(exports){ + var layer = layui.layer; + var form = layui.form; + + layer.msg('Hello Index'); + + exports('index', {}); // 输出模块名需和 use 和 extend 时的模块名一致 +}); +``` + +**合并模块入口** + +当项目存在许多不同的业务模块（且存在一定的依赖关系），我们又希望在页面中建立统一的入口模块。如： + +``` +// mod1.js +layui.define('layer', function(exports){ + // … + exports('mod1', {}); +}); + +// mod2.js，假设依赖 mod1 和 form +layui.define(['mod1', 'form'], function(exports){ + // … + exports('mod2', {}); +}); + +// mod3.js +// … + +// index.js 主入口模块 +layui.define('mod2', function(exports){ + // … + exports('main', {}); +}); +``` + +我们可以将上述模块合并为一个文件来加载，即借助构建工具（如 Gulp）将上述的 mod1、mod2、mod3、index 等业务模块合并到一个模块文件：`index.js`，此时只需在页面统一加载该模块即可。这样我们最多只需要加载两个 JS 文件：`layui.js、index.js`，这将大幅度减少静态资源的请求。 + + + +
    + +## 小贴士 + +> 综上： Layui 轻量级模块系统，无非就是：定义模块、使用模块、弃用模块、扩展模块的相互呼应，翻译成 API 即： +> - `layui.define();` +> - `layui.use();` +> - `layui.disuse();` +> - `layui.extend();` +> --- +> 熟练运用，可让您的项目更利于维护。 diff --git a/docs/nav/examples/side.md b/docs/nav/examples/side.md new file mode 100644 index 00000000..f111f1d9 --- /dev/null +++ b/docs/nav/examples/side.md @@ -0,0 +1,41 @@ + + + + + 侧边垂直导航 - Layui + + + + + + + + + + + \ No newline at end of file diff --git a/docs/nav/index.md b/docs/nav/index.md new file mode 100644 index 00000000..9f3efa31 --- /dev/null +++ b/docs/nav/index.md @@ -0,0 +1,333 @@ +--- +title: 导航菜单 nav +toc: true +--- + +# 导航菜单 + +> 导航菜单包含水平导航和垂直导航， 在 `2.x` 版本中，`nav` 组件属于 `element` 模块的子集。 + +

    水平导航

    + +一般用于页面头部菜单。样式规则如下： + +- 通过 `class="layui-nav"` 设置导航容器 +- 通过 `class="layui-nav-item"` 设置导航菜单项 + - 追加 `className` 为 `layui-this` 可设置菜单选中项 +- 通过 `class="layui-nav-child"` 设置导航子菜单项 + - 追加 `className` 为 `layui-nav-child-c` 和 `layui-nav-child-r` 可设置子菜单居中和向右对齐 + + +

    常规用法

    + +
    +  
+
    + +备注：滑块效果仅跟随不存在子菜单的菜单项。 + +

    加入徽章等元素

    + +
    +  
+
    + +

    导航主题

    + +给导航容器追加任意背景色 `class`，内置背景色参考：[#背景色公共类](../class.html) + +
    +  
+
    + + +

    垂直导航

    + +一般用于左侧侧边菜单。样式规则如下： + +- 在水平导航的 `class` 规则上，通过设置 `class="layui-nav layui-nav-tree"` 定义垂直导航容器。 +- 通过 `class="layui-nav-itemed"` 设置父菜单项为展开状态 +- 通过给导航容器追加 `class="layui-nav-side"` 可设置侧边垂直导航 +- 其余结构及填充内容与水平导航完全相同 + +
    +  
+
    + +

    侧边垂直导航

    + +
    +  
+
    + +

    API

    + +| API | 描述 | +| --- | --- | +| var element = layui.element | 获得 `element` 模块。 | +| [element.render(\'nav\', \'filter\')](#render) | 导航菜单 `nav` 组件渲染。 | + +

    渲染

    + +`element.render('nav', filter);` + +- 参数 `'nav'` 是渲染导航的固定值 +- 参数 `filter` : 对应导航容器 `lay-filter` 的属性值 + +`nav` 组件会在元素加载完毕后，自动对导航完成一次渲染，因此该方法主要用于对动态插入的导航元素的初始化渲染。 + +``` +
    + +``` + +

    属性

    + +| 属性 | 描述 | +| --- | --- | +| lay-shrink | 导航容器属性。展开子菜单时，是否收缩兄弟节点已展开的子菜单。可选值： | +| lay-bar | 导航容器属性。用于禁用滑块跟随功能。如：
    `
    …
    ` | +| lay-unselect | 导航菜单项属性。 设置后，点击对应菜单项时，不会出现选中效果。 | + + +

    事件

    + +`element.on('nav(filter)', callback)` + +- 参数 `nav(filter)` 是一个特定结构。 + - `nav` 为导航事件固定值； + - `filter` 为导航容器属性 `lay-filter` 对应的值。 +- 参数 `callback` 为事件执行时的回调函数，并返回一个 `object` 类型的参数。 + +当点击导航父级菜单和二级菜单时触发。示例： + +
    +  
+
    + +

    面包屑导航

    + +面包屑导航主要用于指示当前页面所处的位置，并能返回到上级页面。 + +
    +  
+
    + +### **面包屑导航渲染** + +`element.render('breadcrumb', filter);` + +- 参数 `'breadcrumb'` 是渲染面包屑导航的固定值 +- 参数 `filter` : 对应面包屑导航容器 `lay-filter` 的属性值 + +该方法主要用于对动态插入的面包屑导航的初始化渲染，用法同上述导航菜单。 \ No newline at end of file diff --git a/docs/panel/index.md b/docs/panel/index.md new file mode 100644 index 00000000..522de2eb --- /dev/null +++ b/docs/panel/index.md @@ -0,0 +1,281 @@ +--- +title: 面板 panel,card,collapse +toc: true +--- + +# 面板 + +> 面板是一个包含普通面板（panel）、卡片面板（card）、折叠面板（collapse）的集合 + +

    常规面板

    + +常规面板通常作为包裹其他元素的形式存在，如与基础菜单 `menu` 经常搭配使用。 + +
    +  
+
    + +

    卡片面板

    + +
    +  
+
    + +

    折叠面板

    + +
    +  
+
    + + +

    开启手风琴

    + +在折叠面板容器上追加 `lay-accordion` 属性，开启手风琴效果，即点击展开当前面板的同时，折叠其他面板。 + +
    +  
+
    + +

    折叠面板嵌套

    + +折叠面板内部支持无限嵌套，即折叠面板中再放置无限层级的折叠面板，以实现树形折叠结构。如： + +
    +  
+
    + + +

    折叠面板渲染

    + + +`element.render('collapse', filter);` + +- 参数 `'collapse'` : 渲染折叠面板的固定值 +- 参数 `filter` : 对应折叠面板容器 `lay-filter` 的属性值 + +在元素加载完毕后，`element` 模块会自动对元素进行一次渲染。而当元素为动态插入时，需通过该方法完成初始化渲染。 + + +

    折叠面板事件

    + +`element.on('collapse(filter)', callback)` + +- 参数 `collapse(filter)` 是一个特定结构。 + - `collapse` 为折叠面板点击事件固定值； + - `filter` 为导航容器属性 `lay-filter` 对应的值。 +- 参数 `callback` 为事件执行时的回调函数，并返回一个 `object` 类型的参数。 + +
    +  
+
    + + diff --git a/docs/progress/index.md b/docs/progress/index.md new file mode 100644 index 00000000..9b188e36 --- /dev/null +++ b/docs/progress/index.md @@ -0,0 +1,224 @@ +--- +title: 进度条 progress +toc: true +--- + +# 进度条 + +> 进度条 `progress` 可应用于许多业务场景，如任务完成进度、loading 等等。 + +

    示例

    + +
    +  
+
    + +进度条宽度是 100% 适配于它的父级元素，如上面的进度条是在一个 300px 的父容器中。 + + +

    进度条主题

    + +
    +  
+
    + + +

    大号进度条

    + +通过对进度条容器追加 `className` 为 `layui-progress-big` 可设置大尺寸风格的进度条。 + +
    +  
+
    + + +

    显示进度值

    + +
    +  
+
    + + +

    API

    + +| API | 描述 | +| --- | --- | +| var element = layui.element | 获得 `element` 模块。 | +| [element.render(\'progress\', filter)](#render) | 进度条 `progress` 组件渲染。 | +| [element.progress(filter, percent)](#progress) | 设置进度值 | + +

    渲染

    + +`element.render('progress', filter);` + +- 参数 `'progress'` : 渲染进度条的固定值 +- 参数 `filter` : 对应进度条容器 `lay-filter` 的属性值 + +在元素加载完毕后，element 模块会自动对元素进行一次渲染。而当元素为动态插入时，需通过该方法完成初始化渲染。 + +``` +
    + +``` + + +

    属性

    + +| 属性 | 描述 | +| --- | --- | +| lay-percent | 用于设置进度条的值，进度条内层容器属性。支持 *百分比* 和 *分数* 形式。用法详见：[#示例](#examples) | +| lay-showpercent | 是否显示进度值，进度条外层容器属性，默认不显示。用法详见：[#示例](#showpercent) | + + +

    设置进度值

    + +`element.progress(filter, percent);` + +- 参数 `filter` : 对应进度条容器 `lay-filter` 的属性值 +- 参数 `'percent'` : 进度条的值 + +该方法用于动态改变进度条的值。示例： + +
    +  
+
    + diff --git a/docs/rate/detail/demo.md b/docs/rate/detail/demo.md new file mode 100644 index 00000000..00e61190 --- /dev/null +++ b/docs/rate/detail/demo.md @@ -0,0 +1,174 @@ +
    +  
+
    + +

    显示文字

    + +
    +  
+
    + +

    半星效果

    + +
    +  
+
    + +

    自定义文本

    + +
    +  
+
    + +

    自定义长度

    + +
    +  
+
    + +

    只读

    + +
    +  
+
    + +

    自定义主题色

    + +
    +  
+
    \ No newline at end of file diff --git a/docs/rate/detail/options.md b/docs/rate/detail/options.md new file mode 100644 index 00000000..ebdf3b54 --- /dev/null +++ b/docs/rate/detail/options.md @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    属性名描述类型默认值
    elem + +绑定元素选择器或 DOM 对象 + +string/DOM-
    length + +评分的最大长度值，即星星的数量。 + +number + +`5` + +
    value + +评分的初始值 + +number + +`0` + +
    half + +是否可以选择半星。若开启，则 `value` 支持小数点，如： + +``` +value: '3.5' +``` + +boolean + +`false` + +
    theme + +主题色 + +string + +`#FFB800` + +
    text + +是否显示评分对应的文本 + +boolean + +`false` + +
    readonly + +是否只读，即只用于展示，而不可点击 + +boolean + +`false` + +
    setText + +初始设置自定义文本的回调函数。 并返回当前 `value` 参数。用法详见：[#自定义文本](#demo-setText) + +
    choose + +选择评分后的回调函数。并返回当前 `value` 参数 + +``` +rate.render({ + elem: '#id', + choose: function(value){ + console.log(value); // 获得选中的评分值 + } +}); +``` + +
    \ No newline at end of file diff --git a/docs/rate/index.md b/docs/rate/index.md new file mode 100644 index 00000000..efd24caf --- /dev/null +++ b/docs/rate/index.md @@ -0,0 +1,56 @@ +--- +title: 评分组件 rate +toc: true +--- + +# 评分组件 + +> 评分组件 `rate` 一般用于等级展示或评价类操作。 + +

    示例

    + +
    +{{- d.include("docs/rate/detail/demo.md") }} +
    + +

    + +

    API

    + +| API | 描述 | +| --- | --- | +| var rate = layui.rate | 获得 `rate` 模块。 | +| [rate.render(options)](#render) | rate 组件渲染，核心方法。 | + +

    渲染

    + +`rate.render(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) +
    注 2.8+ : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。 + +``` +
    +
    +
    + + +``` + +

    属性

    + +
    +{{- d.include("docs/rate/detail/options.md") }} +
    \ No newline at end of file diff --git a/docs/slider/detail/demo.md b/docs/slider/detail/demo.md new file mode 100644 index 00000000..7d4343e5 --- /dev/null +++ b/docs/slider/detail/demo.md @@ -0,0 +1,259 @@ +
    +  
+
    + +

    定义初始值

    + +
    +  
+
    + +

    设置最大和最小值

    + +
    +  
+
    + +

    设置步长

    + +
    +  
+
    + +

    设置提示文本

    + +
    +  
+
    + +

    开启输入框

    + +
    +  
+
    + +

    开启范围选择

    + +
    +  
+
    + +

    垂直滑块

    + +
    +  
+
    + +

    自定义主题色

    + +
    +  
+
    + +

    禁用滑块

    + +
    +  
+
    \ No newline at end of file diff --git a/docs/slider/detail/options.md b/docs/slider/detail/options.md new file mode 100644 index 00000000..a4fc7bdc --- /dev/null +++ b/docs/slider/detail/options.md @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    属性名描述类型默认值
    elem + +绑定元素选择器或 DOM 对象 + +string/DOM-
    type + +滑块类型，可选值有： + +- `default` 水平滑块（默认） +- `vertical`垂直滑块 + +string + +`default` + +
    value + +滑块初始值。 + +- 默认可直接设置数值，如： `value: 50` +- 若滑块开启 `range: true` 区间选择，则值为数组，异表示开始和结尾的区间，如： `value: [30, 60]` + +number
    array    		-
    range + +是否开启滑块的区间选择。若开启，则滑块将出现两个可拖拽的点。 + +boolean + +`false` + +
    min + +滑块的最小值 + +number + +`0` + +
    max + +滑块的最大值 + +number + +`100` + +
    step + +滑块单次拖动的步长 + +number + +`1` + +
    showstep + +是否显示间断点 + +boolean + +`false` + +
    tips + +鼠标移入当前圆点，是否显示当前值 + +boolean + +`true` + +
    input + +是否显示滑块的数字输入框。 注：若设置 `range: true` 则该属性强制无效。 + +boolean + +`false` + +
    height + +滑动条高度。 必须设置 `type: 'vertical'` 属性，即垂直滑块时有效。 + +number + +`200` + +
    theme + +滑块的主题色。 + +string-
    disabled + +是否禁用滑块 + +boolean + +`false` + +
    setTips + +滑块拖拽时设置提示文本的回调函数。并返回当前的 `value` 参数。用法详见：[#设置提示文本](#demo-setTips) + +
    + + +
    + +[回调函数](#options.callback) + +
    + +
    change + +滑块数值发生改变的回调函数。并返回当前的 `value` 参数。 + +``` +slider.render({ + elem: '#id', + change: function(value){ + console.log(value) // 滑块当前值 + // do something + } +}); +``` + +一般可在该回调中将 `value` 同步给表单隐藏域，或者进行一些其它操作。 + +
    done 2.8+ + +滑块拖拽完毕的回调函数。并返回当前的 `value` 参数。滑块拖动过程中不会触发。 + +``` +slider.render({ + elem: '#id', + done: function(value){ + console.log(value) // 滑块当前值 + // do something + } +}); +``` + +若需将 `value` 异步发送给后端，一般采用 `done` 回调，而非 `change` 回调。 + +
    \ No newline at end of file diff --git a/docs/slider/index.md b/docs/slider/index.md new file mode 100644 index 00000000..3582ebad --- /dev/null +++ b/docs/slider/index.md @@ -0,0 +1,92 @@ +--- +title: 滑块组件 slider +toc: true +--- + +# 滑块组件 + +> 滑块组件 `slider` 是一个拖拽选值的交互性组件，常与 `form` 元素结合使用。 + +

    示例

    + + +
    +{{- d.include("docs/slider/detail/demo.md") }} +
    + +

    API

    + +| API | 描述 | +| --- | --- | +| var slider = layui.slider | 获得 `slider` 模块。 | +| [var inst = slider.render(options)](#render) | slider 组件渲染，核心方法。 | +| [inst.setValue(value)](#setValue) | 设置滑块值 | +| inst.config | 获得当前实例的属性配置项 | + +

    渲染

    + +`slider.render(options);` + +- 参数 `options` : 基础属性配置项。[#详见属性](#options) +
    注 2.8+ : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。 + +``` +
    +
    +
    + + +``` + + +该方法返回一个实例对象，包含操作当前实例的相关方法成员。 + +``` +var inst = slider.render(options); +console.log(inst); // 得到当前实例对象 +``` + +

    设置滑块值

    + +`inst.setValue(value, index)` + +- 参数 `value` : 要设置的滑块数值 +- 参数 `index` : 滑块所在的区间开始值或结尾值的索引，开始值：`0` ; 结尾值：`1` + +``` +var slider = layui.slider; + +// 渲染 +var inst = slider.render({ + elem: '#id' + // … +}); + +// 设置滑块值 +inst.setValue(20); + +// 若滑块开启了范围，即： `range: true` +ins1.setValue(20, 0) // 设置开始值 +ins1.setValue(60, 1) // 设置结尾值 +``` + +

    属性

    + +
    +{{- d.include("docs/slider/detail/options.md") }} +
    \ No newline at end of file diff --git a/docs/tab/detail/demo.md b/docs/tab/detail/demo.md new file mode 100644 index 00000000..bbcde2ae --- /dev/null +++ b/docs/tab/detail/demo.md @@ -0,0 +1,95 @@ +
    +  
+
    + +

    hash 状态匹配

    + +切换 tab 标签项后，地址栏同步 `hash` 值，当页面刷新时，tab 仍保持对应的切换状态。 + +
    +  
+
    \ No newline at end of file diff --git a/docs/tab/index.md b/docs/tab/index.md new file mode 100644 index 00000000..e8332ac4 --- /dev/null +++ b/docs/tab/index.md @@ -0,0 +1,304 @@ +--- +title: 选项卡组件 tab +toc: true +--- + +# 选项卡组件 + +> 选项卡组件 `tab` 是指可进行标签页切换的一段容器，常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因，在 2.x 版本中，`tab` 组件属于 `element` 模块的子集。 + + +

    示例

    + +
    +{{- d.include("docs/tab/detail/demo.md") }} +
    + +

    风格

    + +tab 组件提供了三种 UI 风格，分别为： + +| 风格 | className | +| --- | --- | +| [默认风格](#default) | `class="layui-tab"` | +| [简约风格](#brief) | `class="layui-tab layui-tab-brief"` | +| [卡片风格](#card) | `class="layui-tab layui-tab-card"` | + +

    默认风格

    + +
    +  
+
    + +

    简约风格

    + +
    +  
+
    + +

    卡片风格

    + +
    +  
+
    + + +

    API

    + +| API | 描述 | +| --- | --- | +| var element = layui.element | 获得 `element` 模块。 | +| [element.render(\'tab\', filter)](#element.render) | 渲染 tab 组件 | +| [element.tabAdd(filter, options)](#element.tabAdd) | 添加 tab 选项 | +| [element.tabDelete(filter, layid)](#element.tabDelete) | 删除 tab 选项 | +| [element.tabChange(filter, layid)](#element.tabChange) | 切换 tab 选项 | +| [element.tab(options)](#element.tab) | 绑定自定义 tab 元素 | + +

    元素属性

    + +| 属性 | 描述 | +| --- | --- | +| lay-allowclose | 是否开启删除图标。设置在 tab 容器 `