发布 v2.9.0-beta.1
This commit is contained in:
贤心
GitHub
commit
0968676e1f
4
.gitignore
vendored
4
.gitignore
vendored
@ -15,11 +15,11 @@ Thumbs.db
|
||||
.nojekyll
|
||||
.project
|
||||
.settings/
|
||||
.npmignore
|
||||
node_modules/
|
||||
_site/
|
||||
.git/
|
||||
package-lock.json
|
||||
|
||||
# Published folders
|
||||
release/
|
||||
v/
|
||||
package-lock.json
|
||||
10
README.md
10
README.md
@ -15,11 +15,11 @@
|
||||
<a href="https://www.npmjs.com/package/layui">
|
||||
<img src="https://img.shields.io/github/license/layui/layui" alt="License">
|
||||
</a>
|
||||
<a href="https://github.com/layui/layui/blob/master/dist/css/layui.css">
|
||||
<img src="https://img.badgesize.io/layui/layui/master/dist/css/layui.css?compression=brotli&label=CSS%20Brotli%20size" alt="CSS Brotli size">
|
||||
<a href="https://github.com/layui/layui/blob/2.x/dist/css/layui.css">
|
||||
<img src="https://img.badgesize.io/layui/layui/2.x/dist/css/layui.css?compression=brotli&label=CSS%20Brotli%20size" alt="CSS Brotli size">
|
||||
</a>
|
||||
<a href="https://github.com/layui/layui/blob/master/dist/layui.js">
|
||||
<img src="https://img.badgesize.io/layui/layui/master/dist/layui.js?compression=brotli&label=JS%20Brotli%20size" alt="JS Brotli size">
|
||||
<a href="https://github.com/layui/layui/blob/2.x/dist/layui.js">
|
||||
<img src="https://img.badgesize.io/layui/layui/2.x/dist/layui.js?compression=brotli&label=JS%20Brotli%20size" alt="JS Brotli size">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -57,7 +57,7 @@ Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化
|
||||
|
||||
## 使用文档
|
||||
|
||||
[**最新文档**](https://layui.dev)
|
||||
[**当前版本文档**](https://layui.dev/docs/2/)
|
||||
|
||||
## 项目参与
|
||||
|
||||
|
||||
2
dist/layui.js
vendored
2
dist/layui.js
vendored
File diff suppressed because one or more lines are too long
2
dist/layui.js.map
vendored
2
dist/layui.js.map
vendored
File diff suppressed because one or more lines are too long
@ -2,7 +2,7 @@
|
||||
|
||||
## 文档预览
|
||||
|
||||
- [最新文档](https://layui.dev)
|
||||
- [当前版本文档](https://layui.dev/docs/2/)
|
||||
- [2.7 文档](https://layui.dev/2.7/)
|
||||
|
||||
## 目录规范
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 模板引擎 laytpl
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
||||
# 模板引擎
|
||||
|
||||
> `laytpl` 是 Layui 的一款轻量 JavaScript 模板引擎，在字符解析上有着比较出色的表现。
|
||||
@ -37,14 +37,14 @@ toc: true
|
||||
```
|
||||
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: '张三'
|
||||
@ -60,9 +60,9 @@ layui.use('laytpl', function(){
|
||||
<h3>{{= d.name }}</h3>
|
||||
<p>性别：{{= d.sex ? '男' : '女' }}</p>
|
||||
</script>
|
||||
|
||||
|
||||
<div id="view"></div>
|
||||
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
@ -98,6 +98,8 @@ compile.render(data, callback); // 模板渲染
|
||||
{{- d.include("/laytpl/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
> ### 注意
|
||||
> 开发者在使用模板语法时，需确保模板中的 JS 语句不来自于页面用户输入，即必须在页面开发者自身的可控范围内，否则请避免使用该模板引擎。
|
||||
|
||||
<h2 id="config" lay-toc="{level: 2}">属性配置</h2>
|
||||
|
||||
@ -119,7 +121,7 @@ laytpl.config({
|
||||
open: '<%',
|
||||
close: '%>'
|
||||
});
|
||||
|
||||
|
||||
// 模板语法将默认采用上述定义的标签符书写
|
||||
laytpl(`
|
||||
<%# var job = ["前端工程师"]; %>
|
||||
@ -129,7 +131,7 @@ laytpl(`
|
||||
type: 0
|
||||
}, function(string){
|
||||
console.log(string); // 张三是一名前端工程师。
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### 局部配置 <sup>2.8+</sup>
|
||||
@ -142,7 +144,7 @@ laytpl('<%= d.name %>是一名前端工程师', {
|
||||
close: '%>'
|
||||
}).render({name: '张三'}, function(string){
|
||||
console.log(string); // 张三是一名前端工程师。
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
@ -36,12 +36,12 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
|
||||
[cols](#options.cols)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
|
||||
表头属性集，通过二维数组定义多级表头。方法渲染时必填。 更多表头属性见 : [#表头属性](#options.cols)
|
||||
|
||||
</td>
|
||||
@ -65,7 +65,7 @@
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>
|
||||
|
||||
|
||||
设定实例唯一索引，以便用于其他方法对 table 实例进行相关操作。若该属性未设置，则默认从 `elem` 属性绑定的原始 table 元素中的 `id` 属性值中获取。
|
||||
|
||||
</td>
|
||||
@ -109,7 +109,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
|
||||
[height](#options.height)
|
||||
|
||||
</td>
|
||||
@ -120,8 +120,8 @@
|
||||
</div>
|
||||
|
||||
- `height: 315` 设置固定高度
|
||||
- `height: 'full-30'` 设置自适应高度。这是一个特定的语法格式：`full` 表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部*加*表格底部距离页面最底部的“距离和”
|
||||
- `height: '#id-30'` 设置相对父元素的高度自适应，其中 `#id` 即父元素的 ID 选择器，其计算原理和上述 `full` 相同。
|
||||
- `height: 'full-30'` 设置相对可视屏幕的高度铺满。这是一个特定的语法格式：`full` 表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部*加*表格底部距离页面最底部的“距离和”
|
||||
- `height: '#id-30'` 设置相对父元素的高度铺满，其中 `#id` 即父元素的 ID 选择器，其计算原理和上述 `full` 相同。
|
||||
|
||||
</td>
|
||||
<td>number<br>string</td>
|
||||
@ -359,7 +359,7 @@
|
||||
<td>initSort</td>
|
||||
<td>
|
||||
|
||||
初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个 `object` 类型的值，包含属性有：
|
||||
初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个 `object` 类型的值，包含属性有：
|
||||
- `field` 排序字段。对应 `cols` 设定的各字段名
|
||||
- `type` 排序方式。可选值 : `'asc','desc',null`，即：`升序、降序、默认`
|
||||
|
||||
@ -383,7 +383,7 @@ initSort: {
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
|
||||
`grid`
|
||||
|
||||
</td>
|
||||
@ -411,7 +411,7 @@ initSort: {
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
|
||||
@ -70,15 +70,16 @@ layui.use(function(){
|
||||
var options = this;
|
||||
|
||||
// 获取当前行数据
|
||||
table.getRowData = function(elem){
|
||||
table.getRowData = function(tableId, elem){
|
||||
var index = $(elem).closest('tr').data('index');
|
||||
return table.cache[options.id][index] || {};
|
||||
return table.cache[tableId][index] || {};
|
||||
};
|
||||
|
||||
// 原生 select 事件
|
||||
$('.select-demo-primary').on('change', function(){
|
||||
var tableViewElem = this.elem.next();
|
||||
tableViewElem.off('change').on('change', '.select-demo-primary', function(){
|
||||
var value = this.value; // 获取选中项 value
|
||||
var data = table.getRowData(this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
var data = table.getRowData(options.id, this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
|
||||
// 更新数据中对应的字段
|
||||
data.city = value;
|
||||
@ -92,7 +93,7 @@ layui.use(function(){
|
||||
console.log(obj); // 获取选中项数据
|
||||
|
||||
// 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
var data = table.getRowData(obj.elem);
|
||||
var data = table.getRowData(options.id, obj.elem);
|
||||
|
||||
// 更新数据中对应的字段
|
||||
data.city = value;
|
||||
@ -115,7 +116,7 @@ layui.use(function(){
|
||||
id: 102
|
||||
}],
|
||||
click: function(obj){
|
||||
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
|
||||
this.elem.find('span').html(obj.title);
|
||||
|
||||
@ -131,7 +132,7 @@ layui.use(function(){
|
||||
laydate.render({
|
||||
elem: '.laydate-demo',
|
||||
done: function(value, date, endDate){
|
||||
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
|
||||
// 更新数据中对应的字段
|
||||
data.date = value;
|
||||
@ -145,7 +146,7 @@ layui.use(function(){
|
||||
colorpicker.render({
|
||||
elem: '.colorpicker-demo',
|
||||
done: function(value){
|
||||
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
|
||||
// 更新数据中对应的字段
|
||||
data.color = value;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 工具模块 util
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
||||
# 工具模块
|
||||
|
||||
> 工具模块 `util` 是由工具类方法和小组件组成的集合。
|
||||
@ -115,7 +115,7 @@ var result2 = util.toDateString(new Date('2023-01-01 11:35:25'), 'ss[s]'); // 25
|
||||
|
||||
// 自定义 meridiem
|
||||
var result3 = util.toDateString(
|
||||
'2023-01-01 11:35:25',
|
||||
'2023-01-01 11:35:25',
|
||||
'hh:mm:ss A',
|
||||
{
|
||||
customMeridiem: function(hours, minutes){
|
||||
@ -127,7 +127,7 @@ var result3 = util.toDateString(
|
||||
); // 11:35:25 AM
|
||||
```
|
||||
|
||||
参数 `format` 所有可用的格式列表 :
|
||||
参数 `format` 所有可用的格式列表 :
|
||||
|
||||
| 格式 | 示例 | 描述 |
|
||||
| --- | --- | --- |
|
||||
@ -177,7 +177,7 @@ var str2 = util.unescape('<div>123</div>'); // 返回： <div>123</d
|
||||
|
||||
<h3 id="openWin" class="ws-anchor ws-bold">打开浏览器新标签页 <sup>2.8+</sup></h3>
|
||||
|
||||
`util.openWin(options);`
|
||||
`util.openWin(options);`
|
||||
|
||||
- 参数 `options` : 属性配置项。可选项详见下表
|
||||
|
||||
@ -204,38 +204,54 @@ util.openWin({
|
||||
|
||||
<h3 id="on" class="ws-anchor ws-bold">批量事件处理</h3>
|
||||
|
||||
`util.on(attr, obj, eventType);`
|
||||
`util.on(attr, events, options);`
|
||||
|
||||
- 参数 `attr` : 触发事件的元素属性名
|
||||
- 参数 `obj` : 事件回调函数集合
|
||||
- 参数 `eventType` : 事件类型。默认 `click`
|
||||
| 参数 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| attr | 触发事件的元素属性名。可省略<sup>2.9+</sup> | `string` | `lay-on` |
|
||||
| events | 事件集合。包含 `attr` 对应的属性值和事件回调函数的键值对 | `object` | - |
|
||||
| options <sup>2.9+</sup> | 参数的更多选项。详见下表。 | `object` | - |
|
||||
|
||||
参数 `options` 可选项:
|
||||
|
||||
| options | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| elem | 触发事件的委托元素 | string \| HTMLElement \| jQuery | - |
|
||||
| trigger | 事件触发的方式 | string | `click` |
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['code', 'preview'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn" lay-on="e1">事件 1</button>
|
||||
<button class="layui-btn" lay-on="e2">事件 2</button>
|
||||
<button class="layui-btn" lay-on="e3">事件 3</button>
|
||||
<button class="layui-btn" lay-active="e3">事件 3</button>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use('util', function(){
|
||||
var util = layui.util;
|
||||
|
||||
// 处理属性 为 lay-on 的所有元素事件
|
||||
util.on('lay-on', {
|
||||
|
||||
// 2.9+ 版本可省略 attr 参数，默认读取 lay-on
|
||||
util.on({
|
||||
e1: function(){
|
||||
console.log(this); // 当前触发事件的 DOM 对象
|
||||
console.log(this); // 当前触发事件的 DOM 元素
|
||||
layer.msg('触发了事件 1');
|
||||
},
|
||||
e2: function(){
|
||||
layer.msg('触发了事件 2');
|
||||
},
|
||||
e3: function(){
|
||||
layer.msg('触发了事件 3');
|
||||
}
|
||||
});
|
||||
|
||||
// 自定义：触发事件的元素属性名、触发事件的方式
|
||||
util.on('lay-active', {
|
||||
e3: layui.throttle(function(othis) {
|
||||
console.log(this);
|
||||
layer.tips(othis.html(), this);
|
||||
}, 3000) // 3s 内不重复执行
|
||||
}, {
|
||||
trigger: 'mouseenter' // 鼠标移入时触发事件
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
|
||||
@ -2,15 +2,37 @@
|
||||
title: 更新日志
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
||||
# 更新日志
|
||||
|
||||
<h2 class="layui-hide" lay-toc="{href: '/docs/2/versions.html', title: '2.8.x', hot: true}">
|
||||
2.8.x
|
||||
> 导读：📑 [Layui 2.8+ 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
|
||||
|
||||
<h2 id="2.9.x" lay-toc="{title: '2.9.x'}"></h2>
|
||||
|
||||
<h2 id="2.9.0" class="ws-anchor">
|
||||
2.9.0-beta.1
|
||||
<span class="layui-badge-rim">预览版</span>
|
||||
<span class="layui-badge-rim">2023-11-20</span>
|
||||
</h2>
|
||||
|
||||
> 导读：📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
|
||||
`2.9.x` 对 `2.8.18` 向下兼容，可覆盖升级。
|
||||
|
||||
- #### table
|
||||
- 修复 `complete` 属性导致 `$.ajaxSetup()` 的 `complete` 失效的问题 [#1423](https://github.com/layui/layui/pull/1423)
|
||||
- 修复 单元格展开再收缩后，当列通过拖拽改变过宽度，列存在概率性错位的问题 [#28347fc](https://github.com/layui/layui/commit/28347fcf8f97912d6c90d81931f9ed5527dc3627)
|
||||
- 修复 合计行单元格展开异常的问题 [#I8FH3K](https://gitee.com/layui/layui/issues/I8FH3K)
|
||||
- 优化 `height` 属性高度铺满语法中不支持浮点型数值的问题 [#I8DSPH](https://gitee.com/layui/layui/issues/I8DSPH)
|
||||
- 优化 关闭单元格多行展开状态后，悬停状态样式未移除的问题 [#1425](https://github.com/layui/layui/pull/1425)
|
||||
- #### util
|
||||
- 优化 `util.on()` 方法，提升参数的灵活性和代码的可读性 [#d74abb4](https://github.com/layui/layui/commit/d74abb453cb45ea5d2eb69f0ed7250caf0ab0088)
|
||||
- #### 其他
|
||||
- 优化 `lay.clipboard.writeText()` 逻辑，以适配无写入权限时的场景 [#1421](https://github.com/layui/layui/pull/1421)
|
||||
|
||||
### 下载： [layui-v2.9.0-beta.1.zip](https://gitee.com/layui/layui/attach_files/1587087/download)
|
||||
|
||||
---
|
||||
|
||||
<h2 id="2.8.x" lay-toc="{title: '2.8.x'}"></h2>
|
||||
|
||||
<h2 id="2.8.18" class="ws-anchor">
|
||||
2.8.18
|
||||
@ -222,7 +244,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.11" class="ws-anchor">
|
||||
2.8.11
|
||||
2.8.11
|
||||
<span class="layui-badge-rim">2023-07-13</span>
|
||||
</h2>
|
||||
|
||||
@ -243,7 +265,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.10" class="ws-anchor">
|
||||
2.8.10
|
||||
2.8.10
|
||||
<span class="layui-badge-rim">2023-07-03</span>
|
||||
</h2>
|
||||
|
||||
@ -254,7 +276,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.9" class="ws-anchor">
|
||||
2.8.9
|
||||
2.8.9
|
||||
<span class="layui-badge-rim">2023-07-03</span>
|
||||
</h2>
|
||||
|
||||
@ -277,7 +299,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.8" class="ws-anchor">
|
||||
2.8.8
|
||||
2.8.8
|
||||
<span class="layui-badge-rim">2023-06-20</span>
|
||||
</h2>
|
||||
|
||||
@ -297,7 +319,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.7" class="ws-anchor">
|
||||
2.8.7
|
||||
2.8.7
|
||||
<span class="layui-badge-rim">2023-06-16</span>
|
||||
</h2>
|
||||
|
||||
@ -323,7 +345,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.6" class="ws-anchor">
|
||||
2.8.6
|
||||
2.8.6
|
||||
<span class="layui-badge-rim">2023-06-08</span>
|
||||
</h2>
|
||||
|
||||
@ -354,7 +376,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.4" class="ws-anchor">
|
||||
2.8.4
|
||||
2.8.4
|
||||
<span class="layui-badge-rim">2023-05-30</span>
|
||||
</h2>
|
||||
|
||||
@ -373,7 +395,7 @@ toc: true
|
||||
- 优化 `row` 事件机制，若目标元素为 `checkbox,radio`，则不触发 `row` 事件
|
||||
- 优化 外层容器的高度，不再设置一个固定值，内部元素将根据 `height` 属性值自动撑满
|
||||
- 优化 底部边框问题
|
||||
- #### treeTable
|
||||
- #### treeTable
|
||||
- 新增 节点折叠状态记忆功能 # 1260/I777CJ
|
||||
- 新增 `customName.icon` 属性，用于自定义图标的属性名称 # 1260/I73BQU
|
||||
- 新增 `async.format` 回调函数，用于处理异步子节点数据，优先级高于 `async.url` # 1260
|
||||
@ -402,7 +424,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.3" class="ws-anchor">
|
||||
2.8.3
|
||||
2.8.3
|
||||
<span class="layui-badge-rim">2023-05-15</span>
|
||||
</h2>
|
||||
|
||||
@ -411,7 +433,7 @@ toc: true
|
||||
- #### form
|
||||
- 新增 `checkbox` 的标题模板支持，可在下一个兄弟元素中加上 `lay-checkbox` 绑定 # I72HSK/I6YDGT
|
||||
- 修复 `radio` 经浏览器翻译成别的语言后出现的显示异常问题 # I6ZA12
|
||||
- 优化 `checkbox` 的边距细节
|
||||
- 优化 `checkbox` 的边距细节
|
||||
- 优化 `checkbox` 标签风格的边框瑕疵 # I70OFE
|
||||
- **调整** 内置校验规则，仅当非空时进行校验，避免强制携带必填(`required`)的校验规则 # I72CTI
|
||||
- #### table
|
||||
@ -438,7 +460,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.2" class="ws-anchor">
|
||||
2.8.2
|
||||
2.8.2
|
||||
<span class="layui-badge-rim">2023-05-04</span>
|
||||
</h2>
|
||||
|
||||
@ -478,7 +500,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.1" class="ws-anchor">
|
||||
2.8.1
|
||||
2.8.1
|
||||
<span class="layui-badge-rim">2023-04-25</span>
|
||||
</h2>
|
||||
|
||||
@ -493,7 +515,7 @@ toc: true
|
||||
---
|
||||
|
||||
<h2 id="2.8.0" class="ws-anchor">
|
||||
2.8.0
|
||||
2.8.0
|
||||
<span class="layui-badge-rim">2023-04-24</span>
|
||||
</h2>
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
layui.use(['lay', 'util'], function(){
|
||||
var lay = layui.lay
|
||||
,util = layui.util;
|
||||
|
||||
|
||||
//事件
|
||||
var style = 'color: orange; font-size: 16px;';
|
||||
util.event('lay-on', {
|
||||
@ -78,11 +78,11 @@ layui.use(['lay', 'util'], function(){
|
||||
], 'a')
|
||||
);
|
||||
console.log(
|
||||
'数组成员全为数字',
|
||||
'数组成员全为数字',
|
||||
layui.sort([1, 20.5, 19.5, 52, 4.5])
|
||||
);
|
||||
console.log(
|
||||
'数组成员为混合型',
|
||||
'数组成员为混合型',
|
||||
layui.sort([1, {a: 32}, 20.5, {a: 6}, 52, 5.5], 'a') //按成员对象的 key 为 a 进行比较
|
||||
);
|
||||
}
|
||||
@ -90,8 +90,8 @@ layui.use(['lay', 'util'], function(){
|
||||
,type: function(){
|
||||
console.log('%c> layui.type: ', style);
|
||||
console.log(
|
||||
'new RegExp()：', layui.type(new RegExp()),
|
||||
'\nnew Date()：', layui.type(new Date()),
|
||||
'new RegExp()：', layui.type(new RegExp()),
|
||||
'\nnew Date()：', layui.type(new Date()),
|
||||
'\n[]：', layui.type([])
|
||||
);
|
||||
}
|
||||
@ -99,8 +99,8 @@ layui.use(['lay', 'util'], function(){
|
||||
,isArray: function(){
|
||||
console.log('%c> layui.isArray: ', style);
|
||||
console.log(
|
||||
'[1,6]：', layui.isArray([1,6]),
|
||||
'\nlay("div")：', layui.isArray(lay('div')),
|
||||
'[1,6]：', layui.isArray([1,6]),
|
||||
'\nlay("div")：', layui.isArray(lay('div')),
|
||||
'\ndocument.querySelectorAll("div")：', layui.isArray(document.querySelectorAll('div')),
|
||||
'\n{"key": "value"}：', layui.isArray({key: 'value'})
|
||||
);
|
||||
@ -110,9 +110,9 @@ layui.use(['lay', 'util'], function(){
|
||||
console.log('%c> lay.extend: ', style);
|
||||
console.log(
|
||||
lay.extend(
|
||||
{},
|
||||
{a: 123, c: {ccc: 'ccc'}, arr: [1,3]},
|
||||
{a: 111, b: 1, c: {bbb: 'bbb'}},
|
||||
{},
|
||||
{a: 123, c: {ccc: 'ccc'}, arr: [1,3]},
|
||||
{a: 111, b: 1, c: {bbb: 'bbb'}},
|
||||
{a: 222222, arr: [5]}
|
||||
)
|
||||
);
|
||||
@ -121,7 +121,7 @@ layui.use(['lay', 'util'], function(){
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -18,17 +18,17 @@
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary" id="demo2">
|
||||
|
||||
|
||||
按钮下拉
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-text">
|
||||
<a href="javascript:;" id="demo3">文字下拉 <i class="layui-icon layui-icon-down"></i></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-bg-gray" style="margin-top: 30px; width: 100%; height: 300px; text-align: center;" id="demo20">
|
||||
<span class="layui-font-gray" style="position: relative; top:50%;">鼠标右键菜单</span>
|
||||
</div>
|
||||
@ -153,9 +153,9 @@ layui.use('dropdown', function(){
|
||||
,id: ''
|
||||
}]
|
||||
}]
|
||||
|
||||
|
||||
,id: 'demo1'
|
||||
|
||||
|
||||
// 触发点击事件的元素范围 --- default: 仅子菜单触发点击事件（默认，可不填）; all: 所有父子菜单均触发点击事件
|
||||
,clickScope: 'all'
|
||||
|
||||
@ -164,7 +164,7 @@ layui.use('dropdown', function(){
|
||||
console.log(obj);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var inst = dropdown.render({
|
||||
elem: '#demo2'
|
||||
// ,show: true
|
||||
@ -191,7 +191,7 @@ layui.use('dropdown', function(){
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
dropdown.render({
|
||||
elem: '#demo3'
|
||||
,content: '自定义内容 123 '
|
||||
@ -199,8 +199,8 @@ layui.use('dropdown', function(){
|
||||
,align: 'center'
|
||||
,trigger: 'hover'
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//右键
|
||||
dropdown.render({
|
||||
elem: document//'#demo20' //也可绑定到 document，从而重置整个右键
|
||||
@ -245,12 +245,12 @@ layui.use('dropdown', function(){
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return;
|
||||
|
||||
|
||||
dropdown.render({
|
||||
elem: document
|
||||
,content: '123'
|
||||
|
||||
@ -135,7 +135,7 @@ body{padding:20px;}
|
||||
<p>Layui - 原生态模块化前端 UI 组件库</p>
|
||||
<p>Layui - 原生态模块化前端 UI 组件库</p>
|
||||
</blockquote>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
||||
Layui - 原生态模块化前端 UI 组件库
|
||||
Layui - 原生态模块化前端 UI 组件库
|
||||
Layui - 原生态模块化前端 UI 组件库
|
||||
@ -152,25 +152,25 @@ body{padding:20px;}
|
||||
|
||||
默认分割线
|
||||
<hr>
|
||||
|
||||
|
||||
赤色分割线
|
||||
<hr class="layui-border-red">
|
||||
|
||||
|
||||
橙色分割线
|
||||
<hr class="layui-border-orange">
|
||||
|
||||
|
||||
墨绿分割线
|
||||
<hr class="layui-border-green">
|
||||
|
||||
|
||||
青色分割线
|
||||
<hr class="layui-border-cyan">
|
||||
|
||||
|
||||
蓝色分割线
|
||||
<hr class="layui-border-blue">
|
||||
|
||||
|
||||
黑色分割线
|
||||
<hr class="layui-border-black">
|
||||
|
||||
|
||||
灰色分割线
|
||||
<hr class="layui-border-gray">
|
||||
|
||||
@ -182,7 +182,7 @@ body{padding:20px;}
|
||||
|
||||
layui.use(['element', 'form'], function(){
|
||||
var element = layui.element;
|
||||
|
||||
|
||||
element.on('collapse(test)', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
@ -61,7 +61,7 @@ layui.use('flow', function(){
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
flow.load({
|
||||
elem: '#test2' //流加载容器
|
||||
//,scrollElem: '.flow-default' //滚动条所在元素，默认document
|
||||
@ -78,13 +78,13 @@ layui.use('flow', function(){
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//按屏加载图片
|
||||
flow.lazyimg({
|
||||
elem: '.demo img'
|
||||
,scrollElem: '.demo'
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -62,9 +62,9 @@ var runTest = function(run, $, layer){
|
||||
var timer = setInterval(function(){
|
||||
//location.reload();
|
||||
}, 1000);
|
||||
|
||||
|
||||
layer.alert(123);
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: './all.html'
|
||||
,beforeSend: function(){
|
||||
@ -91,12 +91,12 @@ layui.use(['layer', 'util'], function(layer, util){
|
||||
var $ = layui.jquery;
|
||||
var util = layui.util;
|
||||
//return
|
||||
|
||||
|
||||
var index = layer.msg('Hello World');
|
||||
//layer.close(index);
|
||||
//runTest(1, $, layer);
|
||||
|
||||
|
||||
|
||||
|
||||
// 触发事件
|
||||
util.on('lay-on', {
|
||||
test: function(){
|
||||
@ -136,8 +136,8 @@ layui.use(['layer', 'util'], function(layer, util){
|
||||
layer.open({
|
||||
title:'自定义页面层',
|
||||
type: 1,
|
||||
skin: 'layui-layer-border',
|
||||
area: ['1000px', '580px'],
|
||||
skin: 'layui-layer-border',
|
||||
area: ['1000px', '580px'],
|
||||
content: $('#test11111'),
|
||||
maxmin: true,
|
||||
shade: false,
|
||||
@ -179,13 +179,13 @@ layui.use(['layer', 'util'], function(layer, util){
|
||||
layer.tab({
|
||||
area: ['600px', '300px'],
|
||||
tab: [{
|
||||
title: 'TAB1',
|
||||
title: 'TAB1',
|
||||
content: '内容1'
|
||||
}, {
|
||||
title: 'TAB2',
|
||||
title: 'TAB2',
|
||||
content: '内容2'
|
||||
}, {
|
||||
title: 'TAB3',
|
||||
title: 'TAB3',
|
||||
content: '内容3'
|
||||
}]
|
||||
});
|
||||
@ -230,17 +230,17 @@ layui.use(['layer', 'util'], function(layer, util){
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 相册层
|
||||
layer.photos({
|
||||
photos: '#photos', // $('#photos')
|
||||
// toolbar: false,
|
||||
// footer: false
|
||||
});
|
||||
|
||||
|
||||
//动态追加
|
||||
$('#photos').append('<li class="list"><img src="https://unpkg.com/outeres/demo/3.jpg"></li>');
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -28,13 +28,13 @@
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" id="reloadTest">
|
||||
重载测试
|
||||
重载测试
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row"> 多行 </button>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row"> 单行 </button>
|
||||
<button class="layui-btn layui-btn-sm" id="moreTest">
|
||||
更多测试
|
||||
更多测试
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -117,7 +117,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
// url: 'list',
|
||||
// height: 300
|
||||
});
|
||||
|
||||
|
||||
// 渲染
|
||||
window.ins1 = table.render({
|
||||
elem: '#test',
|
||||
@ -127,7 +127,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
url: 'json/table/demo1.json',
|
||||
// method: 'post',
|
||||
|
||||
|
||||
|
||||
// lineStyle: 'height: 95px;', // 行样式
|
||||
css: [ // 自定义样式
|
||||
'.layui-table-page{text-align: right;}',
|
||||
@ -182,13 +182,13 @@ layui.use(['table', 'dropdown'], function(){
|
||||
{field:'joinTime', title:'加入时间', width: 120},
|
||||
{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 180}
|
||||
]],
|
||||
|
||||
|
||||
// autoSort: false // 禁用前端自动排序，由服务的完成排序
|
||||
initSort111: { // 初始排序状态
|
||||
field: 'experience', // 排序字段，对应 cols 设定的各字段名
|
||||
type: 'desc' // 排序方式 asc: 升序、desc: 降序、null: 默认排序
|
||||
},
|
||||
|
||||
|
||||
headers: {headers_token: 'sasasas'},
|
||||
where: {
|
||||
test: '初始 test 参数',
|
||||
@ -296,7 +296,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
{field:'joinTime', title:'加入时间', width:120}
|
||||
]]
|
||||
*/
|
||||
|
||||
|
||||
});
|
||||
break;
|
||||
case 'reload-deep':
|
||||
@ -405,7 +405,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
console.log(res, msg)
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 排序事件
|
||||
table.on('sort(test)', function(obj){
|
||||
// console.log(obj);
|
||||
@ -423,7 +423,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// 头部工具栏事件
|
||||
table.on('toolbar(test)', function(obj){
|
||||
var id = obj.config.id;
|
||||
@ -505,7 +505,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
table.on('radio(test)', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
|
||||
// 行单击事件
|
||||
table.on('row(test)', function(obj){
|
||||
console.log(obj);
|
||||
@ -536,7 +536,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
return obj.reedit(); // 重新编辑 -- v2.8.0 新增
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 编辑后续操作，如提交更新请求，以完成真实的数据更新
|
||||
// …
|
||||
layer.msg('编辑成功', {icon: 1});
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
<th lay-data="{field:'username', width:200}">昵称</th>
|
||||
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
|
||||
<th lay-data="{field:'sign'}">签名</th>
|
||||
</tr>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
@ -177,9 +177,9 @@ layui.use('table', function(){
|
||||
,{title:'操作', align:'center', toolbar: '#barDemo'}
|
||||
]]
|
||||
});
|
||||
|
||||
|
||||
//return;
|
||||
|
||||
|
||||
// 直接赋值数据
|
||||
table.render({
|
||||
elem: '#test-data'
|
||||
@ -293,7 +293,7 @@ layui.use('table', function(){
|
||||
,skin: 'row' //表格风格
|
||||
,even: true
|
||||
//,size: 'lg' //尺寸
|
||||
|
||||
|
||||
,page: true //是否显示分页
|
||||
,limits: [3,5,10]
|
||||
,limit: 3 //每页默认显示的数量
|
||||
@ -314,7 +314,7 @@ layui.use('table', function(){
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
var $ = layui.jquery, active = {
|
||||
parseTable: function(){
|
||||
table.init('parse-table-demo', {
|
||||
|
||||
@ -13,11 +13,10 @@ body{padding: 50px;}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="layui-btn" lay-active="e1">事件1</button>
|
||||
<button class="layui-btn" lay-active="e2">事件2</button>
|
||||
<button class="layui-btn" lay-active="e3">事件3</button>
|
||||
|
||||
<button class="layui-btn" lay-active2="e4">事件4</button>
|
||||
<button class="layui-btn" lay-on="e1">事件1</button>
|
||||
<button class="layui-btn" lay-on="e2">事件2</button>
|
||||
<button class="layui-btn" lay-on="e3">事件3</button>
|
||||
<button class="layui-btn" lay-active="e4">事件4</button>
|
||||
|
||||
<hr>
|
||||
|
||||
@ -43,10 +42,11 @@ body{padding: 50px;}
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['util', 'layer'], function(){
|
||||
layui.use(['lay', 'util', 'layer'], function(){
|
||||
var $ = layui.$;
|
||||
var util = layui.util;
|
||||
var layer = layui.layer;
|
||||
var lay = layui.lay;
|
||||
|
||||
// 固定块
|
||||
util.fixbar({
|
||||
@ -56,7 +56,7 @@ layui.use(['util', 'layer'], function(){
|
||||
}, {
|
||||
type: 'help',
|
||||
icon: 'layui-icon-help'
|
||||
}, {
|
||||
}, {
|
||||
type: 'cart',
|
||||
icon: 'layui-icon-cart',
|
||||
style: 'background-color: #FF5722;'
|
||||
@ -75,7 +75,7 @@ layui.use(['util', 'layer'], function(){
|
||||
on: { // 任意事件 -- v2.8.0 新增
|
||||
mouseenter: function(type){
|
||||
layer.tips(type, this, {
|
||||
tips: 4,
|
||||
tips: 4,
|
||||
fixed: true
|
||||
});
|
||||
},
|
||||
@ -89,46 +89,58 @@ layui.use(['util', 'layer'], function(){
|
||||
// layer.msg(type);
|
||||
}
|
||||
});
|
||||
|
||||
//倒计时
|
||||
var endTime = new Date(2099,1,1).getTime() //假设为结束日期
|
||||
,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
|
||||
|
||||
util.countdown(endTime, serverTime, function(date, serverTime, timer){
|
||||
var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';
|
||||
$('#test').html('距离2099年1月1日还有：'+ str);
|
||||
|
||||
|
||||
// 批量处理事件
|
||||
util.on({
|
||||
e1: function(othis){
|
||||
alert(othis.html())
|
||||
},
|
||||
e2: function(othis){
|
||||
alert(othis.html())
|
||||
}
|
||||
});
|
||||
|
||||
//某个时间在当前时间的多久前
|
||||
|
||||
// 事件集的替换和增加
|
||||
util.on({
|
||||
e1: function(othis){ // 重置事件 e1
|
||||
alert(othis.html() + ' - replace')
|
||||
},
|
||||
e3: function(othis){ // 增加事件 e3
|
||||
alert(othis.html())
|
||||
}
|
||||
});
|
||||
|
||||
// 自定义触发事件的元素属性名、自定义触发事件的方式
|
||||
util.on('lay-active', {
|
||||
e4: layui.throttle(function(othis) {
|
||||
layer.tips(othis.html(), this);
|
||||
}, 3000) // 3s 内不重复执行
|
||||
}, {
|
||||
trigger: 'mouseenter'
|
||||
});
|
||||
|
||||
|
||||
// 倒计时
|
||||
var countdown = util.countdown({
|
||||
date: '2099-12-31 00:00:00', // 目标时间值
|
||||
now: new Date(), // 当前时间，一般为服务器时间，此处以本地时间为例
|
||||
ready: function(){ // 初始操作
|
||||
clearTimeout(util.countdown.timer); // 清除旧定时器，防止多次渲染时重复执行。实际使用时不常用
|
||||
},
|
||||
clock: function(obj, inst){ // 计时中
|
||||
var str = [obj.d,'天',obj.h,'时',obj.m,'分',obj.s,'秒'].join(' ');
|
||||
lay('#test').html(str);
|
||||
util.countdown.timer = inst.timer; // 记录当前定时器，以便在重复渲染时清除。实际使用时不常用
|
||||
},
|
||||
done: function(obj, inst){ // 计时完成
|
||||
layer.msg('Time is up');
|
||||
}
|
||||
});
|
||||
|
||||
// 某个时间在当前时间的多久前
|
||||
var str = util.timeAgo(new Date(2017,7,15,2,58,0));
|
||||
$('#test1').html('示例写于：'+ str);
|
||||
|
||||
//处理属性 为 lay-active 的所有元素事件
|
||||
util.event('lay-active', {
|
||||
e1: function(othis){
|
||||
alert(othis.html())
|
||||
}
|
||||
,e2: function(othis){
|
||||
alert(othis.html())
|
||||
}
|
||||
,e3: function(othis){
|
||||
alert(othis.html())
|
||||
}
|
||||
});
|
||||
|
||||
//测试是否重复绑定
|
||||
util.event('lay-active', {
|
||||
e1: function(othis){
|
||||
alert(othis.html() + '新事件')
|
||||
}
|
||||
});
|
||||
|
||||
//测试绑定新事件
|
||||
util.event('lay-active2', {
|
||||
e4: function(othis){
|
||||
alert(othis.html())
|
||||
}
|
||||
});
|
||||
|
||||
// 转换日期格式
|
||||
var timer = null
|
||||
@ -139,7 +151,7 @@ layui.use(['util', 'layer'], function(){
|
||||
timer = setInterval(() => {
|
||||
toDateString($('#test2').val())
|
||||
}, 50)
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
150
gulpfile.js
150
gulpfile.js
@ -1,45 +1,46 @@
|
||||
const pkg = require('./package.json');
|
||||
const path = require('path');
|
||||
const gulp = require('gulp');
|
||||
const uglify = require('gulp-uglify');
|
||||
const cleanCSS = require('gulp-clean-css');
|
||||
const concat = require('gulp-concat');
|
||||
const rename = require('gulp-rename');
|
||||
const replace = require('gulp-replace');
|
||||
const header = require('gulp-header');
|
||||
const footer = require('gulp-footer');
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const zip = require('gulp-zip');
|
||||
const del = require('del');
|
||||
const minimist = require('minimist');
|
||||
const yargs = require('yargs');
|
||||
const pkg = require('./package.json');
|
||||
|
||||
// 基础配置
|
||||
const config = {
|
||||
// 注释
|
||||
// 头部注释
|
||||
comment: [
|
||||
'/** v<%= pkg.version %> | <%= pkg.license %> Licensed */<%= js %>',
|
||||
{pkg: pkg, js: ';'}
|
||||
],
|
||||
// 模块
|
||||
// 全部模块
|
||||
modules: 'lay,laytpl,laypage,laydate,jquery,layer,util,dropdown,slider,colorpicker,element,upload,form,table,treeTable,tree,transfer,carousel,rate,flow,code'
|
||||
};
|
||||
|
||||
// 获取参数
|
||||
const argv = require('minimist')(process.argv.slice(2), {
|
||||
const argv = minimist(process.argv.slice(2), {
|
||||
default: {
|
||||
version: pkg.version
|
||||
}
|
||||
});
|
||||
|
||||
// 前置目录
|
||||
const dir = {
|
||||
rls: './release/zip/layui-v' + pkg.version
|
||||
};
|
||||
const rlsFileName = `${pkg.name}-v${pkg.version}`; // 发行文件名
|
||||
const rlsDest = `./release/zip/${rlsFileName}/${pkg.name}`; // 发行目标路径
|
||||
const rlsDirname = path.dirname(rlsDest); // 发行目录名
|
||||
|
||||
// 输出目录
|
||||
const dest = ({
|
||||
dist: './dist',
|
||||
rls: dir.rls + '/layui'
|
||||
}[argv.dest || 'dist'] || argv.dest) + (argv.vs ? '/'+ pkg.version : '');
|
||||
// 复制目标路径
|
||||
const copyDest = argv.dest
|
||||
? path.join(argv.dest, (argv.vs ? '/' + pkg.version : ''))
|
||||
: rlsDest;
|
||||
|
||||
// 打包目标路径
|
||||
const dest = './dist';
|
||||
|
||||
// js
|
||||
const js = () => {
|
||||
@ -56,7 +57,7 @@ const js = () => {
|
||||
}))
|
||||
.pipe(concat('layui.js', {newLine: ''}))
|
||||
.pipe(header.apply(null, config.comment))
|
||||
.pipe(sourcemaps.write(''))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest(dest));
|
||||
};
|
||||
|
||||
@ -71,10 +72,10 @@ const css = () => {
|
||||
compatibility: 'ie8'
|
||||
}))
|
||||
.pipe(concat('layui.css', {newLine: ''}))
|
||||
.pipe(sourcemaps.write(''))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest(dest +'/css'));
|
||||
};
|
||||
|
||||
|
||||
// files
|
||||
const files = () => {
|
||||
let src = ['./src/**/*.{eot,svg,ttf,woff,woff2,html,json,png,jpg,gif}'];
|
||||
@ -82,84 +83,51 @@ const files = () => {
|
||||
.pipe(gulp.dest(dest));
|
||||
};
|
||||
|
||||
// cp
|
||||
const cp = () => {
|
||||
const basePath = './dist/**/*';
|
||||
// clean
|
||||
const clean = () => {
|
||||
return del([dest]);
|
||||
};
|
||||
|
||||
// 默认任务
|
||||
exports.default = gulp.series(clean, gulp.parallel(js, css, files));
|
||||
|
||||
// 复制 dist 目录到指定路径
|
||||
exports.cp = gulp.series(() => del(copyDest), () => {
|
||||
const src = `${dest}/**/*`;
|
||||
|
||||
// 复制 css js
|
||||
gulp.src(`${basePath}.{css,js}`)
|
||||
gulp.src(`${src}.{css,js}`)
|
||||
.pipe(replace(/\n\/(\*|\/)\#[\s\S]+$/, '')) // 过滤 css 和 js 的 map 特定注释
|
||||
.pipe(gulp.dest(dest));
|
||||
.pipe(gulp.dest(copyDest));
|
||||
|
||||
// 复制其他文件
|
||||
return gulp.src([
|
||||
basePath,
|
||||
`!${basePath}.{css,js,map}` // 过滤 map 文件
|
||||
src,
|
||||
`!${src}.{css,js,map}` // 过滤 map 文件
|
||||
])
|
||||
.pipe(replace(/\n\/(\*|\/)\#[\s\S]+$/, '')) // 过滤 css 和 js 的 map 特定注释
|
||||
.pipe(gulp.dest(dest));
|
||||
};
|
||||
|
||||
// release
|
||||
const rls = () => {
|
||||
return gulp.src('./release/doc/**/*')
|
||||
.pipe(replace(/[^'"]+(\/layui\.css)/, 'layui/css$1')) // 替换 css 引入路径中的本地 path
|
||||
.pipe(replace(/[^'"]+(\/layui\.js)/, 'layui$1')) // 替换 js 引入路径中的本地 path
|
||||
.pipe(gulp.dest(dir.rls));
|
||||
};
|
||||
.pipe(gulp.dest(copyDest));
|
||||
});
|
||||
|
||||
// clean
|
||||
const clean = cb => {
|
||||
return del([dest], {
|
||||
force: true
|
||||
});
|
||||
};
|
||||
const cleanRLS = cb => {
|
||||
return del([dir.rls]);
|
||||
};
|
||||
|
||||
// Define all task
|
||||
exports.js = js;
|
||||
exports.css = css;
|
||||
exports.files = files;
|
||||
exports.default = gulp.series(clean, gulp.parallel(js, css, files)); // default task
|
||||
exports.cp = gulp.series(clean, cp);
|
||||
exports.rls = gulp.series(cleanRLS, rls); // release task
|
||||
|
||||
// layer task
|
||||
exports.layer = () => { // gulp layer
|
||||
let dest = './release/layer';
|
||||
|
||||
gulp.src('./src/css/modules/layer.css')
|
||||
.pipe(gulp.dest(dest + '/src'));
|
||||
|
||||
return gulp.src('./src/modules/layer.js')
|
||||
.pipe(gulp.dest(dest + '/src'));
|
||||
};
|
||||
|
||||
// laydate task
|
||||
exports.laydate = () => { // gulp laydate
|
||||
let dest = './release/laydate/'; // 发行目录
|
||||
let comment = [ // 注释
|
||||
'\n/** \n * <%= title %> \n * <%= license %> Licensed \n */ \n\n'
|
||||
,{title: 'laydate 日期与时间组件（单独版）', license: 'MIT'}
|
||||
];
|
||||
|
||||
// css
|
||||
gulp.src('./src/css/modules/laydate.css')
|
||||
.pipe(gulp.dest(dest + 'src'));
|
||||
|
||||
// js
|
||||
return gulp.src(['./src/layui.js', './src/modules/{lay,laydate}.js'])
|
||||
.pipe(replace('win.layui =', 'var layui =')) // 将 layui 替换为局部变量
|
||||
.pipe(replace('}(window); // gulp build: layui-footer', '')) // 替换 layui.js 的落脚
|
||||
.pipe(replace(';!function(window){ // gulp build: lay-header', '')) // 替换 lay.js 的头部
|
||||
.pipe(replace('}(window, window.document); // gulp build: lay-footer', '')) // 替换 lay.js 的落脚
|
||||
.pipe(concat('laydate.js', {newLine: ''}))
|
||||
.pipe(replace(';!function(window, document){ // gulp build: laydate-header', '')) // 替换 laydate.js 的头部
|
||||
.pipe(header.apply(null, comment)) // 追加头部
|
||||
.pipe(gulp.dest(dest + 'src'));
|
||||
};
|
||||
// 发行
|
||||
exports.release = gulp.series(
|
||||
() => del([rlsDirname]), // 清理发行目录
|
||||
() => { // 生成说明
|
||||
return gulp.src('./release/introduce/**/*')
|
||||
.pipe(replace(/[^'"]+(\/layui\.css)/, 'layui/css$1')) // 替换 css 引入路径中的本地 path
|
||||
.pipe(replace(/[^'"]+(\/layui\.js)/, 'layui$1')) // 替换 js 引入路径中的本地 path
|
||||
.pipe(gulp.dest(rlsDirname));
|
||||
},
|
||||
exports.cp, // 复制 dist 目录文件
|
||||
() => { // 生成 ZIP 压缩包
|
||||
const base = path.dirname(rlsDirname);
|
||||
return gulp.src(rlsDirname + '/**/*', {
|
||||
base: base
|
||||
})
|
||||
.pipe(zip(`${rlsFileName}.zip`))
|
||||
.pipe(gulp.dest(base))
|
||||
}
|
||||
);
|
||||
|
||||
// helper
|
||||
exports.help = () => {
|
||||
@ -167,22 +135,20 @@ exports.help = () => {
|
||||
let parser = yargs.usage(usage, {
|
||||
dest: {
|
||||
type: 'string',
|
||||
desc: '定义输出目录，可选项：dist（默认）、rls、任意路径'
|
||||
desc: '自定义输出路径'
|
||||
},
|
||||
vs: {
|
||||
type: 'boolean',
|
||||
desc: '生成一个带版本号的文件夹'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
parser.showHelp(console.log);
|
||||
console.log([
|
||||
'Tasks:',
|
||||
' default 默认任务',
|
||||
' rls 发行任务',
|
||||
' release 发行任务',
|
||||
' cp 将 dist 目录复制一份到参数 --dest 指向的目录'
|
||||
].join('\n'), '\n\nExamples:\n gulp cp --dest ./v --vs', '\n');
|
||||
return gulp.src('./');
|
||||
};
|
||||
|
||||
|
||||
|
||||
46
package.json
46
package.json
@ -1,39 +1,45 @@
|
||||
{
|
||||
"name": "layui",
|
||||
"version": "2.8.18",
|
||||
"version": "2.9.0-beta.1",
|
||||
"description": "Classic modular Front-End UI library",
|
||||
"main": "dist/layui.js",
|
||||
"keywords": [
|
||||
"layui",
|
||||
"components",
|
||||
"front-end",
|
||||
"framework",
|
||||
"library",
|
||||
"ui",
|
||||
"web"
|
||||
],
|
||||
"homepage": "https://layui.dev",
|
||||
"license": "MIT",
|
||||
"scripts": {},
|
||||
"bugs": {
|
||||
"url": "https://github.com/layui/layui/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com/layui/layui.git"
|
||||
},
|
||||
"homepage": "https://layui.dev",
|
||||
"main": "dist/layui.js",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "gulp",
|
||||
"release": "npm run build && npm rum release-zip",
|
||||
"release-zip": "gulp release"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"gulp-clean-css": "^4.3.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-replace": "^1.1.4",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-header": "^2.0.9",
|
||||
"gulp-footer": "^2.1.0",
|
||||
"gulp-sourcemaps": "^3.0.0",
|
||||
"del": "^2.2.2",
|
||||
"gulp-zip": "^5.1.0",
|
||||
"del": "^6.1.1",
|
||||
"minimist": "^1.2.8"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://gitee.com/layui/layui/issues"
|
||||
},
|
||||
"dependencies": {},
|
||||
"keywords": [
|
||||
"layui",
|
||||
"ui",
|
||||
"javascript",
|
||||
"css",
|
||||
"components",
|
||||
"framework",
|
||||
"library"
|
||||
]
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
190
src/layui.js
190
src/layui.js
@ -3,7 +3,7 @@
|
||||
* Classic modular front-end UI library
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
|
||||
;!function(win){
|
||||
"use strict";
|
||||
|
||||
@ -16,9 +16,9 @@
|
||||
};
|
||||
|
||||
var Layui = function(){
|
||||
this.v = '2.8.18'; // Layui 版本号
|
||||
this.v = '2.9.0-beta.1'; // Layui 版本号
|
||||
};
|
||||
|
||||
|
||||
// 识别预先可能定义的指定全局对象
|
||||
var GLOBAL = win.LAYUI_GLOBAL || {};
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
}
|
||||
return src || js[last].src;
|
||||
}();
|
||||
|
||||
|
||||
return config.dir = GLOBAL.dir || jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
|
||||
}();
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
util: 'util', // 工具块
|
||||
code: 'code', // 代码修饰器
|
||||
jquery: 'jquery', // DOM 库（第三方）
|
||||
|
||||
|
||||
all: 'all',
|
||||
'layui.all': 'layui.all' // 聚合标识（功能性的，非真实模块）
|
||||
};
|
||||
@ -96,12 +96,12 @@
|
||||
});
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
type && (
|
||||
factory = deps,
|
||||
deps = []
|
||||
);
|
||||
|
||||
|
||||
that.use(deps, callback, null, 'define');
|
||||
return that;
|
||||
};
|
||||
@ -115,15 +115,15 @@
|
||||
apps = function(){
|
||||
if(typeof apps === 'string'){
|
||||
return [apps];
|
||||
}
|
||||
}
|
||||
// 当第一个参数为 function 时，则自动加载所有内置模块，且执行的回调即为该 function 参数；
|
||||
else if(typeof apps === 'function'){
|
||||
callback = apps;
|
||||
return ['all'];
|
||||
}
|
||||
}
|
||||
return apps;
|
||||
}();
|
||||
|
||||
|
||||
// 如果页面已经存在 jQuery 1.7+ 库且所定义的模块依赖 jQuery，则不加载内部 jquery 模块
|
||||
if(win.jQuery && jQuery.fn.on){
|
||||
that.each(apps, function(index, item){
|
||||
@ -133,7 +133,7 @@
|
||||
});
|
||||
layui.jquery = layui.$ = jQuery;
|
||||
}
|
||||
|
||||
|
||||
var item = apps[0];
|
||||
var timeout = 0;
|
||||
|
||||
@ -141,7 +141,7 @@
|
||||
|
||||
// 静态资源host
|
||||
config.host = config.host || (dir.match(/\/\/([\s\S]+?)\//)||['//'+ location.host +'/'])[0];
|
||||
|
||||
|
||||
// 加载完毕
|
||||
function onScriptLoad(e, url){
|
||||
var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/ : /^(complete|loaded)$/
|
||||
@ -156,7 +156,7 @@
|
||||
}());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 回调
|
||||
function onCallback(){
|
||||
exports.push(layui[item]);
|
||||
@ -172,12 +172,12 @@
|
||||
callback.apply(layui, exports);
|
||||
}() );
|
||||
}
|
||||
|
||||
|
||||
// 如果引入了聚合板，内置的模块则不必重复加载
|
||||
if( apps.length === 0 || (layui['layui.all'] && modules[item]) ){
|
||||
return onCallback(), that;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* 获取加载的模块 URL
|
||||
* 如果是内置模块，则按照 dir 参数拼接模块路径
|
||||
@ -185,12 +185,12 @@
|
||||
* 如果路径值是 {/} 开头，则模块路径即为后面紧跟的字符。
|
||||
* 否则，则按照 base 参数拼接模块路径
|
||||
*/
|
||||
|
||||
var url = ( modules[item] ? (dir + 'modules/')
|
||||
|
||||
var url = ( modules[item] ? (dir + 'modules/')
|
||||
: (/^\{\/\}/.test(that.modules[item]) ? '' : (config.base || ''))
|
||||
) + (that.modules[item] || item) + '.js';
|
||||
url = url.replace(/^\{\/\}/, '');
|
||||
|
||||
|
||||
// 如果扩展模块（即：非内置模块）对象已经存在，则不必再加载
|
||||
if(!config.modules[item] && layui[item]){
|
||||
config.modules[item] = url; // 并记录起该扩展模块的 url
|
||||
@ -199,18 +199,18 @@
|
||||
// 首次加载模块
|
||||
if(!config.modules[item]){
|
||||
var node = doc.createElement('script');
|
||||
|
||||
|
||||
node.async = true;
|
||||
node.charset = 'utf-8';
|
||||
node.src = url + function(){
|
||||
var version = config.version === true
|
||||
var version = config.version === true
|
||||
? (config.v || (new Date()).getTime())
|
||||
: (config.version||'');
|
||||
return version ? ('?v=' + version) : '';
|
||||
}();
|
||||
|
||||
|
||||
head.appendChild(node);
|
||||
|
||||
|
||||
if(node.attachEvent && !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) && !isOpera){
|
||||
node.attachEvent('onreadystatechange', function(e){
|
||||
onScriptLoad(e, url);
|
||||
@ -220,19 +220,19 @@
|
||||
onScriptLoad(e, url);
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
config.modules[item] = url;
|
||||
} else { // 缓存
|
||||
(function poll() {
|
||||
if(++timeout > config.timeout * 1000 / 4){
|
||||
return error(item + ' is not a valid module', 'error');
|
||||
}
|
||||
(typeof config.modules[item] === 'string' && config.status[item])
|
||||
? onCallback()
|
||||
(typeof config.modules[item] === 'string' && config.status[item])
|
||||
? onCallback()
|
||||
: setTimeout(poll, 4);
|
||||
}());
|
||||
}
|
||||
|
||||
|
||||
return that;
|
||||
};
|
||||
|
||||
@ -264,35 +264,35 @@
|
||||
var that = this;
|
||||
var head = doc.getElementsByTagName('head')[0];
|
||||
var link = doc.createElement('link');
|
||||
|
||||
|
||||
if(typeof fn === 'string') cssname = fn;
|
||||
|
||||
|
||||
var app = (cssname || href).replace(/\.|\//g, '');
|
||||
var id = 'layuicss-'+ app;
|
||||
var STAUTS_NAME = 'creating';
|
||||
var timeout = 0;
|
||||
|
||||
|
||||
link.href = href + (config.debug ? '?v='+new Date().getTime() : '');
|
||||
link.rel = 'stylesheet';
|
||||
link.id = id;
|
||||
link.media = 'all';
|
||||
|
||||
|
||||
if(!doc.getElementById(id)){
|
||||
head.appendChild(link);
|
||||
}
|
||||
|
||||
|
||||
if(typeof fn !== 'function') return that;
|
||||
|
||||
|
||||
// 轮询 css 是否加载完毕
|
||||
(function poll(status) {
|
||||
var delay = 100;
|
||||
var getLinkElem = doc.getElementById(id); // 获取动态插入的 link 元素
|
||||
|
||||
|
||||
// 如果轮询超过指定秒数，则视为请求文件失败或 css 文件不符合规范
|
||||
if(++timeout > config.timeout * 1000 / delay){
|
||||
return error(href + ' timeout');
|
||||
}
|
||||
|
||||
|
||||
// css 加载就绪
|
||||
if(parseInt(that.getStyle(getLinkElem, 'width')) === 1989){
|
||||
// 如果参数来自于初始轮询（即未加载就绪时的），则移除 link 标签状态
|
||||
@ -306,7 +306,7 @@
|
||||
}, delay);
|
||||
}
|
||||
}());
|
||||
|
||||
|
||||
// 轮询css是否加载完毕
|
||||
/*
|
||||
(function poll() {
|
||||
@ -318,31 +318,31 @@
|
||||
}() : setTimeout(poll, 100);
|
||||
}());
|
||||
*/
|
||||
|
||||
|
||||
return that;
|
||||
};
|
||||
|
||||
|
||||
// css 内部加载器
|
||||
Layui.prototype.addcss = function(firename, fn, cssname){
|
||||
return layui.link(config.dir + 'css/' + firename, fn, cssname);
|
||||
};
|
||||
|
||||
|
||||
// 存储模块的回调
|
||||
config.callback = {};
|
||||
|
||||
|
||||
// 重新执行模块的工厂函数
|
||||
Layui.prototype.factory = function(modName){
|
||||
if(layui[modName]){
|
||||
return typeof config.callback[modName] === 'function'
|
||||
return typeof config.callback[modName] === 'function'
|
||||
? config.callback[modName]
|
||||
: null;
|
||||
}
|
||||
};
|
||||
|
||||
// 图片预加载
|
||||
Layui.prototype.img = function(url, callback, error) {
|
||||
Layui.prototype.img = function(url, callback, error) {
|
||||
var img = new Image();
|
||||
img.src = url;
|
||||
img.src = url;
|
||||
if(img.complete){
|
||||
return callback(img);
|
||||
}
|
||||
@ -353,7 +353,7 @@
|
||||
img.onerror = function(e){
|
||||
img.onerror = null;
|
||||
typeof error === 'function' && error(e);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
// 全局配置
|
||||
@ -400,13 +400,13 @@
|
||||
search: {},
|
||||
hash: (hash.match(/[^#](#.*$)/) || [])[1] || ''
|
||||
};
|
||||
|
||||
|
||||
if(!/^#\//.test(hash)) return data; // 禁止非路由规范
|
||||
|
||||
hash = hash.replace(/^#\//, '');
|
||||
data.href = '/' + hash;
|
||||
hash = hash.replace(/([^#])(#.*$)/, '$1').split('/') || [];
|
||||
|
||||
|
||||
// 提取 Hash 结构
|
||||
that.each(hash, function(index, item){
|
||||
/^\w+=/.test(item) ? function(){
|
||||
@ -414,10 +414,10 @@
|
||||
data.search[item[0]] = item[1];
|
||||
}() : data.path.push(item);
|
||||
});
|
||||
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
// URL 解析
|
||||
Layui.prototype.url = function(href){
|
||||
var that = this;
|
||||
@ -432,18 +432,18 @@
|
||||
: location.pathname;
|
||||
return pathname.replace(/^\//, '').split('/');
|
||||
}(),
|
||||
|
||||
|
||||
// 提取 url 参数
|
||||
search: function(){
|
||||
var obj = {};
|
||||
var search = (href
|
||||
var search = (href
|
||||
? function(){
|
||||
var str = (href.match(/\?.+/) || [])[0] || '';
|
||||
return str.replace(/\#.+/, '');
|
||||
}()
|
||||
: location.search
|
||||
).replace(/^\?+/, '').split('&'); // 去除 ?，按 & 分割参数
|
||||
|
||||
|
||||
// 遍历分割后的参数
|
||||
that.each(search, function(index, item){
|
||||
var _index = item.indexOf('=')
|
||||
@ -455,24 +455,24 @@
|
||||
} else {
|
||||
return item.substr(0, _index);
|
||||
}
|
||||
}();
|
||||
}();
|
||||
// 提取 value
|
||||
if(key){
|
||||
obj[key] = _index > 0 ? item.substr(_index + 1) : null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return obj;
|
||||
}(),
|
||||
|
||||
|
||||
// 提取 Hash
|
||||
hash: that.router(function(){
|
||||
return href
|
||||
return href
|
||||
? ((href.match(/#.+/) || [])[0] || '/')
|
||||
: location.hash;
|
||||
}())
|
||||
};
|
||||
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
@ -480,31 +480,31 @@
|
||||
Layui.prototype.data = function(table, settings, storage){
|
||||
table = table || 'layui';
|
||||
storage = storage || localStorage;
|
||||
|
||||
|
||||
if(!win.JSON || !win.JSON.parse) return;
|
||||
|
||||
|
||||
// 如果 settings 为 null，则删除表
|
||||
if(settings === null){
|
||||
return delete storage[table];
|
||||
}
|
||||
|
||||
settings = typeof settings === 'object'
|
||||
? settings
|
||||
|
||||
settings = typeof settings === 'object'
|
||||
? settings
|
||||
: {key: settings};
|
||||
|
||||
|
||||
try {
|
||||
var data = JSON.parse(storage[table]);
|
||||
} catch(e) {
|
||||
var data = {};
|
||||
}
|
||||
|
||||
|
||||
if('value' in settings) data[settings.key] = settings.value;
|
||||
if(settings.remove) delete data[settings.key];
|
||||
storage[table] = JSON.stringify(data);
|
||||
|
||||
|
||||
return settings.key ? data[settings.key] : data;
|
||||
};
|
||||
|
||||
|
||||
// 本地临时存储
|
||||
Layui.prototype.sessionData = function(table, settings){
|
||||
return this.data(table, settings, sessionStorage);
|
||||
@ -520,7 +520,7 @@
|
||||
label = (agent.match(exp)||[])[1];
|
||||
return label || false;
|
||||
};
|
||||
|
||||
|
||||
// 返回结果集
|
||||
var result = {
|
||||
os: function(){ // 底层操作系统
|
||||
@ -532,7 +532,7 @@
|
||||
return 'ios';
|
||||
} else if(/mac/.test(agent)){
|
||||
return 'mac';
|
||||
}
|
||||
}
|
||||
}(),
|
||||
ie: function(){ // ie 版本
|
||||
return (!!win.ActiveXObject || "ActiveXObject" in win) ? (
|
||||
@ -541,17 +541,17 @@
|
||||
}(),
|
||||
weixin: getVersion('micromessenger') // 是否微信
|
||||
};
|
||||
|
||||
|
||||
// 任意的 key
|
||||
if(key && !result[key]){
|
||||
result[key] = getVersion(key);
|
||||
}
|
||||
|
||||
|
||||
// 移动设备
|
||||
result.android = /android/.test(agent);
|
||||
result.ios = result.os === 'ios';
|
||||
result.mobile = (result.android || result.ios);
|
||||
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
@ -561,33 +561,33 @@
|
||||
error: error
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
// typeof 类型细分 -> string/number/boolean/undefined/null、object/array/function/…
|
||||
Layui.prototype._typeof = Layui.prototype.type = function(operand){
|
||||
if(operand === null) return String(operand);
|
||||
|
||||
|
||||
// 细分引用类型
|
||||
return (typeof operand === 'object' || typeof operand === 'function') ? function(){
|
||||
var type = Object.prototype.toString.call(operand).match(/\s(.+)\]$/) || []; // 匹配类型字符
|
||||
var classType = 'Function|Array|Date|RegExp|Object|Error|Symbol'; // 常见类型字符
|
||||
|
||||
|
||||
type = type[1] || 'Object';
|
||||
|
||||
|
||||
// 除匹配到的类型外，其他对象均返回 object
|
||||
return new RegExp('\\b('+ classType + ')\\b').test(type)
|
||||
? type.toLowerCase()
|
||||
return new RegExp('\\b('+ classType + ')\\b').test(type)
|
||||
? type.toLowerCase()
|
||||
: 'object';
|
||||
}() : typeof operand;
|
||||
};
|
||||
|
||||
|
||||
// 对象是否具备数组结构（此处为兼容 jQuery 对象）
|
||||
Layui.prototype._isArray = Layui.prototype.isArray = function(obj){
|
||||
var that = this;
|
||||
var len;
|
||||
var type = that.type(obj);
|
||||
|
||||
|
||||
if(!obj || (typeof obj !== 'object') || obj === win) return false;
|
||||
|
||||
|
||||
len = 'length' in obj && obj.length; // 兼容 ie
|
||||
return type === 'array' || len === 0 || (
|
||||
typeof len === 'number' && len > 0 && (len - 1) in obj // 兼容 jQuery 对象
|
||||
@ -601,10 +601,10 @@
|
||||
var callFn = function(key, obj){ // 回调
|
||||
return fn.call(obj[key], key, obj[key])
|
||||
};
|
||||
|
||||
|
||||
if(typeof fn !== 'function') return that;
|
||||
obj = obj || [];
|
||||
|
||||
|
||||
// 优先处理数组结构
|
||||
if(that.isArray(obj)){
|
||||
for(key = 0; key < obj.length; key++){
|
||||
@ -615,7 +615,7 @@
|
||||
if(callFn(key, obj)) break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return that;
|
||||
};
|
||||
|
||||
@ -632,12 +632,12 @@
|
||||
} else if(typeof arr !== 'object'){ // 若 arr 非对象
|
||||
return [clone];
|
||||
}
|
||||
|
||||
|
||||
// 开始排序
|
||||
clone.sort(function(o1, o2){
|
||||
var v1 = o1[key];
|
||||
var v2 = o2[key];
|
||||
|
||||
|
||||
/*
|
||||
* 特殊数据
|
||||
* 若比较的成员均非对象
|
||||
@ -679,11 +679,11 @@
|
||||
return v1 - v2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 字典序排序
|
||||
*/
|
||||
|
||||
|
||||
// 若为非数字比较
|
||||
if(!isNum[0] && !isNum[1]){
|
||||
// 字典序比较
|
||||
@ -695,7 +695,7 @@
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 若为混合比较
|
||||
if(isNum[0] || !isNum[1]){ // 数字 vs 非数字
|
||||
return -1;
|
||||
@ -716,13 +716,13 @@
|
||||
thisEvent.cancelBubble = true;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 字符常理
|
||||
var EV_REMOVE = 'LAYUI-EVENT-REMOVE';
|
||||
|
||||
// 自定义模块事件
|
||||
Layui.prototype.onevent = function(modName, events, callback){
|
||||
if(typeof modName !== 'string'
|
||||
if(typeof modName !== 'string'
|
||||
|| typeof callback !== 'function') return this;
|
||||
|
||||
return Layui.event(modName, events, null, callback);
|
||||
@ -739,13 +739,13 @@
|
||||
var res = item && item.call(that, params);
|
||||
res === false && result === null && (result = false);
|
||||
};
|
||||
|
||||
|
||||
// 如果参数传入特定字符，则执行移除事件
|
||||
if(params === EV_REMOVE){
|
||||
delete (that.cache.event[eventName] || {})[filterName];
|
||||
return that;
|
||||
}
|
||||
|
||||
|
||||
// 添加事件
|
||||
if(fn){
|
||||
config.event[eventName] = config.event[eventName] || {};
|
||||
@ -760,7 +760,7 @@
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
// 执行事件回调
|
||||
layui.each(config.event[eventName], function(key, item){
|
||||
// 执行当前模块的全部事件
|
||||
@ -768,21 +768,21 @@
|
||||
layui.each(item, callback);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// 执行指定事件
|
||||
key === '' && layui.each(item, callback);
|
||||
(filterName && key === filterName) && layui.each(item, callback);
|
||||
});
|
||||
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
|
||||
// 新增模块事件
|
||||
Layui.prototype.on = function(events, modName, callback){
|
||||
var that = this;
|
||||
return that.onevent.call(that, modName, events, callback);
|
||||
}
|
||||
|
||||
|
||||
// 移除模块事件
|
||||
Layui.prototype.off = function(events, modName){
|
||||
var that = this;
|
||||
|
||||
@ -3,18 +3,18 @@
|
||||
|
||||
;!function(window){ // gulp build: lay-header
|
||||
"use strict";
|
||||
|
||||
|
||||
var MOD_NAME = 'lay'; // 模块名
|
||||
var document = window.document;
|
||||
|
||||
|
||||
/**
|
||||
* 元素查找
|
||||
* @param {string | HTMLElement | JQuery} selector
|
||||
* @param {string | HTMLElement | JQuery} selector
|
||||
*/
|
||||
var lay = function(selector){
|
||||
var lay = function(selector){
|
||||
return new Class(selector);
|
||||
};
|
||||
|
||||
|
||||
// 构造器
|
||||
var Class = function(selector){
|
||||
var that = this;
|
||||
@ -45,11 +45,11 @@
|
||||
});
|
||||
return rst;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
lay 对象操作
|
||||
*/
|
||||
|
||||
|
||||
Class.fn = Class.prototype = [];
|
||||
Class.fn.constructor = Class;
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
}
|
||||
return args[0];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* IE 版本
|
||||
* @type {string | boolean} - 如果是 IE 返回版本字符串，否则返回 false
|
||||
@ -97,12 +97,12 @@
|
||||
(agent.match(/msie\s(\d+)/) || [])[1] || '11' // 由于 ie11 并没有 msie 的标识
|
||||
) : false;
|
||||
}();
|
||||
|
||||
|
||||
/**
|
||||
|
||||
|
||||
/**
|
||||
* 获取 layui 常见方法，以便用于组件单独版
|
||||
*/
|
||||
|
||||
|
||||
lay.layui = layui || {};
|
||||
lay.getPath = layui.cache.dir; // 获取当前 JS 所在目录
|
||||
lay.stope = layui.stope; // 中止冒泡
|
||||
@ -134,11 +134,11 @@
|
||||
}
|
||||
return num < Math.pow(10, length) ? str + num : num;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 创建元素
|
||||
* @param {string} elemName - 元素的标签名
|
||||
* @param {{attrName: string, attrValue:string}} [attr] - 添加到元素上的属性
|
||||
* @param {Object.<string, string>} [attr] - 添加到元素上的属性
|
||||
* @returns {HTMLElement} 返回创建的 HTML 元素
|
||||
* @example
|
||||
* ```js
|
||||
@ -156,7 +156,7 @@
|
||||
/**
|
||||
* 当前页面是否存在滚动条
|
||||
* @returns {boolean} 是否存在滚动条
|
||||
* @example
|
||||
* @example
|
||||
* ```
|
||||
* lay.hasScrollbar() // true 或 false
|
||||
* ```
|
||||
@ -180,7 +180,7 @@
|
||||
* color: green;
|
||||
* }
|
||||
* </style>
|
||||
*
|
||||
*
|
||||
* lay.getStyleRules($('#test')[0], function(rule, index){
|
||||
* if(rule.selectorText === '.lay-card'){
|
||||
* console.log(index, rule.cssText) // 0 '.lay-card{color: #000}'
|
||||
@ -211,14 +211,14 @@
|
||||
* @param {string | HTMLElement | JQuery} [options.target] - 目标容器，指定后会将样式追加到目标容器
|
||||
* @param {string} [options.id] - 样式元素的 id，默认自增
|
||||
* @param {string} options.text - 样式内容
|
||||
* @returns {HTMLStyleElement} 返回创建的样式元素
|
||||
* @returns {HTMLStyleElement} 返回创建的样式元素
|
||||
* @example
|
||||
* ```html
|
||||
* <div id="targetEl">
|
||||
* <!-- 样式追加到目标容器 -->
|
||||
* <style id="LAY-STYLE-DF-0">.card{color: #000}</style>
|
||||
* </div>
|
||||
*
|
||||
*
|
||||
* lay.style({
|
||||
* target: '#targetEl',
|
||||
* text: '.card{color: #000}'
|
||||
@ -231,9 +231,9 @@
|
||||
var style = lay.elem('style');
|
||||
var styleText = options.text || '';
|
||||
var target = options.target;
|
||||
|
||||
|
||||
if (!styleText) return;
|
||||
|
||||
|
||||
// 添加样式
|
||||
if ('styleSheet' in style) {
|
||||
style.setAttribute('type', 'text/css');
|
||||
@ -241,7 +241,7 @@
|
||||
} else {
|
||||
style.innerHTML = styleText;
|
||||
}
|
||||
|
||||
|
||||
// ID
|
||||
style.id = 'LAY-STYLE-'+ (options.id || function(index) {
|
||||
lay.style.index++;
|
||||
@ -257,7 +257,7 @@
|
||||
|
||||
return style;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 将元素定位到指定目标元素附近
|
||||
* @param {HTMLElement} target - 目标元素
|
||||
@ -277,13 +277,13 @@
|
||||
* <li>菜单1</li>
|
||||
* <li>菜单2</li>
|
||||
* </ul>
|
||||
*
|
||||
*
|
||||
* // 下拉菜单将被定位到按钮附近
|
||||
* lay.position(
|
||||
* $('#targetEl')[0],
|
||||
* $('#contentEl')[0],
|
||||
* $('#targetEl')[0],
|
||||
* $('#contentEl')[0],
|
||||
* {
|
||||
* position: 'fixed',
|
||||
* position: 'fixed',
|
||||
* align: 'center'
|
||||
* }
|
||||
* )
|
||||
@ -292,7 +292,7 @@
|
||||
lay.position = function(target, elem, opts){
|
||||
if(!elem) return;
|
||||
opts = opts || {};
|
||||
|
||||
|
||||
// 如果绑定的是 document 或 body 元素，则直接获取鼠标坐标
|
||||
if(target === document || target === lay('body')[0]){
|
||||
opts.clickType = 'right';
|
||||
@ -310,13 +310,13 @@
|
||||
}() : target.getBoundingClientRect();
|
||||
var elemWidth = elem.offsetWidth; // 控件的宽度
|
||||
var elemHeight = elem.offsetHeight; // 控件的高度
|
||||
|
||||
|
||||
// 滚动条高度
|
||||
var scrollArea = function(type){
|
||||
type = type ? 'scrollLeft' : 'scrollTop';
|
||||
return document.body[type] | document.documentElement[type];
|
||||
};
|
||||
|
||||
|
||||
// 窗口宽高
|
||||
var winArea = function(type){
|
||||
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
|
||||
@ -324,7 +324,7 @@
|
||||
var margin = 'margin' in opts ? opts.margin : 5;
|
||||
var left = rect.left;
|
||||
var top = rect.bottom;
|
||||
|
||||
|
||||
// 相对元素居中
|
||||
if(opts.align === 'center'){
|
||||
left = left - (elemWidth - target.offsetWidth) / 2;
|
||||
@ -338,7 +338,7 @@
|
||||
}
|
||||
// 左侧是否超出边界
|
||||
if(left < margin) left = margin;
|
||||
|
||||
|
||||
|
||||
// 判断底部和顶部是否超出边界
|
||||
if(rect.bottom + elemHeight + margin > winArea()){ // 底部超出边界
|
||||
@ -366,11 +366,11 @@
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
// 定位类型
|
||||
var position = opts.position;
|
||||
if(position) elem.style.position = position;
|
||||
|
||||
|
||||
// 设置坐标
|
||||
elem.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px';
|
||||
elem.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px';
|
||||
@ -387,23 +387,23 @@
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 获取元素上的属性配置项
|
||||
* @param {string | HTMLElement | JQuery} elem - HTML 元素
|
||||
* @param {{attr: string} | string} [opts="lay-options"] - 可配置的选项，string 类型指定属性名
|
||||
* @returns {*} 返回元素上的属性配置项
|
||||
* @returns {Object.<string, any>} 返回元素上的属性配置项
|
||||
* @example
|
||||
* ```js
|
||||
* <div id="testEl" lay-options="{color:red}" lay-toc="{hot: true}"></div>
|
||||
*
|
||||
*
|
||||
* var elem = $('#testEl')
|
||||
* lay.options(elem) // {color:red}
|
||||
* lay.options(elem[0]) // {color:red}
|
||||
* lay.options('#testEl') // {color:red}
|
||||
* lay.options('#testEl', {attr: 'lay-toc'}) // {hot: true}
|
||||
* lay.options('#testEl', 'lay-toc') // {hot: true}
|
||||
*
|
||||
*
|
||||
* $('#testEl').attr('lay-toc') // '{hot: true}'
|
||||
* ```
|
||||
*/
|
||||
@ -417,16 +417,20 @@
|
||||
var attrValue = othis.attr(attrName);
|
||||
|
||||
try {
|
||||
/**
|
||||
* 请注意: 开发者在使用 lay-options="{}" 配置组件选项时，需确保属性值不来自于网页用户,
|
||||
* 即属性值必须在网页开发者自身的可控范围内，否则请勿在 HTML 标签属性中获取组件选项。
|
||||
*/
|
||||
return new Function('return '+ (attrValue || '{}'))();
|
||||
} catch(ev) {
|
||||
layui.hint().error(opts.errorText || [
|
||||
attrName + '="'+ attrValue + '"',
|
||||
attrName + '="'+ attrValue + '"',
|
||||
'\n parseerror: '+ ev
|
||||
].join('\n'), 'error');
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 元素是否属于顶级元素（document 或 body）
|
||||
@ -468,11 +472,16 @@
|
||||
writeText: function(options) {
|
||||
var text = String(options.text);
|
||||
|
||||
try {
|
||||
navigator.clipboard.writeText(text).then(
|
||||
options.done
|
||||
)['catch'](options.error);
|
||||
} catch(e) {
|
||||
if(navigator && 'clipboard' in navigator){
|
||||
navigator.clipboard.writeText(text)
|
||||
.then(options.done, function(){
|
||||
legacyCopy();
|
||||
});
|
||||
}else{
|
||||
legacyCopy();
|
||||
}
|
||||
|
||||
function legacyCopy(){
|
||||
var elem = document.createElement('textarea');
|
||||
|
||||
elem.value = text;
|
||||
@ -480,7 +489,7 @@
|
||||
elem.style.opacity = '0';
|
||||
elem.style.top = '0px';
|
||||
elem.style.left = '0px';
|
||||
|
||||
|
||||
document.body.appendChild(elem);
|
||||
elem.select();
|
||||
|
||||
@ -500,7 +509,7 @@
|
||||
/*
|
||||
* lay 元素操作
|
||||
*/
|
||||
|
||||
|
||||
|
||||
// 追加字符
|
||||
Class.addStr = function(str, new_str){
|
||||
@ -513,7 +522,7 @@
|
||||
});
|
||||
return str.replace(/^\s|\s$/, '');
|
||||
};
|
||||
|
||||
|
||||
// 移除值
|
||||
Class.removeStr = function(str, new_str){
|
||||
str = str.replace(/\s+/, ' ');
|
||||
@ -526,7 +535,7 @@
|
||||
});
|
||||
return str.replace(/\s+/, ' ').replace(/^\s|\s$/, '');
|
||||
};
|
||||
|
||||
|
||||
// 查找子元素
|
||||
Class.fn.find = function(selector){
|
||||
var that = this;
|
||||
@ -534,7 +543,7 @@
|
||||
var isObject = typeof selector === 'object';
|
||||
|
||||
this.each(function(i, item){
|
||||
var children = isObject && item.contains(selector)
|
||||
var children = isObject && item.contains(selector)
|
||||
? selector
|
||||
: item.querySelectorAll(selector || null);
|
||||
|
||||
@ -545,24 +554,24 @@
|
||||
|
||||
return lay(elem);
|
||||
};
|
||||
|
||||
|
||||
// 元素遍历
|
||||
Class.fn.each = function(fn){
|
||||
return lay.each.call(this, this, fn);
|
||||
};
|
||||
|
||||
|
||||
// 添加 className
|
||||
Class.fn.addClass = function(className, type){
|
||||
return this.each(function(index, item){
|
||||
item.className = Class[type ? 'removeStr' : 'addStr'](item.className, className)
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 移除 className
|
||||
Class.fn.removeClass = function(className){
|
||||
return this.addClass(className, true);
|
||||
};
|
||||
|
||||
|
||||
// 是否包含 css 类
|
||||
Class.fn.hasClass = function(className){
|
||||
var has = false;
|
||||
@ -573,7 +582,7 @@
|
||||
});
|
||||
return has;
|
||||
};
|
||||
|
||||
|
||||
// 添加或获取 css style
|
||||
Class.fn.css = function(key, value){
|
||||
var that = this;
|
||||
@ -586,9 +595,9 @@
|
||||
typeof key === 'object' ? lay.each(key, function(thisKey, thisValue){
|
||||
item.style[thisKey] = parseValue(thisValue);
|
||||
}) : item.style[key] = parseValue(value);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 添加或获取宽度
|
||||
Class.fn.width = function(value){
|
||||
var that = this;
|
||||
@ -596,9 +605,9 @@
|
||||
if(that.length > 0) return that[0].offsetWidth; // 此处还需做兼容
|
||||
}() : that.each(function(index, item){
|
||||
that.css('width', value);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 添加或获取高度
|
||||
Class.fn.height = function(value){
|
||||
var that = this;
|
||||
@ -606,9 +615,9 @@
|
||||
if(that.length > 0) return that[0].offsetHeight; // 此处还需做兼容
|
||||
}() : that.each(function(index, item){
|
||||
that.css('height', value);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 添加或获取属性
|
||||
Class.fn.attr = function(key, value){
|
||||
var that = this;
|
||||
@ -616,16 +625,16 @@
|
||||
if(that.length > 0) return that[0].getAttribute(key);
|
||||
}() : that.each(function(index, item){
|
||||
item.setAttribute(key, value);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 移除属性
|
||||
Class.fn.removeAttr = function(key){
|
||||
return this.each(function(index, item){
|
||||
item.removeAttribute(key);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 设置或获取 HTML 内容
|
||||
Class.fn.html = function(html){
|
||||
var that = this;
|
||||
@ -635,7 +644,7 @@
|
||||
item.innerHTML = html;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 设置或获取值
|
||||
Class.fn.val = function(value){
|
||||
var that = this;
|
||||
@ -645,23 +654,23 @@
|
||||
item.value = value;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 追加内容
|
||||
Class.fn.append = function(elem){
|
||||
return this.each(function(index, item){
|
||||
typeof elem === 'object'
|
||||
typeof elem === 'object'
|
||||
? item.appendChild(elem)
|
||||
: item.innerHTML = item.innerHTML + elem;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 移除内容
|
||||
Class.fn.remove = function(elem){
|
||||
return this.each(function(index, item){
|
||||
elem ? item.removeChild(elem) : item.parentNode.removeChild(item);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 事件绑定
|
||||
Class.fn.on = function(eventName, fn){
|
||||
return this.each(function(index, item){
|
||||
@ -671,24 +680,24 @@
|
||||
}) : item.addEventListener(eventName, fn, false);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 解除事件
|
||||
Class.fn.off = function(eventName, fn){
|
||||
return this.each(function(index, item){
|
||||
item.detachEvent
|
||||
? item.detachEvent('on'+ eventName, fn)
|
||||
item.detachEvent
|
||||
? item.detachEvent('on'+ eventName, fn)
|
||||
: item.removeEventListener(eventName, fn, false);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// export
|
||||
window.lay = lay;
|
||||
|
||||
|
||||
// 输出为 layui 模块
|
||||
if(window.layui && layui.define){
|
||||
layui.define(function(exports){
|
||||
exports(MOD_NAME, lay);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}(window, window.document); // gulp build: lay-footer
|
||||
|
||||
@ -1405,7 +1405,7 @@
|
||||
that.limit({
|
||||
elem: lay(that.footer).find(ELEM_CONFIRM),
|
||||
date: that[startEnd],
|
||||
inedx: 0,
|
||||
index: 0,
|
||||
time: ['hours', 'minutes', 'seconds']
|
||||
});
|
||||
}
|
||||
|
||||
@ -1598,6 +1598,7 @@ layer.photos = function(options, loop, key){
|
||||
} else {
|
||||
zoomElem.eq(1).trigger('click');
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
@ -12,11 +12,11 @@ layui.define(function(exports){
|
||||
};
|
||||
|
||||
// 模板工具
|
||||
var tool = {
|
||||
var tool = {
|
||||
escape: function(html){
|
||||
var exp = /[<"'>]|&(?=#[a-zA-Z0-9]+)/g;
|
||||
if(html === undefined || html === null) return '';
|
||||
|
||||
|
||||
html += '';
|
||||
if(!exp.test(html)) return html;
|
||||
|
||||
@ -77,12 +77,12 @@ layui.define(function(exports){
|
||||
|
||||
// 模板必须为 string 类型
|
||||
if(typeof template !== 'string') return template;
|
||||
|
||||
|
||||
// 正则解析
|
||||
template = template.replace(/\s+|\r|\t|\n/g, ' ')
|
||||
.replace(inner.exp(options.open +'#'), options.open +'# ')
|
||||
.replace(inner.exp(options.close +'}'), '} '+ options.close).replace(/\\/g, '\\\\')
|
||||
|
||||
|
||||
// 不匹配指定区域的内容
|
||||
.replace(inner.exp(options.open + '!(.+?)!' + options.close), function(str){
|
||||
str = str.replace(inner.exp('^'+ options.open + '!'), '')
|
||||
@ -92,13 +92,13 @@ layui.define(function(exports){
|
||||
});
|
||||
return str
|
||||
})
|
||||
|
||||
|
||||
// 匹配 JS 语法
|
||||
.replace(/(?="|')/g, '\\').replace(that.tagExp(), function(str){
|
||||
str = str.replace(jss, '').replace(jsse, '');
|
||||
return '";' + str.replace(/\\(.)/g, '$1') + ';view+="';
|
||||
})
|
||||
|
||||
|
||||
// 匹配普通输出语句
|
||||
.replace(that.tagExp(1), function(str){
|
||||
var start = '"+laytpl.escape(';
|
||||
@ -114,10 +114,14 @@ layui.define(function(exports){
|
||||
}
|
||||
return start + str.replace(/\\(.)/g, '$1') + ')+"';
|
||||
});
|
||||
|
||||
|
||||
template = '"use strict";var view = "' + template + '";return view;';
|
||||
|
||||
try {
|
||||
/**
|
||||
* 请注意: 开发者在使用模板语法时，需确保模板中的 JS 语句不来自于页面用户输入。
|
||||
* 即模板中的 JS 语句必须在页面开发者自身的可控范围内，否则请避免使用该模板解析。
|
||||
*/
|
||||
that.cache = template = new Function('d, laytpl', template);
|
||||
return template(data, tool);
|
||||
} catch(e) {
|
||||
@ -132,7 +136,7 @@ layui.define(function(exports){
|
||||
|
||||
var that = this;
|
||||
var result = that.cache ? that.cache(data, tool) : that.parse(that.template, data);
|
||||
|
||||
|
||||
// 返回渲染结果
|
||||
typeof callback === 'function' && callback(result);
|
||||
return result;
|
||||
@ -152,7 +156,7 @@ layui.define(function(exports){
|
||||
};
|
||||
|
||||
laytpl.v = '2.0.0';
|
||||
|
||||
|
||||
// export
|
||||
exports('laytpl', laytpl);
|
||||
});
|
||||
});
|
||||
|
||||
@ -348,16 +348,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
options.index = that.index;
|
||||
that.key = options.id || options.index;
|
||||
|
||||
//初始化一些其他参数
|
||||
// 初始化一些其他参数
|
||||
that.setInit();
|
||||
|
||||
//高度铺满：full-差距值
|
||||
if(options.height && /^full-\d+$/.test(options.height)){
|
||||
that.fullHeightGap = options.height.split('-')[1];
|
||||
// 高度铺满：full-差距值
|
||||
if(options.height && /^full-.+$/.test(options.height)){
|
||||
that.fullHeightGap = parseFloat(options.height.split('-')[1]) || 0;
|
||||
options.height = _WIN.height() - that.fullHeightGap;
|
||||
} else if (options.height && /^#\w+\S*-\d+$/.test(options.height)) {
|
||||
} else if (options.height && /^#\w+\S*-.+$/.test(options.height)) {
|
||||
var parentDiv = options.height.split("-");
|
||||
that.parentHeightGap = parentDiv.pop();
|
||||
that.parentHeightGap = parseFloat(parentDiv.pop()) || 0;
|
||||
that.parentDiv = parentDiv.join("-");
|
||||
options.height = $(that.parentDiv).height() - that.parentHeightGap;
|
||||
}
|
||||
@ -1035,9 +1035,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
dataType: options.dataType || 'json',
|
||||
jsonpCallback: options.jsonpCallback,
|
||||
headers: options.headers || {},
|
||||
complete: function(xhr,ts){
|
||||
typeof options.complete === 'function' && options.complete(xhr, ts);
|
||||
},
|
||||
complete: typeof options.complete === 'function' ? options.complete : undefined,
|
||||
success: function(res){
|
||||
// 若有数据解析的回调，则获得其返回的数据
|
||||
if(typeof options.parseData === 'function'){
|
||||
@ -2469,7 +2467,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}
|
||||
};
|
||||
// 展开单元格内容
|
||||
var gridExpand = function(e){
|
||||
var gridExpand = function(e, expandedMode){
|
||||
var othis = $(this);
|
||||
var td = othis.parent();
|
||||
var key = td.data('key');
|
||||
@ -2478,7 +2476,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var elemCell = td.children(ELEM_CELL);
|
||||
var ELEM_CELL_C = 'layui-table-cell-c';
|
||||
var elemCellClose = $('<i class="layui-icon layui-icon-up '+ ELEM_CELL_C +'">');
|
||||
var expandedMode = col.expandedMode || options.cellExpandedMode;
|
||||
|
||||
expandedMode = expandedMode || col.expandedMode || options.cellExpandedMode;
|
||||
|
||||
// 展开风格
|
||||
if (expandedMode === 'tips') { // TIPS 展开风格
|
||||
@ -2539,10 +2538,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
// 关闭展开状态
|
||||
elemCellClose.on('click', function(){
|
||||
var $this = $(this);
|
||||
that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式
|
||||
that.setRowActive(index, [ELEM_EXPAND, ELEM_HOVER].join(' '), true); // 移除单元格展开样式
|
||||
that.cssRules(key, function(item){
|
||||
item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度
|
||||
that.resize(); // 滚动条补丁
|
||||
setTimeout(function(){
|
||||
that.resize(); // 滚动条补丁
|
||||
});
|
||||
});
|
||||
$this.remove();
|
||||
});
|
||||
@ -2558,7 +2559,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
});
|
||||
// 表格合计栏单元格展开事件
|
||||
that.layTotal.on('click', '.'+ ELEM_GRID_DOWN, function(e){
|
||||
gridExpand.call(this, e);
|
||||
gridExpand.call(this, e, 'tips'); // 强制采用 tips 风格
|
||||
});
|
||||
|
||||
// 行工具条操作事件
|
||||
|
||||
@ -383,33 +383,61 @@ layui.define('jquery', function(exports){
|
||||
}
|
||||
},
|
||||
|
||||
// 批量事件
|
||||
event: function(attr, obj, eventType){
|
||||
var _body = $('body');
|
||||
eventType = eventType || 'click';
|
||||
/**
|
||||
* 批量事件
|
||||
* @param {string} [attr="lay-on"] - 触发事件的元素属性名
|
||||
* @param {Object.<string, Function} events - 事件集合
|
||||
* @param {Object} [options] - 参数的更多选项
|
||||
* @param {(string|HTMLElement|jQuery)} [options.elem="body"] - 触发事件的委托元素
|
||||
* @param {string} [options.trigger="click"] - 事件触发的方式
|
||||
* @returns {Object} 返回当前 events 参数设置的事件集合
|
||||
*/
|
||||
on: function(attr, events, options) {
|
||||
// 若参数一为 object 类型，则为事件集，且省略 attr
|
||||
if (typeof attr === 'object') {
|
||||
options = events || {};
|
||||
events = attr;
|
||||
attr = options.attr || 'lay-on'; // 默认属性名
|
||||
}
|
||||
|
||||
// 记录事件回调集合
|
||||
obj = util.event[attr] = $.extend(true, util.event[attr], obj) || {};
|
||||
// 更多选项
|
||||
options = $.extend({
|
||||
elem: 'body',
|
||||
trigger: 'click'
|
||||
}, typeof options === 'object' ? options : {
|
||||
trigger: options // 兼容旧版
|
||||
});
|
||||
|
||||
// 清除委托事件
|
||||
util.event.UTIL_EVENT_CALLBACK = util.event.UTIL_EVENT_CALLBACK || {};
|
||||
_body.off(eventType, '*['+ attr +']', util.event.UTIL_EVENT_CALLBACK[attr])
|
||||
var elem = options.elem = $(options.elem);
|
||||
var attrSelector = '['+ attr +']';
|
||||
var CALLBACK = 'UTIL_ON_CALLBACK';
|
||||
|
||||
// 绑定委托事件
|
||||
util.event.UTIL_EVENT_CALLBACK[attr] = function(){
|
||||
var othis = $(this);
|
||||
var key = othis.attr(attr);
|
||||
(typeof obj[key] === 'function') && obj[key].call(this, othis);
|
||||
};
|
||||
if (!elem[0]) return; // 若委托元素不存在
|
||||
|
||||
// 清除旧事件，绑定新事件
|
||||
_body.on(eventType, '*['+ attr +']', util.event.UTIL_EVENT_CALLBACK[attr]);
|
||||
// 根据 attr 记录事件集合
|
||||
events = util.on[attr] = $.extend(true, util.on[attr], events) || {};
|
||||
|
||||
return obj;
|
||||
// 清除事件委托
|
||||
util.on[CALLBACK] = util.on[CALLBACK] || {};
|
||||
elem.off(options.trigger, attrSelector, util.on[CALLBACK][attr]);
|
||||
|
||||
// 绑定事件委托
|
||||
elem.on(
|
||||
options.trigger,
|
||||
attrSelector,
|
||||
util.on[CALLBACK][attr] = function() {
|
||||
var othis = $(this);
|
||||
var key = othis.attr(attr);
|
||||
typeof events[key] === 'function' && events[key].call(this, othis);
|
||||
}
|
||||
);
|
||||
|
||||
return events;
|
||||
}
|
||||
};
|
||||
|
||||
util.on = util.event;
|
||||
// 兼容旧版
|
||||
util.event = util.on;
|
||||
|
||||
// 输出接口
|
||||
exports('util', util);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user