Browse Source

发布 v2.9.0-beta.1

pull/1440/head v2.9.0-beta.1
贤心 1 year ago committed by GitHub
parent
commit
0968676e1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      .gitignore
  2. 10
      README.md
  3. 2
      dist/layui.js
  4. 2
      dist/layui.js.map
  5. 2
      docs/README.md
  6. 18
      docs/laytpl/index.md
  7. 20
      docs/table/detail/options.md
  8. 17
      docs/table/examples/editModes.md
  9. 48
      docs/util/index.md
  10. 56
      docs/versions.md
  11. 22
      examples/base.html
  12. 30
      examples/dropdown.html
  13. 18
      examples/element.html
  14. 6
      examples/flow.html
  15. 26
      examples/layer.html
  16. 22
      examples/table-test.html
  17. 10
      examples/table.html
  18. 90
      examples/util.html
  19. 150
      gulpfile.js
  20. 46
      package.json
  21. 190
      src/layui.js
  22. 157
      src/modules/lay.js
  23. 2
      src/modules/laydate.js
  24. 1
      src/modules/layer.js
  25. 24
      src/modules/laytpl.js
  26. 29
      src/modules/table.js
  27. 72
      src/modules/util.js

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

@ -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

File diff suppressed because one or more lines are too long

2
dist/layui.js.map vendored

File diff suppressed because one or more lines are too long

2
docs/README.md

@ -2,7 +2,7 @@
## 文档预览
- [最新文档](https://layui.dev)
- [当前版本文档](https://layui.dev/docs/2/)
- [2.7 文档](https://layui.dev/2.7/)
## 目录规范

18
docs/laytpl/index.md

@ -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); // 张三是一名前端工程师。
});
});
```

20
docs/table/detail/options.md

@ -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>

17
docs/table/examples/editModes.md

@ -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;

48
docs/util/index.md

@ -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('&lt;div&gt;123&lt;/div&gt;'); // 返回: <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 | 触发事件的元素属性名。可省略<sup>2.9+</sup> | `string` | `lay-on` |
| events | 事件集合。包含 `attr` 对应的属性值和事件回调函数的键值对 | `object` | - |
| options <sup>2.9+</sup> | 参数的更多选项。详见下表。 | `object` | - |
- 参数 `attr` : 触发事件的元素属性名
- 参数 `obj` : 事件回调函数集合
- 参数 `eventType` : 事件类型。默认 `click`
参数 `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>

56
docs/versions.md

@ -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>

22
examples/base.html

@ -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>

30
examples/dropdown.html

@ -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'

18
examples/element.html

@ -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);
});

6
examples/flow.html

@ -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>

26
examples/layer.html

@ -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>

22
examples/table-test.html

@ -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});

10
examples/table.html

@ -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', {

90
examples/util.html

@ -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,47 +89,59 @@ 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);
});
//某个时间在当前时间的多久前
var str = util.timeAgo(new Date(2017,7,15,2,58,0));
$('#test1').html('示例写于:'+ str);
//处理属性 为 lay-active 的所有元素事件
util.event('lay-active', {
// 批量处理事件
util.on({
e1: function(othis){
alert(othis.html())
}
,e2: function(othis){
},
e2: function(othis){
alert(othis.html())
}
,e3: function(othis){
});
// 事件集的替换和增加
util.on({
e1: function(othis){ // 重置事件 e1
alert(othis.html() + ' - replace')
},
e3: function(othis){ // 增加事件 e3
alert(othis.html())
}
});
//测试是否重复绑定
util.event('lay-active', {
e1: function(othis){
alert(othis.html() + '新事件')
}
// 自定义触发事件的元素属性名、自定义触发事件的方式
util.on('lay-active', {
e4: layui.throttle(function(othis) {
layer.tips(othis.html(), this);
}, 3000) // 3s 内不重复执行
}, {
trigger: 'mouseenter'
});
//测试绑定新事件
util.event('lay-active2', {
e4: function(othis){
alert(othis.html())
// 倒计时
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);
// 转换日期格式
var timer = null
var toDateString = function (format) {
@ -139,7 +151,7 @@ layui.use(['util', 'layer'], function(){
timer = setInterval(() => {
toDateString($('#test2').val())
}, 50)
});
</script>
</body>

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 copyDest = argv.dest
? path.join(argv.dest, (argv.vs ? '/' + pkg.version : ''))
: rlsDest;
// 输出目录
const dest = ({
dist: './dist',
rls: dir.rls + '/layui'
}[argv.dest || 'dist'] || argv.dest) + (argv.vs ? '/'+ pkg.version : '');
// 打包目标路径
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));
};
// 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'));
};
.pipe(gulp.dest(copyDest));
});
// 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

@ -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 vendored

@ -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;

157
src/modules/lay.js

@ -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

2
src/modules/laydate.js

@ -1405,7 +1405,7 @@
that.limit({
elem: lay(that.footer).find(ELEM_CONFIRM),
date: that[startEnd],
inedx: 0,
index: 0,
time: ['hours', 'minutes', 'seconds']
});
}

1
src/modules/layer.js

@ -1598,6 +1598,7 @@ layer.photos = function(options, loop, key){
} else {
zoomElem.eq(1).trigger('click');
}
e.preventDefault();
});
};

24
src/modules/laytpl.js

@ -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);
});
});

29
src/modules/table.js

@ -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 风格
});
// 行工具条操作事件

72
src/modules/util.js

@ -383,33 +383,61 @@ layui.define('jquery', function(exports){
}
},
// 批量事件
event: function(attr, obj, eventType){
var _body = $('body');
eventType = eventType || 'click';
// 记录事件回调集合
obj = util.event[attr] = $.extend(true, util.event[attr], obj) || {};
// 清除委托事件
util.event.UTIL_EVENT_CALLBACK = util.event.UTIL_EVENT_CALLBACK || {};
_body.off(eventType, '*['+ attr +']', util.event.UTIL_EVENT_CALLBACK[attr])
// 绑定委托事件
util.event.UTIL_EVENT_CALLBACK[attr] = function(){
var othis = $(this);
var key = othis.attr(attr);
(typeof obj[key] === 'function') && obj[key].call(this, othis);
};
/**
* 批量事件
* @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'; // 默认属性名
}
// 更多选项
options = $.extend({
elem: 'body',
trigger: 'click'
}, typeof options === 'object' ? options : {
trigger: options // 兼容旧版
});
// 清除旧事件,绑定新事件
_body.on(eventType, '*['+ attr +']', util.event.UTIL_EVENT_CALLBACK[attr]);
var elem = options.elem = $(options.elem);
var attrSelector = '['+ attr +']';
var CALLBACK = 'UTIL_ON_CALLBACK';
if (!elem[0]) return; // 若委托元素不存在
// 根据 attr 记录事件集合
events = util.on[attr] = $.extend(true, util.on[attr], events) || {};
// 清除事件委托
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 obj;
return events;
}
};
util.on = util.event;
// 兼容旧版
util.event = util.on;
// 输出接口
exports('util', util);

Loading…
Cancel
Save