Compare commits

...

144 Commits

Author SHA1 Message Date
8ea9d9e4da 文档 2024-10-09 08:38:07 +08:00
b6c6d19d96 文档 2024-10-09 08:36:17 +08:00
f4fe3db2b8 table增加排序后回调 2024-10-09 08:33:54 +08:00
c3ac588bdb 修复table重新渲染的内存泄漏 2024-10-08 16:10:23 +08:00
526d1cbec1 穿梭框增加禁用选择所有,table增加只刷新数据不刷新dom 2024-04-24 14:23:04 +08:00
5e10d720e6 1 2023-10-18 14:41:20 +08:00
4f40e560bb add 修改文档 2023-08-01 11:33:56 +08:00
bc8d400b01 add table onColumnsWidth 修改宽度之后回调返回cols 2023-08-01 11:20:58 +08:00
6a0e0fd6b1 fix table 排序后多选不能使用 2023-05-09 18:33:32 +08:00
096ee2fc96 layer 弹出层 确定按钮节流 2023-02-20 11:48:16 +08:00
2458e523ba 筛选 2022-11-15 15:49:19 +08:00
cae4bc1af0 合计全部页 2022-11-11 09:45:21 +08:00
2ae835ecfe 未修复高度 2022-11-11 09:25:45 +08:00
ee757f7f07 Merge branch 'bagdata' into bagdata-script 2022-10-19 16:09:44 +08:00
贤心
f1140fa78f release v2.7.1 2022-06-27 01:34:38 +08:00
贤心
ab940e5df3 update 2022-06-27 01:33:11 +08:00
贤心
9dc31fa032 release v2.7.1 2022-06-27 01:01:51 +08:00
贤心
5822042a80 Merge branch 'main' of github.com:layui/layui 2022-06-27 00:29:33 +08:00
贤心
8cf6798137 update 2022-06-27 00:29:24 +08:00
贤心
42738cebf2
Merge pull request #1054 from sunxiaobin89/main 2022-06-26 17:59:49 +08:00
sunxiaobin89
16e02f99ea
Merge branch 'layui:main' into main 2022-06-26 14:33:06 +08:00
sunxiaobin89
146adba3fe table 修复reloadData之后出现分页栏丢失的问题 2022-06-26 14:32:25 +08:00
贤心
37443a5c45
Merge pull request #1053 from sunxiaobin89/main 2022-06-26 00:35:41 +08:00
sunxiaobin89
084a37a8ee table 修复size: sm|lg的表格行高度异常问题 2022-06-25 16:20:24 +08:00
贤心
cb10f2a36f release v2.7.0 2022-06-24 23:13:11 +08:00
贤心
33f79e5ab8 update 2022-06-24 23:09:50 +08:00
贤心
08e4bf4191
fix size error (#1051)
fix size error
2022-06-24 22:51:18 +08:00
Allen
eb8c9ce5c2
紧急修复2.7.0引入的table组件触发console报错的问题
issues:https://gitee.com/sentsim/layui/issues/I5E270
2022-06-24 21:46:59 +08:00
贤心
a608becd31 release 2.7.0 2022-06-24 15:37:51 +08:00
贤心
4ba95a164c update 2022-06-24 15:34:45 +08:00
贤心
96f5c38971 update 2022-06-24 10:16:50 +08:00
贤心
691cb5811f update 2022-06-23 01:54:06 +08:00
贤心
8e5a5dae02 update 2022-06-23 00:05:18 +08:00
贤心
3b8f6a0477 update 2022-06-23 00:03:41 +08:00
贤心
8e66f49320
add always value for autoplay (#1049) 2022-06-22 12:20:44 +08:00
sunxiaobin89
37b4c404ea carousel autoplay新增'always'支持 2022-06-22 11:43:18 +08:00
贤心
094cfc03b1 update 2022-06-22 01:40:14 +08:00
贤心
2a3f19eff8 update 2022-06-22 01:39:26 +08:00
贤心
b400a9befb update 2022-06-22 01:07:12 +08:00
贤心
c49197bb9f Merge branch 'main' of github.com:layui/layui 2022-06-21 00:25:16 +08:00
贤心
26df2dc43b update 2022-06-21 00:25:07 +08:00
贤心
7e98d87e98
修复 eachCols 方法遍历不到隐藏列的问题 2022-06-21 00:24:17 +08:00
sunxiaobin89
f88626e73a 修复eachCols遍历不到隐藏列的问题 2022-06-21 00:19:48 +08:00
贤心
29ba7f7cdd Merge branch 'main' of github.com:layui/layui 2022-06-21 00:02:55 +08:00
贤心
7076f801f7 update 2022-06-21 00:02:39 +08:00
贤心
8477948c00
Merge pull request #1046 from sunxiaobin89/main
修复一些问题
2022-06-21 00:02:04 +08:00
sunxiaobin89
9d689b3b89 修复子列有隐藏的情况下出现列宽不正确的问题 2022-06-20 23:58:20 +08:00
贤心
8033abc420 Merge branch 'main' of github.com:layui/layui 2022-06-20 20:21:52 +08:00
贤心
e13e7a61ac update 2022-06-20 20:21:40 +08:00
sunxiaobin89
a69102637b 完善reloadData支持参数的名单 2022-06-20 20:19:45 +08:00
贤心
e0619625fe
Merge pull request #1036 from sunxiaobin89/main
修复部分 bug 以及新增一些功能
2022-06-20 20:13:36 +08:00
贤心
da7b024a52
Merge pull request #1042 from hotlcc/feature/develop-select-search-filter-group
新增select分组选择框在开启搜索时支持过滤未匹配到分组元素的分组
2022-06-20 19:57:41 +08:00
贤心
42e7a85f0b
Merge pull request #1044 from BigTomM/master
feat(table): 新增单元格编辑时textarea标签选项
2022-06-20 19:30:46 +08:00
贤心
a1214cb4e4
Merge pull request #1043 from hotlcc/feature/develop-table-cell-multiline-open
table单元格存在多行文本时支持点击“...”展开
2022-06-20 19:25:40 +08:00
贤心
92b3ed8651
Merge pull request #1041 from hotlcc/feature/develop-fix-position-logic
位置计算逻辑完备性处理,可以解决在frame中底部laydate下端被遮挡的问题。
2022-06-20 19:16:35 +08:00
贤心
332c8447ad
Merge pull request #701 from zhengmz/patch-1
修正 table 样式在 ie8 无法正常显示
2022-06-20 19:08:05 +08:00
BigTomM
d5ed4a4c42 feat(table): 新增单元格编辑时textarea标签选项
默认是input标签,现在增加了textarea标签选项,能丰富做表格编辑项目时的选择。
2022-06-20 18:42:30 +08:00
贤心
ad3f441e5b
Merge pull request #576 from bourne7/master
table 的合计行现在可以指定保留的小数点位了。如果不指定的话就是默认的 2 位,可以通过参数 totalRowDecimalScale 来指定。
2022-06-20 16:55:44 +08:00
贤心
9bcfa554a6
Merge pull request #1020 from lordGuan/master
fix:土耳其语 isInput 判断
2022-06-20 15:55:13 +08:00
sunxiaobin89
b83f7d376a 穿梭组件新增双击穿梭功能 2022-06-19 16:37:06 +08:00
sunxiaobin89
afccd752c9 laydate 添加weekStart支持设置一周的开始 2022-06-19 14:08:51 +08:00
sunxiaobin89
6b2b6a8fa4 调整reloadData的一些细节 2022-06-19 11:03:17 +08:00
岁月小偷
ac990cbd53 Merge remote-tracking branch 'origin/main' 2022-06-19 02:33:02 +08:00
岁月小偷
62ace24d30 删除多余的测试文件 2022-06-19 02:32:34 +08:00
sunxiaobin89
22572ff39d
Delete user.json 2022-06-19 02:29:36 +08:00
岁月小偷
d175d0d8eb 添加两个测试json文件 2022-06-19 02:17:53 +08:00
岁月小偷
ba5f7891d1 修复部分bug以及新增一些功能
1、layui 添加unuse方法用于注销已存在的模块
2、table 添加reloadData方法用于重载数据
3、table 修复table.exportFile报错
4、table 添加editTrigger配置,可以设定触发单元格编辑的方式为click(默认)或dblclick
5、form 添加doVerify方法支持主动调用表单验证,支持特定范围内表单输入验证
6、form form.render方法新增对特定节点的渲染支持,除了以前设置类型和表单范围还可以直接对需要渲染的节点对象进行渲染
7、form 修复表单验证在移动端检验到不满足要求的表单元素没有红框显示的问题
2022-06-19 02:10:15 +08:00
Lawrence Peng
89bc721fe9
Merge branch 'layui:main' into master 2022-06-17 14:24:21 +08:00
Allen
37508c6fb1
table单元格存在多行文本时支持点击“...”展开
通常情况下一些数据是有多行的,比如“备注”等,多行数据在后端是\n,返回到前端时由于table单元格无法处理\n换行,那么就需要手动处理问<br>,这个时候虽然支持换行了,但是如果第一行数据的长度未超过限制,就不会显示“...”展开按钮,也就无法查看完整数据。
2022-06-17 02:05:11 +08:00
Allen
b66e1dfa7a
更新搜索选择框的示例文件
更新搜索选择框的示例文件
2022-06-17 01:45:50 +08:00
Allen
afe4f0f73e
新增select分组选择框在开启搜索时支持过滤未匹配到分组元素的分组
目前select分组选择框在开启搜索时,如果一个分组下的所有元素全都不匹配搜索关键字,会仍然展示该分组,影响使用体验。该提交解决了此问题。
2022-06-17 01:28:49 +08:00
Allen
3202e33ece
位置计算逻辑完备性处理,可以解决在frame中底部laydate下端被遮挡的问题。
位置计算逻辑完备性处理,可以解决在frame中底部laydate下端被遮挡的问题。
2022-06-17 01:04:11 +08:00
岁月小偷
af4ab7f93a 修复复杂表头的表格表头和字段列错位的问题 2022-06-08 21:13:08 +08:00
贤心
ff70a461fb
Update README.md 2022-06-08 11:12:06 +08:00
贤心
3751f0495c
Update README.md 2022-06-08 11:09:20 +08:00
贤心
bcce0d2104 update 2022-06-08 01:22:53 +08:00
贤心
2fa3777be9 update 2022-06-08 01:21:33 +08:00
贤心
0b57b81707
Merge pull request #1034 from sunxiaobin89/main
修复复杂表头的表格表头和字段列错位的问题
2022-06-08 01:15:09 +08:00
岁月小偷
b79f66c529 修复复杂表头的表格表头和字段列错位的问题 2022-06-08 00:46:05 +08:00
贤心
b56e83a0c4
Merge pull request #1033 from sunxiaobin89/main
Fix some issues with laydate
2022-06-07 22:28:44 +08:00
岁月小偷
0431f92e92 1. laydate 修复点击页面的其他区域无法关闭已经打开的日期选择面板的问题
2. laydate 事件触发时候添加限制,避免trigger为click已经弹出面板的时候点选触发节点中的文本的时候日期选择面板闪一下的问题
2022-06-07 20:07:11 +08:00
贤心
95359a3565 update 2022-06-05 23:55:31 +08:00
贤心
411da3947f
Merge pull request #881 from juneszh/patch-3
修复拖拽上传时 index 为 0 的bug
2022-06-01 01:07:35 +08:00
贤心
abb387250c update 2022-05-27 07:28:25 +08:00
贤心
d744fea2a3 Minor modification 2022-05-25 00:46:38 +08:00
贤心
815df5a260 revised docs 2022-05-25 00:36:47 +08:00
贤心
2d211cdf2f add docs 2022-05-25 00:15:38 +08:00
贤心
a03792c9fb Minor modification 2022-05-24 18:19:06 +08:00
贤心
a061579f29 update 2022-05-22 08:17:44 +08:00
贤心
3812997373 Minor modification 2022-05-18 23:36:23 +08:00
贤心
29617041d1 Delete unnecessary descriptions 2022-05-18 23:33:36 +08:00
贤心
f034c5b0dc remove invalid file 2022-05-18 23:27:05 +08:00
贤心
89238b79cd update 2022-05-18 23:24:00 +08:00
贤心
db743c81c8 update 2022-05-18 22:56:32 +08:00
贤心
e09f2c05a1 update 2022-05-18 22:54:24 +08:00
贤心
902aea37d9 update 2022-05-18 22:35:13 +08:00
Guoli Guan
fa9c940c62 fix:土耳其语toLocaleLowerCase无法匹配正则 2022-04-20 17:48:50 +00:00
bourne7
2c9625db4f Merge branch 'sentsin-master' 2022-04-07 17:23:03 +08:00
bourne7
0fed81d962 Merge branch 'master' of https://github.com/sentsin/layui into sentsin-master 2022-04-07 17:21:30 +08:00
贤心
ce805ee6b3 chore: Minor modification 2022-04-03 23:04:16 +08:00
贤心
0e849e62f4 chore: Minor modification 2022-04-03 22:56:54 +08:00
贤心
8abbe9722d chore: Minor modification 2022-04-03 22:37:45 +08:00
贤心
0acae08728 corrected 2022-03-20 11:47:18 +08:00
贤心
abdb8c9224 chore: update description 2022-03-16 10:00:42 +08:00
贤心
dd98c61b0d chore: update description 2022-03-16 09:57:56 +08:00
贤心
36eec76819 chore: update description 2022-03-16 09:55:53 +08:00
贤心
5764af26d5 chore: update description 2022-03-16 09:50:26 +08:00
贤心
6f7e776d2d chore: update description 2022-03-16 09:43:58 +08:00
贤心
20a12794dd chore: update description 2022-03-16 09:42:53 +08:00
贤心
0dafb93a43 chore: update description 2022-03-16 09:38:44 +08:00
贤心
0e85e2cdc7 chore: update 2022-03-16 09:23:03 +08:00
贤心
ccc5de7775 delete unnecessary files 2022-03-16 09:12:58 +08:00
贤心
40a0c5b25e delete unnecessary files 2022-03-16 09:05:58 +08:00
贤心
cd55717ee2 Merge branch 'master' of github.com:sentsin/layui
Merge pull request #868
2021-10-26 19:50:13 +08:00
贤心
b16bc5a58a update doc links 2021-10-26 19:44:46 +08:00
贤心
6a610cbe78
Merge pull request #868 from guozhenyi/patch-1
修复:修复tree组件的【折叠/展开】图标在点击时不切换状态的问题
2021-06-07 14:16:22 +08:00
贤心
7376bbe00d update 2021-05-31 08:57:00 +08:00
juneszh
7ddc0a39d6
Update upload.js
修复拖拽上传时index为0的bug
2021-05-26 17:13:20 +08:00
贤心
b5f6f89cfe update 2021-05-18 21:53:51 +08:00
贤心
5667a18d40 update 2021-05-18 21:22:28 +08:00
贤心
665f21b028 update 2021-05-18 21:20:45 +08:00
贤心
823a622c77 chore: update 2021-05-18 03:58:53 +08:00
贤心
fc09eef635 chore: update 2021-05-18 02:42:31 +08:00
贤心
fdba3194fa 2.6.7 2021-05-08 21:23:35 +08:00
贤心
d49b898c17 chore: fixed an error 2021-05-08 21:07:11 +08:00
贤心
5221ee5377 chore: Fixed an error 2021-05-08 21:04:27 +08:00
Jerry
e9b5cc5f30
修复:修复tree组件的【折叠/展开】图标在点击时不切换状态的问题
在使用tree组件时,点击【折叠/展开】图标时,没有如预期切换状态。
在layui 2.5.6的版本没有问题,在layui 2.6.5的版本有问题,通过查看源码,发现这里多了个 ">" 选择器。
2021-05-08 17:54:59 +08:00
贤心
c3f3ec8612 chore: update 2021-05-08 12:30:00 +08:00
贤心
aeebdc4223 update 2021-05-08 06:31:19 +08:00
贤心
726cdd9ba5 update 2021-04-22 10:22:45 +08:00
贤心
0a433bf2e4 chore: update tools 2021-04-07 13:41:16 +08:00
贤心
d4784ca84e chore: update tools 2021-04-07 11:20:16 +08:00
贤心
9d4cf6ef19 chore: update tools 2021-04-07 01:18:07 +08:00
贤心
05568a2c4c chore: update tools 2021-04-07 01:15:22 +08:00
贤心
92653b85b4 chore: update tools 2021-04-07 01:14:47 +08:00
贤心
9ec6022eb9 chore: update tools 2021-04-07 01:00:21 +08:00
贤心
fbca6414ac chore: update tools 2021-04-07 00:56:02 +08:00
贤心
58ac8bef13 chore: update tools 2021-04-07 00:52:30 +08:00
贤心
757beaeb44 chore: skip 2021-04-07 00:38:30 +08:00
贤心
a03e45eaf3 chore:update tools 2021-04-07 00:33:58 +08:00
贤心
5e25fffe8f update 2021-04-06 22:34:23 +08:00
贤心
41a47c6300 update 2021-04-06 16:01:23 +08:00
zhengmz
0f6ee885f1
修正 table 样式在 ie8 无法正常显示
因 ie8 不支持 `nth-child(even)` 造成那一段样式都在 ie8 无法正常显示

现将其单独写不行,互相不影响。这样,在 ie8 下可以正常显示其他样式。
2020-05-13 21:08:42 +08:00
bourne7
4d400a369d table的合计行现在可以指定保留的小数点位了。如果不指定的话就是默认的2位,可以通过参数 totalRowDecimalScale 来指定。 2019-10-22 09:24:04 +08:00
85 changed files with 9806 additions and 9720 deletions

11
.gitignore vendored
View File

@ -7,6 +7,7 @@
*.diff
*.patch
*.bak
*.bat
.DS_Store
Thumbs.db
.svn/
@ -17,12 +18,8 @@ Thumbs.db
.npmignore
node_modules/
_site/
run.bat
dir.txt
.git/
release/
build/
rc/
coverage/
/release/
/v/
package-lock.json

View File

@ -1,18 +0,0 @@
language: node_js
node_js:
- node
dist: trusty
addons:
sauce_connect:
username: layui
jwt:
secure: "c+I/AGPj+9cdZOtwGv9eFBdFNlo/BtSEnZ/mGXBLM2+FUn8Dptvhqy1XalRBul3sNiCyv2lNtcZPGw0kirI4EjGiXFfqghq9psvwOchkNM+bFxAiH+uRYCVb1ouDbpAh0w4d/nxpB11fPdVNzudwbiI/ii8LNm1sDDnJOklHiuzWBgOVN2jkzNRapacLfto6bWjnyS4r/zElLwnKpXlN6cIJFzYBU1f/RS68xaHwr/9+wvf5gNzL7OmmiIxl+UJJMejoK3G7I6DTiXyosJxsnljSxG0zbDSDL9lzPeQjFClya25ubbCFPv/UADlVAlz5Y4SLIaTUaRWD7tVphpku5S9XBwIopRQBdtp6y1Ebh/F7pDAiuN8lHzvkr6z++ld9nVcSJppSWN/tyibN7b+C7m6TyreVMHFjw+egAbd3wPVgrD30Vswu9vQXyVydcRJiP295VclgaHobdZKEwrqK7mujsOVOlZEoZWm2B+MLGfvYIjhVdpcRGlAZN+VvA+ea93t/poY1LB1/qH0vF2jMNa3ZI6AWrZaaTbToMUEj6QB9tnOGnGvINOGJDamMMB6aeCLaEgZzRqvTYXgzJAi1kYQKkCL//v3Z6od5eDBUVgMEOkTIchPjSDX5lwMedroPwnFql9ArIWnm7mLHQToEArOoKQhSlFOx+sA/nortCL4="
sudo: false
cache:
directories:
- node_modules
script:
- npm run test:cov
- npm run test:sauce
after_script:
- npm install coveralls && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"svn.ignoreMissingSvnWarning": true
}

View File

@ -1,24 +1,3 @@
# 更新日志
* [2.6.x](https://www.layui.com/doc/base/changelog.html#2-6-x)
* [2.5.x](https://www.layui.com/doc/base/changelog.html#2-5-x)
* [2.4.x](https://www.layui.com/doc/base/changelog.html#2-4-x)
* [2.3.0](https://www.layui.com/doc/base/changelog.html#2-3-0)
* [2.2.6](https://www.layui.com/doc/base/changelog.html#2-2-6)
* [2.2.5](https://www.layui.com/doc/base/changelog.html#2-2-5)
* [2.2.4](https://www.layui.com/doc/base/changelog.html#2-2-45)
* [2.2.3](https://www.layui.com/doc/base/changelog.html#2-2-3)
* [2.2.2](https://www.layui.com/doc/base/changelog.html#2-2-2)
* [2.2.1](https://www.layui.com/doc/base/changelog.html#2-2-1)
* [2.2.0](https://www.layui.com/doc/base/changelog.html#2-2-0)
* [2.1.7](https://www.layui.com/doc/base/changelog.html#2-1-7)
* [2.1.6](https://www.layui.com/doc/base/changelog.html#2-1-6)
* [2.1.5](https://www.layui.com/doc/base/changelog.html#2-1-5)
* [2.1.4](https://www.layui.com/doc/base/changelog.html#2-1-4)
* [2.1.3](https://www.layui.com/doc/base/changelog.html#2-1-3)
* [2.1.2](https://www.layui.com/doc/base/changelog.html#2-1-2)
* [2.1.1](https://www.layui.com/doc/base/changelog.html#2-1-1)
* [2.1.0](https://www.layui.com/doc/base/changelog.html#2-1-0)
* [2.0.2](https://www.layui.com/doc/base/changelog.html#2-0-2)
* [2.0.1](https://www.layui.com/doc/base/changelog.html#2-0-1)
* [2.0.0](https://www.layui.com/doc/base/changelog.html#2-0-0)
https://github.com/layui/layui/releases

14
DISCLAIMER.md Normal file
View File

@ -0,0 +1,14 @@
# Layui 《免责声明》
> 任何用户在使用由 layui 技术开发团队以下简称「本团队」研发的系列开源界面框架以下简称「layui 开源界面框架」)前,请您仔细阅读并透彻理解本声明。您可以选择不使用 layui 开源界面框架,若您一旦使用 layui 开源界面框架,您的使用行为即被视为对本声明全部内容的认可和接受。
1. layui 开源界面框架是一款开源免费的 Web UI 纯静态框架 ,主要用于更高效地开发网页界面。且 layui 开源界面框架并不具备「互联网接入、网络数据存储、通讯传输以及窃取用户隐私」中的任何一项与用户数据等信息相关的动态功能layui 开源界面框架仅是 UI 组件或素材类的本地资源。
2. layui 开源界面框架仅属于 Web 前端的 UI 组件库,并不涉及任何后台程序代码;其尊重并保护所有用户的个人隐私权,不窃取任何用户计算机中的信息。更不具备用户数据存储等网络传输功能。
3. 您承诺秉着合法、合理的原则使用 layui 开源界面框架,不利用 layui 开源界面框架进行任何违法、侵害他人合法利益等恶意的行为,亦不将 layui 开源界面框架运用于任何违反我国法律法规的 Web 平台。
4. 任何单位或个人因下载使用 layui 开源界面框架而产生的任何意外、疏忽、合约毁坏、诽谤、版权或知识产权侵犯及其造成的损失 (包括但不限于直接、间接、附带或衍生的损失等),本团队不承担任何法律责任。
5. 用户明确并同意本声明条款列举的全部内容,对使用 layui 开源界面框架可能存在的风险和相关后果将完全由用户自行承担,本团队不承担任何法律责任。
6. 任何单位或个人在阅读本免责声明后应在《MIT 开源许可证》所允许的范围内进行合法的发布、传播和使用 layui 开源界面框架等行为,若违反本免责声明条款或违反法律法规所造成的法律责任(包括但不限于民事赔偿和刑事责任),由违约者自行承担。
7. 本团队对 layui 开源界面框架拥有知识产权(包括但不限于商标权、专利权、著作权、商业秘密等),上述产品均受到相关法律法规的保护。
8. 任何单位或个人不得在未经本团队书面授权的情况下对 layui 开源界面框架本身申请相关的知识产权。
9. 如果本声明的任何部分被认为无效或不可执行,则该部分将被解释为反映本团队的初衷,其余部分仍具有完全效力。不可执行的部分声明,并不构成我们放弃执行该声明的权利。
10. 本团队有权随时对本声明条款及附件内容进行单方面的变更,并以消息推送、网页公告等方式予以公布,公布后立即自动生效,无需另行单独通知;若您在本声明内容公告变更后继续使用的,表示您已充分阅读、理解并接受修改后的声明内容。

View File

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2017 layui
Copyright (c) 2016 layui
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

161
README.md
View File

@ -1,97 +1,106 @@
<p align=center>
<a href="http://www.layui.com">
<img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="360">
<p align="center">
<a href="https://layui.github.io/">
<img src="https://unpkg.com/outeres@0.0.6/img/layui/icon-1.png" width="81" alt="Layui">
</a>
</p>
<p align=center>
Classic modular front-end UI framework
<h1 align="center">Layui</h1>
<p align="center">
Classic modular front-end UI library
</p>
<p align="center">
<a href="https://travis-ci.org/sentsin/layui"><img alt="Build Status" src="https://img.shields.io/travis/sentsin/layui/master.svg"></a>
<a href="https://saucelabs.com/beta/builds/7e6196205e4f492496203388fc003b65"><img src="https://saucelabs.com/buildstatus/layui" alt="Build Status"></a>
<a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
</p>
<p align="center">
<a href="https://saucelabs.com/beta/builds/7e6196205e4f492496203388fc003b65"><img src="https://saucelabs.com/browser-matrix/layui.svg" alt="Browser Matrix"></a>
<p align="center">
<a href="https://www.npmjs.com/package/layui">
<img src="https://img.shields.io/npm/v/layui" alt="Version">
</a>
<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 Brotli size" 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 Brotli size" alt="JS Brotli size">
</a>
</p>
---
layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式极易上手拿来即用。其外在极简却又不失饱满的内在体积轻盈组件丰盈从核心代码到使用方法的每一处细节都经过精心雕琢非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为后端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
## 返璞归真
layui 定义为“经典模块化”,并非是自吹她自身有多优秀,而是有意避开当下 JS 社区的主流方案,试图以最简单的方式去诠释高效!<em>她的所谓经典,是在于对返璞归真的执念</em>,她以当前浏览器普通认可的方式去组织模块!我们认为,这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的最佳指引。所以 layui 本身也并不是完全遵循于 AMD 时代,准确地说,她试图建立自己的模式,所以你会看到:
```js
//layui模块的定义
layui.define([mods], function(exports){
//……
exports('mod', api);
});
//layui模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
//……
});
```
没错,她具备 AMD 的影子,又并非受限于 CommonJS 的那些条条框框layui 认为这种轻量的组织方式,比 WebPack 更符合绝大多数场景。所以她坚持采用经典模块化也正是能让人避开工具的复杂配置回归简单安静高效地撸一会原生态的HTML、CSS、JavaScript。
但是 layui 又并非是 Requirejs 那样的模块加载器,而是一款 UI 解决方案,她与 Bootstrap 最大的不同恰恰在于她糅合了自身对经典模块化的理解。
Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式极易上手拿来即用。其风格简约而内在丰盈利于实现网页界面的快速构建。Layui 区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,他们无需涉足各类构建工具,只需面向浏览器本身,即可轻松掌握页面所需的元素与交互,进而信手拈来。
## 快速上手
获得 layui 后,将其完整地部署到你的静态资源项目目录,你只需要引入下述两个文件:
```
./layui/css/layui.css
./layui/layui.js
```
这是一个基本的入门页面:
使用 Layui 只需在页面中引入核心文件即可:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用 layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>开始使用 Layui</title>
<link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- HTML -->
<script src="./layui/layui.js"></script>
<script>
// 使用组件
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
// 欢迎语
layer.msg('Hello World');
});
</script>
</body>
</html>
```
## [阅读文档](http://www.layui.com/)
从现在开始,尽情地拥抱 layui 吧!但愿她能成为你长远的开发伴侣,化作你方寸屏幕前的亿万字节!
## 使用文档
[**最新文档**](https://layui.github.io)
## 贡献者
> 大概是因为 layui 让开发者变得更懒,所以贡献者才这么少?
> 好的,姑且就这样认为吧。
[![Giteye chart](https://chart.giteye.net/gitee/sentsin/layui/PMFQFJCX.png)](https://giteye.net/chart/PMFQFJCX)
## 项目参与
[项目参与者](https://github.com/layui/layui/graphs/contributors)
## 相关
[官网](http://www.layui.com/)、[更新日志](http://www.layui.com/doc/base/changelog.html)
## 破旧立新 🌱
layui 原官网已于2021年10月13日下线。详见
> 1. <a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png" target="_blank">layui 原官网下线公告</a> 2. <a href="https://www.zhihu.com/question/488668647/answer/2159962082" target="_blank">layui 原官网为什么要下线?</a>
---
鉴于 Layui 相对庞大的受众群体,从此 Github 和 Gitee 平台将支撑起 Layui 的后续。<br>
**Layui 将继续陪伴着所有为之热爱的人们共同去探索和论证「Layui 开发模式的可行性」**
## 维护修改问题
1. table排序后多选无法选中
2. table合计将统计所有数据而不是当前页
3. longing修改动画效果
4. 修改结合soultable重载后高度问题
5. 修正table窗口变更大小可能出现内存泄漏问题
## 维护增加功能
1. table 增加`getData()`函数方便获取当前table所有数据包括行内输入之后的值
2. table 增加`onColumnsWidth()`函数可以让table列宽手动调整后返回调整后的cols方便保存手动调整后的状态
3. table 增加`sortCallback`属性,用于排序后回调函数,方便获取排序后处理下拉等
## 使用示例
```javascript
// getData()
layui.table.getData('tableId')
// onColumnsWidth
let tab = table.render(config)
tab.onColumnsWidth(callback)
// 视情况添加layui.table.onColumnsWidth 暂时没有用到
table.render({
...,
sortCallback: function (res, curr, count) {
}
})
```

View File

@ -1,22 +0,0 @@
{
"name": "layui",
"main": "dist/layui.js",
"version": "2.6.3",
"homepage": "https://github.com/sentsin/layui",
"authors": [
"sentsin <xu@sentsin.com>"
],
"description": "Classic modular front-end component library",
"moduleType": [
"amd",
"globals"
],
"keywords": [
"layui",
"ui",
"JavaScript Framework",
"toolkit",
"front-end component library"
],
"license": "MIT"
}

2
dist/css/layui.css vendored

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-view{display:block;position:relative;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#fafafa;color:#333;font-family:Courier New;font-size:13px}.layui-code-h3{position:relative;padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee;font-size:12px}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0c0c0c;border-left-color:#3f3f3f;background-color:#0c0c0c;color:#c2be9e}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3f3f3f;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

8935
dist/layui.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +0,0 @@
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,11
[InternetShortcut]
URL=https://gitee.com/sentsin/layui/
IDList=
HotKey=0

View File

@ -1,6 +0,0 @@
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,11
[InternetShortcut]
URL=https://github.com/sentsin/layui/
IDList=
HotKey=0

View File

@ -1,9 +0,0 @@
# 注意事项:
* 页面的 HTML 代码必须是 `<!DOCTYPE html>` 开头
* 除 IE6、7 外,所有浏览器均支持
# 在线文档
[https://www.layui.com/doc/](https://www.layui.com/doc/)
# 仓库地址
[Github](https://github.com/sentsin/layui/) | [Gitee](https://gitee.com/sentsin/layui) | [NPM](https://www.npmjs.com/package/layui-src)

View File

@ -1,8 +0,0 @@
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,2
[InternetShortcut]
URL=http://www.layui.com/demo/
IDList=
HotKey=0
IconIndex=0
IconFile=C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

View File

@ -1,8 +0,0 @@
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,2
[InternetShortcut]
URL=http://www.layui.com/doc/
IDList=
HotKey=0
IconIndex=0
IconFile=C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

View File

@ -28,8 +28,14 @@ resize: none;">
<div id="demo1"></div>
<button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
<button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
<div class="layui-btn-container">
<button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
<button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
</div>
<div class="layui-inline">
<input class="layui-input" id="date1" placeholder="日期">
</div>
<div class="layui-tab" lay-filter="tabDemo">
<ul class="layui-tab-title">
@ -62,6 +68,9 @@ resize: none;">
<script src="../dist/layui.js"></script>
<script>
console.log(layui.$);
//(function(){
layui.use(function(){
var $ = layui.jquery
,layer = layui.layer
@ -69,23 +78,58 @@ layui.use(function(){
,laypage = layui.laypage
,element = layui.element
,transfer = layui.transfer
,util = layui.util;
,util = layui.util
,laydate = layui.laydate;
layer.msg('hello');
layer.msg('hello layui');
//layer.closeAll();
//自动测试
(function(run){
if(!run) return;
var timer = setInterval(function(){
location.reload();
}, 1000);
$.ajax({
url: './all.html'
,beforeSend: function(){
layer.load();
}
,success: function(){
layer.closeAll('loading', function(){
setTimeout(function(){
if($('.layui-layer-loading').length){
console.error('layer close 异常');
clearInterval(timer);
}
}, 200);
});
}
});
})(0);
laypage.render({
elem: 'demo1'
,count: 100 //总页数
});
console.log(lay('#footer').html());
laydate.render({
elem: '#date1'
})
//测试加载非内置模块
/*
layui.config({
base: 'extends/'
}).extend({
mod1: 'mod1'
,mod2: 'mod2'
}).use('mod1');
*/
//定义标题及数据源
@ -150,7 +194,21 @@ layui.use(function(){
});
}
});
});
//})();
</script>
<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<div id="footer">© footer</div>
</body>
</html>

128
examples/base.html Normal file
View File

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基础方法测试用例 - layui</title>
<link href="../src/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container" style="padding: 30px 0;">
<div class="" style="padding: 30px 0;">
<blockquote class="layui-elem-quote" style="color: #666;">
点击按钮开始测试,测试结果打开浏览器控制台查看
</blockquote>
<div class="layui-btn-container">
<button class="layui-btn" lay-on="sort">layui.sort</button>
<button class="layui-btn" lay-on="type">layui.type</button>
<button class="layui-btn" lay-on="isArray">layui.isArray</button>
<button class="layui-btn" lay-on="extend">lay.extend</button>
</div>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use(['lay', 'util'], function(){
var lay = layui.lay
,util = layui.util;
//事件
var style = 'color: orange; font-size: 16px;';
util.event('lay-on', {
sort: function(){
//sort
console.log('%c> layui.sort: ', style);
console.log(
'数字-整数型',
layui.sort([{a: 3},{a: 0},{a: 0},{a: -1},{a: -5},{a: 6},{a: 9},{a: -333333}], 'a')
);
console.log(
'数字-浮点型',
layui.sort([{a: 3.5},{a: 0.5},{a: 0.5},{a: -1.5},{a: -5.5},{a: 6.5},{a: 9.5},{a: -333333.5}], 'a')
);
console.log(
'数字-混合型',
layui.sort([{a: 1},{a: 20.5},{a: 20.3},{a: 3},{a: 52},{a: 4.3}], 'a')
);
console.log(
'中文',
layui.sort([{a: '男'},{a: '女'},{a: '男'},{a: '女'},{a: '男'}], 'a')
);
console.log(
'英文',
layui.sort([{a: 'E'},{a: 'B'},{a: 'D'},{a: 'C'},{a: 'A'}], 'a')
);
console.log(
'混合'
,layui.sort([
{a: 3}
,{a: '男'}
,{a: 0}
,{a: 66}
,{a: 99}
,{a: 'C'}
,{a: '女'}
,{a: 3.5}
,{a: 0}
,{a: -1}
,{a: 'B'}
,{a: 5.5}
,{a: '男'}
,{a: 'A'}
,{a: -5}
,{a: '男'}
,{a: 6}
,{a: 9}
], '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 进行比较
);
}
,type: function(){
console.log('%c> layui.type: ', style);
console.log(
'new RegExp()', layui.type(new RegExp()),
'\nnew Date()', layui.type(new Date()),
'\n[]', layui.type([])
);
}
,isArray: function(){
console.log('%c> layui.isArray: ', style);
console.log(
'[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'})
);
}
,extend: 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: 222222, arr: [5]}
)
);
console.log(
lay.extend([], [1,3,5])
);
}
})
});
</script>
</body>
</html>

View File

@ -24,7 +24,7 @@ body{padding: 10px;}
<div class="layui-btn-container">
<a href="" class="layui-btn layui-btn-primary">原始按钮</a>
<a href="" class="layui-btn">默认按钮</a>
<div class="layui-btn">默认按钮</div>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>

View File

@ -20,6 +20,7 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
</head>
<body>
<div class="layui-carousel" id="test1" lay-filter="test1">
<div carousel-item>
<div>条目1</div>
@ -53,13 +54,11 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
<div class="layui-carousel" id="test4">
<div carousel-item>
<div><img src="http://s2.mogucdn.com/mlcdn/c45406/170714_2f9k4a3lgdfb80cie2g7aaba8l4ag_778x440.jpg_900x9999.v1c7E.70.webp"></div>
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170710_3a6jf5f0j24bgcc3i3f36el2a2ckj_778x440.jpg_900x9999.v1c7E.70.webp"></div>
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170714_5e8867724c4bfae8ka6l3a5274h0h_778x440.jpg_900x9999.v1c7E.70.webp"></div>
<div><img src="http://s3.mogucdn.com/mlcdn/c45406/170609_83i077ikhb3023kch5gah5b2il9k3_778x440.jpg_900x9999.v1c7E.70.webp"></div>
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170714_8d301bj507l9la1cjccbabg433beh_778x440.jpg_900x9999.v1c7E.70.webp"></div>
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170710_4kaiaee4j39899b08abc685j2ehk1_778x440.jpg_900x9999.v1c7E.70.webp"></div>
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170710_31a9gb225bga4agf4c9b25a8c8924_778x440.jpg_900x9999.v1c7E.70.webp"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
</div>
</div>
@ -75,6 +74,10 @@ layui.use('carousel', function(){
,index: 2
//,full: true
,arrow: 'always'
,autoplay: 'always'
,change: function(obj){
console.log(obj)
}
//,interval: 5000
//,autoplay: false
//,indicator: 'outside'
@ -82,9 +85,11 @@ layui.use('carousel', function(){
});
//事件
carousel.on('change(test1)', function(res){
console.log(res)
/*
carousel.on('change(test1)', function(obj){
console.log(obj)
});
*/
carousel.render({
elem: '#test2'
@ -105,10 +110,11 @@ layui.use('carousel', function(){
//,full: true
});
// 图片轮播
carousel.render({
elem: '#test4'
,width: '778px'
,height: '440px'
,width: '720px'
,height: '360px'
,interval: 5000
});
});

View File

@ -42,6 +42,7 @@ layui.use('dropdown', function(){
dropdown.render({
elem: '#demo1'
//,align: 'right'
,data: [{
title: 'menu item 1'
,templet: '<i class="layui-icon layui-icon-light"></i> {{d.title}} <span class="layui-badge-dot"></span>'
@ -183,6 +184,7 @@ layui.use('dropdown', function(){
elem: '#demo3'
,content: '自定义内容 123 '
,style: 'background:#666;color:#fff;padding:15px;'
,align: 'center'
,trigger: 'hover'
});

View File

@ -131,8 +131,17 @@ body{padding:20px;}
<br><br>
<blockquote class="layui-elem-quote">Layui正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote layui-text">
<p>Layui - 原生态模块化前端 UI 组件库</p>
<p>Layui - 原生态模块化前端 UI 组件库</p>
</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">
Layui - 原生态模块化前端 UI 组件库
Layui - 原生态模块化前端 UI 组件库
Layui - 原生态模块化前端 UI 组件库
Layui - 原生态模块化前端 UI 组件库
Layui - 原生态模块化前端 UI 组件库
</blockquote>
<fieldset class="layui-elem-field">
<legend>字段集区块 - 默认风格</legend>
@ -165,270 +174,6 @@ body{padding:20px;}
灰色分割线
<hr class="layui-bg-gray">
<br><br>
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd>
<a href="javascript:;">选项3</a>
</dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据<span class="layui-badge-dot"></span></a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<li class="layui-nav-item">
<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img"></a>
</li>
</ul>
<br>
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd>
<a href="javascript:;">选项3</a>
</dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-blue">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">组件一</a></dd>
<dd>
<a href="javascript:;">组件二</a>
</dd>
<dd><a href="javascript:;">组件三</a></dd>
</dl>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd><a href="javascript:;">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<br><br>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
<br><br>
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
</div>
<div class="layui-inline">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
</div>
<div class="layui-tab" lay-filter="test" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
<li>标题7</li>
<li>标题8</li>
</ul>
</div>
@ -438,14 +183,6 @@ body{padding:20px;}
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('tab(test)', function(data){
console.log(this, data);
});
element.on('nav(test)', function(elem){
console.log(elem)
});
element.on('collapse(test)', function(data){
console.log(data);
});

208
examples/element.nav.html Normal file
View File

@ -0,0 +1,208 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>导航 - 常用元素 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding:20px;}
</style>
</head>
<body>
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
</li>
<li class="layui-nav-item"><a href="">大数据<span class="layui-badge-dot"></span></a></li>
<li class="layui-nav-item">
<a href="javascript:;">方案</a>
<dl class="layui-nav-child layui-nav-child-c">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<li class="layui-nav-item">
<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img"></a>
<dl class="layui-nav-child layui-nav-child-r">
<dd><a href="">Your organizations</a></dd>
<dd><a href="">Settings</a></dd>
<hr>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
</ul>
<br>
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item layui-this"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">组件一</a></dd>
<dd>
<a href="javascript:;">组件二</a>
</dd>
<dd><a href="javascript:;">组件三</a></dd>
</dl>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd><a href="javascript:;">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<br><br>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
<br><br><br><br><br><br>
<script src="../src/layui.js"></script>
<script>
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('nav(test)', function(elem){
console.log(elem)
});
});
</script>
</body>
</html>

120
examples/element.tab.html Normal file
View File

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>选项卡 - 常用元素 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding:20px;}
</style>
</head>
<body>
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
</div>
<div class="layui-inline">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
</div>
<ul class="layui-tab-title">
<li class="layui-this"><a href="#1">标题题题题题题1</a></li>
<li><a href="#2">标题题题2</a></li>
<li><a href="#3">标题3</a></li>
<li><a href="#4">标题题题题题题题4</a></li>
<li><a href="#5">标题5</a></li>
<li><a href="#6">标题6</a></li>
<li><a href="#7">标题7</a></li>
<li><a href="#8">标题题题题题题题8</a></li>
</ul>
<div class="layui-tab" lay-filter="test" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
<li>标题7</li>
<li>标题8</li>
</ul>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('tab(test)', function(data){
console.log(this, data);
});
});
</script>
</body>
</html>

View File

@ -4,9 +4,7 @@
layui.define(function(exports){
console.log('mod2.js')
layer.alert(1)
exports('mod2', {
name: 'mod2'
})

View File

@ -25,17 +25,17 @@ img{width: 500px; height: 300px;}
</div>
<div class="demo" style="height: 200px; overflow: auto;">
<img lay-src="http://s16.mogucdn.com/p2/160919/upload_493j665e50b0i0g8j61iie6f5aa5c_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x531.jpg">
<img lay-src="http://s10.mogucdn.com/p2/160918/oj_4hge1j47hl5ie0fljd6d07ha3kj2l_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160914/iz_2lcjk0lbl8la70448hj0jg0l8gde5_305x330.jpg">
<img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg">
<img lay-src="http://s8.mogucdn.com/p1/160721/iz_ifqtszjqgazdsmtfhezdambqgyyde_305x330.jpg">
<img lay-src="http://s18.mogucdn.com/p2/160919/upload_4dh1hfflhi031ll1akh49i5aeldjl_183x213.png">
<img lay-src="http://s8.mogucdn.com/p2/160907/1dq_16e3b4d04ck34g1fb61d5llj47526_175x170.png">
<img lay-src="http://s8.mogucdn.com/p2/160907/1dq_132fe83d4gi1jb6gehc8ibcl6944e_175x170.png">
<div class="demo" style="height: 300px; overflow: auto;">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/error.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
</div>
@ -55,7 +55,7 @@ layui.use('flow', function(){
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg?v='+ (page+i) +'"></li>')
lis.push('<li><img lay-src="https://sentsin.gitee.io/res/images/demo/layer.png?v='+ (page+i) +'"></li>')
}
next(lis.join(''), page < 3);
}, 500);
@ -72,7 +72,7 @@ layui.use('flow', function(){
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg?v='+ (page+i) +'"></li>')
lis.push('<li><img lay-src="https://sentsin.gitee.io/res/images/demo/layer.png?v='+ (page+i) +'"></li>')
}
next(lis.join(''), page < 3);
}, 500);

View File

@ -1,311 +1,411 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单模块 - layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<head>
<meta charset="utf-8">
<title>表单模块 - layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 10px;}
</style>
</head>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 16px;}
</style>
</head>
<body>
<form class="layui-form layui-form-pane1" action="" lay-filter="first">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="required|title" lay-reqText="标题不能为空" required placeholder="请输入标题" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机</label>
<div class="layui-input-block">
<input type="tel" name="phone" lay-verify="required|number" lay-verType="tips" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="email" name="email" lay-verify="email" lay-verType="alert" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">生日</label>
<div class="layui-input-block">
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">
<form class="layui-form" method="get" lay-filter="top">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="¥" autocomplete="off" class="layui-input">
<div class="layui-input-inline">
<input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="text" name="arr[title]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">行内表单</label>
<div class="layui-form-item">
<button class="layui-btn" id="testSubmit">立即提交</button>
</div>
</form>
<hr>
<form class="layui-form layui-form-pane1" action="" lay-filter="first">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<select name="quiz" lay-verify="required" lay-verType="tips">
<option value="">请选择问题</option>
<option value="0">你工作的第一个城市</option>
<option value="1" disabled>你的工号</option>
<option value="2">你最喜欢的老师</option>
</select>
<input type="text" name="title" lay-verify="required|title" lay-reqText="标题不能为空" required placeholder="请输入标题" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">select分组</label>
<div class="layui-form-item">
<label class="layui-form-label">手机</label>
<div class="layui-input-block">
<select name="quiz" lay-filter="quiz">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="0">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input demo-phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid" style="padding: 0!important;">
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="email" name="email" lay-verify="email" lay-verType="alert" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">生日</label>
<div class="layui-input-block">
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="¥" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">行内表单</label>
<div class="layui-input-block">
<select name="quiz" lay-verify="required" lay-verType="tips" lay-filter="quiz111">
<option value="">请选择问题</option>
<option value="0">你工作的 第一个城市</option>
<option value="1" disabled>你的工号</option>
<option value="2">你最喜欢的老师</option>
</optgroup>
<option value="2">
你最喜欢的老师
</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">select分组</label>
<div class="layui-input-block">
<select name="quiz" lay-filter="quiz">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="0">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<option value="1" disabled>你的工号</option>
<option value="2">你最喜欢的老师</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="interest">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="interest">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-block">
<select name="interest-search" lay-filter="interest-search" lay-search>
<option value="">请搜索</option>
<option value="写作">写作</option>
<option value="阅读" disabled>阅读</option>
<option value="游戏" disabled>游戏</option>
<option value="音乐">音乐</option>
<option value="旅行">旅行</option>
<option value="读书">读书</option>
<option value="1">layer</option>
<option value="2" disabled>laydate</option>
<option value="3">3</option>
<option value="4">layim</option>
<option value="5">laypage</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">搜索分组框</label>
<div class="layui-input-block">
<select name="interest-search-group" lay-filter="interest-search-group" lay-search="">
<option value="">请搜索</option>
<optgroup label="分组a">
<option value="a1">a1</option>
<option value="a2">a2</option>
</optgroup>
<optgroup label="分组aa">
<option value="aa1">aA1</option>
<option value="aa2">aA2</option>
</optgroup>
<optgroup label="分组b">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
<optgroup label="分组bb">
<option value="bb1">bb1</option>
<option value="bb2">bb2</option>
</optgroup>
<optgroup label="分组bbb">
<option value="bbb1">bBb1</option>
<option value="bbb2">bBB2</option>
</optgroup>
<optgroup label="分组c">
<option value="c1">c1</option>
<option value="c2">c2</option>
</optgroup>
<optgroup label="分组cc">
<option value="cc1">cc1</option>
<option value="cc2">cc2</option>
</optgroup>
<optgroup label="分组ccc">
<option value="ccc1">ccc1</option>
<option value="ccc2">ccc2</option>
</optgroup>
<optgroup label="分组cccc">
<option value="cccc1">cccc1</option>
<option value="cccc2">cccc2</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-inline">
<select name="interest-search" lay-filter="interest-search" lay-search>
<option value="">请搜索</option>
<option value="写作">写作</option>
<option value="阅读" disabled>阅读</option>
<option value="游戏" disabled>游戏</option>
<option value="音乐">音乐</option>
<option value="旅行">旅行</option>
<option value="读书">读书</option>
<option value="1">layer</option>
<option value="2" disabled>laydate</option>
<option value="3">3</option>
<option value="4">layim</option>
<option value="5">laypage</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<div class="layui-form-item" pane>
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读">
<input type="checkbox" name="like[game]" title="游戏" disabled>
</div>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读">
<input type="checkbox" name="like[game]" title="游戏" disabled>
<div class="layui-form-item" pane>
<label class="layui-form-label">原始复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
</div>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">原始复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" title="开关">
<input type="checkbox" name="close2" lay-skin="switch" title="开关" lay-text="ON|OFF" disabled>
</div>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" title="开关">
<input type="checkbox" name="close2" lay-skin="switch" title="开关" lay-text="ON|OFF" disabled>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
<input type="checkbox" name="open2" lay-skin="switch" lay-filter="switchTest" lay-text="已绑定|绑定">
</div>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
<input type="checkbox" name="open2" lay-skin="switch" lay-filter="switchTest" lay-text="已绑定|绑定">
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
<input type="radio" name="sex" value="中型" title="中" disabled>
</div>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
<input type="radio" name="sex" value="中型" title="中" disabled>
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex.id" value="男" title="男">
<input type="radio" name="sex.id" value="女" title="女" checked>
<input type="radio" name="sex.id" value="中型" title="中">
</div>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex.id" value="男" title="男">
<input type="radio" name="sex.id" value="女" title="女" checked>
<input type="radio" name="sex.id" value="中型" title="中">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</form>
<br><br><br>
<br><br><br>
<script src="../src/layui.js"></script>
<!-- <script src="../build/lay/dest/layui.all.js"></script> -->
<script src="../src/layui.js"></script>
<!-- <script src="../build/lay/dest/layui.all.js"></script> -->
<script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
layui.use(['form', 'util', 'laydate'], function(){
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
var laydate = layui.laydate;
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题也太短了吧';
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题也太短了吧';
}
}
}
,pass: [/(.+){6,12}$/, '密码必须6到12位']
,money: [
/^\d+\.\b\d{2}\b$/
,'金额必须为小数保留两位'
]
});
//日期
laydate.render({
elem: '#date'
});
//初始赋值
var thisValue = form.val('first', {
'title': '测试'
,'phone': 11111111111
,'email': 'xu@sentsin.com'
,'password': 123123
//,'quiz': 2
,'interest': 3
,'like[write]': true
//,'open': false
,'sex': '男'
,'desc': 'form 是我们非常看重的一块'
,xxxxxxxxx: 123
});
console.log(thisValue);
,pass: [/(.+){6,12}$/, '密码必须6到12位']
,money: [
/^\d+\.\b\d{2}\b$/
,'金额必须为小数保留两位'
]
});
/*
form.on('submit(top)', function(data){
console.log(data);
return false;
});
*/
//方法提交
$('#testSubmit').on('click', function(){
form.submit('top', function(data){
layer.confirm('确定提交么?', function(index){
layer.close(index);
//事件监听
form.on('select', function(data){
console.log('select: ', this, data);
});
form.on('select(quiz)', function(data){
console.log('select.quiz', this, data);
});
form.on('select(interest)', function(data){
console.log('select.interest: ', this, data);
});
form.on('checkbox', function(data){
console.log(this.checked, data.elem.checked);
});
form.on('switch', function(data){
console.log(data);
});
form.on('radio', function(data){
console.log(data);
});
//监听提交
form.on('submit(*)', function(data){
console.log(data)
alert(JSON.stringify(data.field));
// 验证均通过后执行提交
setTimeout(function(){
alert(JSON.stringify(data.field));
})
});
});
return false;
});
});
//日期
laydate.render({
elem: '#date'
});
//初始赋值
var thisValue = form.val('first', {
'title': '测试测试测试'
//,'phone': 11111111111
,'email': 'xu@sentsin.com'
,'date': '2021-05-30'
,'password': 123123
//,'quiz': 2
,'interest': 3
,'like[write]': true
//,'open': false
,'sex': '男'
,'desc': 'form 是我们非常看重的一块'
,xxxxxxxxx: 123
});
</script>
//事件
form.on('select(quiz111)', function(data){
console.log('select: ', this, data);
});
form.on('select(quiz)', function(data){
console.log('select.quiz', this, data);
});
form.on('select(interest)', function(data){
console.log('select.interest: ', this, data);
});
form.on('checkbox', function(data){
console.log(this.checked, data.elem.checked);
});
form.on('switch', function(data){
console.log(data);
});
form.on('radio', function(data){
console.log(data);
});
// 提交事件
form.on('submit(*)', function(data){
console.log(data)
alert(JSON.stringify(data.field));
return false;
});
<form id="test1" action="" target="_blank">
<input type="radio" value="girl" disabled>
<input type="checkbox" name="love[a]">
<input type="checkbox" name="love[b]">
<input value="1">
<input name="as">
<input name="=" value="2">
<select name="quiz">
<option value="">请选择问题</option>
<option disabled value="你工作的第一个城市">你工作的第一个城市</option>
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
<option value="你的工号" selected>你的工号</option>
<option value="你的工号">你的工号</option>
</select>
<button type="submit">原始表单,测试提交</button>
</form>
// 普通事件
util.on('lay-on', {
"get-vercode": function(othis){
var isvalid = form.validate('.demo-phone');
<script>
layui.use('jquery', function(){
var $ = layui.jquery;
var submit = function(){
return false;
};
$('#test').on('submit', function(){
return false
// 验证通过
if(isvalid){
layer.msg('手机号验证通过,执行发送验证码的操作');
}
}
});
});
$('#test1').on('submit', function(obj){
//console.log(obj.field)
//return false;
});
});
</script>
</script>
<h3>原始表单调试:</h3>
<hr>
<form id="test1" action="" target="_blank">
<input type="radio" value="girl" disabled>
<input type="checkbox" name="love[a]">
<input type="checkbox" name="love[b]">
<input value="1">
<input name="as">
<input name="=" value="2">
<select name="quiz">
<option value="">请选择问题</option>
<option disabled value="你工作的第一个城市">你工作的第一个城市</option>
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
<option value="你的工号" selected>你的工号</option>
<option value="你的工号">你的工号</option>
</select>
<button type="submit">原始表单,测试提交</button>
</form>
</body>
</html>

View File

@ -3,97 +3,97 @@
,"msg": ""
,"count": 3000000
,"totalRow": {
"experience": "666"
,"logins": "999"
"checkin": "777"
}
,"data": [{
"id": "10001"
,"username": "杜甫"
,"email": "xianxin@layui.com"
,"sex": "男"
,"username": "杜甫123"
,"email": "test1@email.com"
,"sex": "<strong></strong>"
,"city": "浙江杭州"
,"sign": "鼠标移动到此处,可以通过点击单元格右侧的下拉图标,查看到被隐藏的全部内容。"
,"sign": "舍南舍北皆春水,但见群鸥日日来。花径不曾缘客扫,蓬门今始为君开。盘飧市远无兼味,樽酒家贫只旧醅。肯与邻翁相对饮,隔篱呼取尽余杯。"
,"experience": 7
,"ip": "192.168.0.8"
,"logins": null
,"checkin": 0
,"joinTime": "2016-10-14"
,"LAY_DISABLED": true
}, {
"id": "10002"
,"username": "李白"
,"email": "xianxin@layui.com"
,"email": "test2@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "君不见,黄河之水天上来,奔流到海不复回。 君不见,高堂明镜悲白发,朝如青丝暮成雪。 人生得意须尽欢,莫使金樽空对月。 天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。 岑夫子,丹丘生,将进酒,杯莫停。 与君歌一曲,请君为我倾耳听。(倾耳听 一作:侧耳听) 钟鼓馔玉不足贵,但愿长醉不复醒。(不足贵 一作:何足贵;不复醒 一作:不愿醒/不用醒) 古来圣贤皆寂寞,惟有饮者留其名。(古来 一作:自古;惟 通:唯) 陈王昔时宴平乐,斗酒十千恣欢谑。 主人何为言少钱,径须沽取对君酌。 五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。"
,"experience": 9
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
,"LAY_CHECKED": true
}, {
"id": "10003"
,"username": "王勃"
,"email": "xianxin@layui.com"
,"username": "苏轼"
,"email": "test3@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"sign": "大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。江山如画,一时多少豪杰。遥想公瑾当年,小乔初嫁了,雄姿英发。羽扇纶巾,谈笑间,樯橹灰飞烟灭。故国神游,多情应笑我,早生华发。人生如梦,一尊还酹江月。"
,"experience": 8
,"ip": "192.168.0.8"
,"logins": null
,"checkin": null
,"joinTime": "2016-10-14"
}, {
"id": "10004"
,"username": "李清照"
,"email": "xianxin@layui.com"
,"email": "test4@email.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": 6
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10005"
,"username": "冰心"
,"email": "xianxin@layui.com"
,"email": "test5@email.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": 64
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10006"
,"username": "贤心"
,"email": "xianxin@layui.com"
,"email": "test6@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": 65
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10007"
,"username": "贤心"
,"email": "xianxin@layui.com"
,"email": "test7@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": 49
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10008"
,"username": "贤心"
,"email": "xianxin@layui.com"
,"email": "test8@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": 5
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}]
}

View File

@ -1,12 +1,12 @@
{
"status": 200
,"message": ""
,"total": 3000000
,"total": 333333
,"data": {
"list": [{
"id": "10001"
,"username": "杜甫3"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "鼠标移动到此处,可以通过点击单元格右侧的下拉图标,查看到被隐藏的全部内容。"
@ -17,7 +17,7 @@
}, {
"id": "10002"
,"username": "李白3"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "君不见,黄河之水天上来,奔流到海不复回。 君不见,高堂明镜悲白发,朝如青丝暮成雪。 人生得意须尽欢,莫使金樽空对月。 天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。 岑夫子,丹丘生,将进酒,杯莫停。 与君歌一曲,请君为我倾耳听。(倾耳听 一作:侧耳听) 钟鼓馔玉不足贵,但愿长醉不复醒。(不足贵 一作:何足贵;不复醒 一作:不愿醒/不用醒) 古来圣贤皆寂寞,惟有饮者留其名。(古来 一作:自古;惟 通:唯) 陈王昔时宴平乐,斗酒十千恣欢谑。 主人何为言少钱,径须沽取对君酌。 五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。"
@ -29,7 +29,7 @@
}, {
"id": "10003"
,"username": "王勃"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@ -40,7 +40,7 @@
}, {
"id": "10004"
,"username": "李清照"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@ -51,7 +51,7 @@
}, {
"id": "10005"
,"username": "冰心"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@ -62,7 +62,7 @@
}, {
"id": "10006"
,"username": "贤心"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"

View File

@ -1,5 +1,3 @@
<!DOCTYPE html>
<html>
<head>
@ -18,12 +16,31 @@ body{padding: 50px 100px;}
</head>
<body>
日期时间范围选择:
范围选择1
<div class="layui-inline">
<input type="text" class="layui-input" id="test1">
</div>
<br><br><hr><br>
<br><hr>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围选择2</label>
<div class="layui-inline" id="test1-2">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
</div>
</div>
</div>
</div>
</div>
<br><hr>
日期选择器:
<div class="layui-inline">
@ -97,7 +114,7 @@ body{padding: 50px 100px;}
<div class="layui-inline">
<input type="text" class="layui-input" id="test6">
</div>
<textarea></textarea>
<button class="layui-btn" id="test9">外部事件触发</button>
<div class="layui-inline">
<input type="text" class="layui-input" id="test8">
@ -118,31 +135,48 @@ layui.use('laydate', function(laydate){
//trigger: 'focus'
})
//双控件
//范围选择1
laydate.render({
elem: '#test1' //指定元素
,type: 'datetime'
,trigger: 'click'
//,lang: 'en'
//,theme: 'grid'
,range: true //开启日期范围默认使用“_”分割
//,value: '2021-03-27 00:00:00 - 2021-02-27 00:00:00'
,range: true //开启日期范围,默认使用“-”分割
//,min: '1970-1-1'
//,max: '2021-5-9'
//,value: '2021-05-09 12:06:09'
//,value: '2021-05-08 - 2021-03-27'
,done: function(value, date, endDate){
console.log(value, date, endDate);
//this.elem.val(123);
}
,change: function(value, date, endDate){
console.log(value, date, endDate);
}
});
//return;
//范围选择2
laydate.render({
elem: '#test1-2'
,type: 'date'
,range: ['#test-startDate-1', '#test-endDate-1']
//,value: ['2022-05-01', '2022-06-01']
//,value: '2022-05-01 - 2022-06-01'
});
//单控件
laydate.render({
elem: '#test2'
//,format: 'yyyy年MM月dd日'
,value: new Date(1534766888000)
,isInitValue: false
//,isInitValue: false
,format: 'yyyy/MM/dd'
,min: 7
//,max: 0
//,min: '2016-10-14'
//,max: -1
@ -152,6 +186,10 @@ layui.use('laydate', function(laydate){
}
,done: function(value, date, endDate){
console.log(value, date, endDate);
//this.elem.val(111111);
}
,change: function(value){
console.log(value);
}
});
@ -161,6 +199,8 @@ layui.use('laydate', function(laydate){
,type: 'year'
//,range: true
//,trigger: 'click'
//,min:'2021-01-01'
//,max:'2022-12-31'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
@ -173,9 +213,10 @@ layui.use('laydate', function(laydate){
laydate.render({
elem: '#test4'
,type: 'month'
,range: true
,range: true
,trigger: 'click'
//,max: -30
,min:'2022-03-01'
,max:'2022-05-31'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>富文本编辑器 - layui</title>
<title>简单富文本编辑器 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">

View File

@ -11,6 +11,9 @@
<style>
body{padding: 100px;}
#photos li{float: left; margin: 0 1px 1px;}
#photos img{max-height: 38px;}
</style>
</head>
<body>
@ -27,24 +30,91 @@ body{padding: 100px;}
<a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>
</div>
<div id="test11111" style="display: none;padding: 20px;">
123
<div id="test11111" style="display: none; padding: 20px;">
content 指向放置在页面的一段隐藏元素
</div>
<hr><br>
<div class="layui-list">
<ul class="layui-row" id="photos">
<li class="list"><img src="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png"></li>
<li class="list"><img src="https://res.layui.com/static/images/fly/fly.jpg"></li>
</ul>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
var LAYUI_GLOBAL = {
//path: '../src/'
//,layerPath: '../release/layer/src/'
};
</script>
<script src="../src/layui.js"></script>
<!-- layer 独立版调试 -->
<script src1="//cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
<script src1="../release/layer/src/layer.js"></script>
<script>
var runTest = function(run, $, layer){
if(!run) return;
var timer = setInterval(function(){
//location.reload();
}, 1000);
layer.alert(123);
$.ajax({
url: './all.html'
,beforeSend: function(){
//layer.ready(function(){
//layer.load();
//});
}
,success: function(){
return;
layer.closeAll('loading', function(){
setTimeout(function(){
if($('.layui-layer-loading').length){
console.error('layer close 异常');
clearInterval(timer);
}
}, 200);
});
}
});
};
window.jQuery && runTest(1, window.jQuery, window.layer);
layui.use(['layer', 'util'], function(layer, util){
var $ = layui.jquery;
//return
var index = layer.msg('hello');
//layer.close(index);
//runTest(1, $, layer);
//触发事件
var active = {
test: function(){
layer.alert('你好么,体验者');
layer.alert('你好么,体验者。<br>在标题栏显示自动关闭倒计秒数', {
time: 5*1000
,success: function(layero, index){
var timeNum = this.time/1000, setText = function(start){
layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
};
setText(!0);
this.timer = setInterval(setText, 1000);
if(timeNum <= 0) clearInterval(this.timer);
}
,end: function(){
clearInterval(this.timer);
}
});
}
,test2: function(){
layer.confirm('您是如何看待前端开发?', {
@ -59,18 +129,28 @@ layui.use('layer', function(){
});
}
,test3: function(){
layer.msg('玩命提示中');
layer.msg('提示中');
}
,test4: function(){
layer.tips('Hi我是一个小提示', this, {tips: 1});
}
,test5: function(){
layer.open({
title:'更新论坛信息',
title:'自定义页面层',
type: 1,
skin: 'layui-layer-rim',
area: ['1000px', '580px'],
content: $('#test11111')
content: $('#test11111'),
maxmin: true,
minStack: false, //最小化不堆叠在左下角
id: 'page1', //定义 ID防止重复弹出
min: function(layero, index){
layer.msg('阻止了默认的最小化');
layer.style(index, {top: 'auto', bottom: 0});
return false;
}
});
}
,test6: function(){
@ -86,7 +166,7 @@ layui.use('layer', function(){
layer.close(index);
layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕!您的口令:'+ pass +'<br>您最后写下了:'+text);
layer.msg('演示完毕!您的口令:'+ util.escape(pass) +'<br>您最后写下了:'+ util.escape(text));
});
});
}
@ -105,7 +185,28 @@ layui.use('layer', function(){
}]
});
}
};
//相册层
layer.photos({
photos: '#photos' //$('#photos')
});
$('#photos li-').each(function(i, e){
layer.photos({
photos: $(e)
});
});
//动态追加
$('#photos').append('<li class="list"><img src="https://res.layui.com/static/images/sentsin/night.gif"></li>');
//{"status":1,"msg":"","title":"JSON请求的相册","id":8,"start":0,"data":[{"alt":"layer","pid":109,"src":"//cdn.layui.com/upload/2017_3/168_1488985841996_23077.png","thumb":""},{"alt":"说好的,一起 Fly","pid":110,"src":"//res.layui.com/static/images/fly/fly.jpg","thumb":""},{"alt":"星空如此深邃","pid":113,"src":"//res.layui.com/static/images/sentsin/night.gif","thumb":""}]}
$('.demo').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';

View File

@ -5,19 +5,24 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 大布局 - Layui</title>
<title>layout 管理系统大布局 - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layout demo</div>
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域可配合layui 已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">nav 1</a></li>
<li class="layui-nav-item"><a href="">nav 2</a></li>
<li class="layui-nav-item"><a href="">nav 3</a></li>
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
@ -26,19 +31,27 @@
<dd><a href="">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">set 1</a></dd>
<dd><a href="">set 2</a></dd>
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">Sign out</a></li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
@ -84,7 +97,7 @@
</li>
<li>
该页面只是简单的管理系统的界面基础布局示例,并不是一整套界面布局方案,您可以关注基于 layui 的通用型管理系统界面模板解决方案:
<a href="https://www.layui.com/layuiadmin/" target="_blank" class="layui-btn">layuiAdmin</a>
<a href="/layuiadmin/" target="_blank" class="layui-btn">layuiAdmin</a>
</li>
<li>
layui 之所以赢得如此多人的青睐,更多是在于它“前后界面兼备”的能力。既可编织出绚丽的前台页面,又可满足繁杂的管理系统的界面需求。
@ -93,18 +106,21 @@
</ul>
</blockquote>
<br>
<a href="/doc/element/layout.html#admin" target="_blank" class="layui-btn">查看该布局代码</a>
<br><br><br>
<div class="layui-card layui-panel">
<div class="layui-card-header">
下面是充数内容,为的是出现滚动条
</div>
<div class="layui-card-body">
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真到了底部呀
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真到了底部呀
</div>
</div>
<br><br>
</div>
</div>
@ -116,9 +132,30 @@
<script src="../src/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>

226
examples/laytpl.html Normal file
View File

@ -0,0 +1,226 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>视图模板引擎 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
.laytpl-demo{border: 1px solid #EBEBEB;}
.laytpl-demo>textarea{position: relative; display: block; width:100%; height: 300px; padding: 11px; border: 0; box-sizing: border-box; resize: none; background-color: #fff; font-family: Courier New; font-size: 13px;}
.laytpl-demo>div:first-child{height: 32px; line-height: 32px; padding: 6px 11px; border-bottom: 1px solid #EBEBEB; background-color: #F8F9FA;}
</style>
</head>
<body>
<div>
<div class="layui-row">
<div class="layui-col-xs6 laytpl-demo">
<div>模板</div>
<textarea id="demoTPL1"><h1>{{ d.title }}</h1>
<p>转义输出(HTML){{ d.desc }}</p>
<p>转义输出(HTML){{= d.desc }}</p>
<p>原始输出(HTML){{- d.desc }}</p>
{{#}}
<div class="layui-section">
<hr>
<ul>
{{# var str = "a b c";
layui.each(d.items, function(index, item){ }}
<li class="{{ index > 0 ? 'list' : '' }}">
<strong>{{ item.title }}</strong>
{{# if(item.content){ }}
<span>{{ item.content }}</span>
{{# } }}
<span>{{ item.time || '' }}</span>
{{ str }}
</li>
{{# }); if(d.items.length === 0){ }}
无数据
{{# } }}
</ul>
<hr>
</div>
<div>
{{ d.content || '' }}
{{ }} {{}}
{{ }}
\a
'12'"""""
"哈''哈"
</div>
<p>渲染时间:{{ layui.util.toDateString(new Date()) }}</p></textarea>
</div>
<div class="layui-col-xs6 laytpl-demo">
<div class="layui-row">
<div class="layui-col-xs3">数据</div>
<div class="layui-col-xs9" style="text-align: right">
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-on="createData">生成数据</button>
</div>
</div>
<textarea id="demoData1">
{
"title": "标题",
"desc": "<a href=\"\" style=\"color:blue;\">一段描述</a>",
"items": [
{
"title": "list 1",
"child": [{
"title": "list 1-1",
"child": [{
"title": "list 1-1-1"
}]
}]
},
{
"title": "list 2",
"child": [{
"title": "list 2-1"
}]
},
{"title": "list 3"}
]
}</textarea>
</div>
<div class="layui-col-xs12 laytpl-demo">
<div class="layui-row">
<div class="layui-col-xs4">视图</div>
<div class="layui-col-xs4" style="text-align: center">
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-on="test1">性能测试</button>
</div>
<div class="layui-col-xs4" style="text-align: right">
<span id="demoViewTime"></span>
</div>
</div>
<div class="layui-padding-sm" id="demoView1"></div>
</div>
</div>
<script type="type/html" template id="demoTplCommon">
公共模板 - {{ d.title }}
</script>
<script type="type/html" template id="demoTplList">
{{# if(d.items && d.items.length > 0){ }}
<ul>
{{# layui.each(d.items, function(index, item){ }}
<li><strong>{{ item.title }}</strong>{{ laytpl.include('demoTplList', {items: item.child}) }}</li>
{{# }); }}
</ul>
{{# } }}
</script>
<script type="type/html" template id="laytplTestTpl">
{{# for(var i = 0; i < d.items.length; i++){ }}
第{{= d.items[i].index }}个Name: {{- d.items[i].name }} Number: {{= d.items[i].number }}
{{# } }}
</script>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use(['laytpl', 'util'], function(){
var laytpl = layui.laytpl
,util = layui.util
,$ = layui.$;
//获取模板和数据
var get = function(type){
return {
template: $('#demoTPL1').val() //获取模板
,data: function(){ //获取数据
try {
return JSON.parse($('#demoData1').val());
} catch(e){
$('#demoView1').html(e);
}
}()
};
};
var data = get();
//耗时计算
var startTime = new Date().getTime(), timer = function(startTime, title){
var endTime = new Date().getTime();
$('#demoViewTime').html((title || '模板解析耗时:')+ (endTime - startTime) + 'ms');
};
//渲染模板
var thisTpl = laytpl(data.template);
//执行渲染
thisTpl.render(data.data, function(view){
timer(startTime);
$('#demoView1').html(view);
});
//编辑
$('.laytpl-demo textarea').on('input', function(){
var data = get();
if(!data.data) return;
//计算模板渲染耗时
var startTime = new Date().getTime();
//若模板有变化,则重新解析模板;若模板没变,数据有变化,则从模板缓存中直接渲染(效率大增)
if(this.id === 'demoTPL1'){
thisTpl.parse(data.template, data.data); //解析模板
}
//执行渲染
thisTpl.render(data.data, function(view){
timer(startTime);
$('#demoView1').html(view);
});
});
//事件
util.event('lay-on', {
//性能测试
test1: function(){
var dataLen = 1000 //数据量
,renderTimes = 1000; //渲染次数
//初始化数据
var data = {
title: '性能测试'
,items: function(items){
for(var i = 0; i < dataLen; i++){
items.push({
index: i
,name: '<strong style="color: red;">张三</strong>'
,number: 100+i
});
}
return items;
}([])
};
//模板
var startTime = new Date();
for(var j = 0; j < renderTimes; j++){
var template = document.getElementById('laytplTestTpl').innerHTML;
var html = laytpl(template).render(data);
}
timer(startTime, '本次测试耗时:');
$('#demoView1').html(html);
}
});
});
</script>
</body>
</html>

View File

@ -68,11 +68,11 @@ layui.use(['rate'], function(){
rate.render({
elem: '#test1'
,length: 3
,value: 3.2
,length: 5
,value: 5
,text: true
,half: true
,setText: function(value){
,setText1: function(value){
var arrs = {
'0.5': '极差'

107
examples/table-static.html Normal file
View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>静态表格 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {padding: 32px;}
</style>
</head>
<body>
<div class="layui-btn-container">
<a href="table.html" class="layui-btn">表格综合</a>
<a href="table-test.html" class="layui-btn">表格操作</a>
<a href="table-static.html" class="layui-btn layui-btn-primary layui-border-green">静态表格</a>
</div>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>孔子</td>
<td>华夏</td>
<td>有朋至远方来,不亦乐乎</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏</td>
<td>穷则独善其身,达则兼济天下</td>
</tr>
</tbody>
</table>
<br>
<table class="layui-table" lay-size="sm">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>孔子</td>
<td>华夏</td>
<td>有朋至远方来,不亦乐乎</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏</td>
<td>穷则独善其身,达则兼济天下</td>
</tr>
</tbody>
</table>
<br>
<table class="layui-table" lay-size="lg">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>孔子</td>
<td>华夏</td>
<td>有朋至远方来,不亦乐乎</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏</td>
<td>穷则独善其身,达则兼济天下</td>
</tr>
</tbody>
</table>
</body>
</html>

437
examples/table-test.html Normal file
View File

@ -0,0 +1,437 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>表格操作 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {padding: 32px; /*overflow-y: scroll;*/}
</style>
</head>
<body>
<div class="layui-btn-container">
<a href="table.html" class="layui-btn">表格综合</a>
<a href="table-test.html" class="layui-btn layui-btn-primary layui-border-green">表格操作</a>
<a href="table-static.html" class="layui-btn">静态表格</a>
</div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</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" id="moreTest">
更多测试
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
{{# if(layui.$.trim(d.email)){ }}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# } }}
<input type="checkbox" name="demoTableSwitch" lay-skin="switch" {{ d.demoTableSwitch }}>
</script>
<script type="text/html" id="usernameTpl">
<a href="" class="layui-table-link">{{d.username || ''}}</a>
</script>
<script type="text/html" id="switchTpl">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="女|男">
</script>
<script type="text/html" id="cityTpl">
<select id="demoCity1" lay-ignore>
<option value="浙江杭州">浙江杭州</option>
<option value="江西南昌">江西南昌</option>
<option value="湖北武汉">湖北武汉</option>
</select>
</script>
<script type="text/html" id="checkboxTpl">
<input type="checkbox" name="" title="锁定" checked>
</script>
<script type="text/html" id="LAY_table_tpl_email">
<span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span>
</script>
<script type="text/html" id="pagebarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn1">底部按钮1</button>
<button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn2">底部按钮2</button>
</div>
</script>
<table id="test" lay-filter="test"></table>
<script src="../src/layui.js"></script>
<script>
layui.use(['table', 'dropdown'], function(){
var $ = layui.$;
var table = layui.table;
var laytpl = layui.laytpl;
var dropdown = layui.dropdown;
var form = layui.form;
// 仅用于各类测试的表头
var test_cols = [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width: 120}
,{field:'sign', title:'签名'}
,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]];
// 全局设定某参数
table.set({
where: {
token: '默认 token 参数'
}
//,defaultToolbar: ['filter']
,limit: 30
//,url: 'list'
//,height: 300
});
//渲染
window.ins1 = table.render({
elem: '#test'
,height: 500
//,width: 600
,title: '用户数据表'
,url: 'json/table/demo1.json'
,pagebar: '#pagebarDemo' // 分页栏模板
,lineStyle: 'height: 95px;' // 行样式
,css: [ // 自定义样式
'.layui-table-page{text-align: right;}'
,'.layui-table-pagebar{float: left;}'
].join('')
//,size: 'lg'
//,skin: 'line'
//,autoSort: false //是否自动排序。如果否,则由服务端排序
//,loading: false
,totalRow: true
,page: {
// curr: layui.data('tableCache').curr || 1 // 读取记录中的页码,赋值给起始页
}
,limit: 30
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', {
title: '帮助'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
//,escape: false
,cols: !1 ? test_cols : [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'}
,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text', templet: function(d){
return '<em>'+ layui.util.escape(d.email) +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:120, templet: '#cityTpl', exportTemplet: function(d, obj){
//console.log(obj)
var td = obj.td(this.field); //获取当前 td
return td.find('select').val();
}}
,{field:'sign', title:'签名', minWidth: 200, style:'color: #5FB878', edit: 'textarea'}
,{field: 'experience', title: '积分', width: 100, sort: true, align:'center', totalRow: !1 || '{{= d.TOTAL_NUMS }} 分 😊', templet: '<div><a href="" class="layui-table-link">{{ d.experience }}</a></div>'}
,{field:'ip', title:'IP', width: 120, align: 'right'}
,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'}
,{field:'joinTime', title:'加入时间', width: 120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 180}
]]
//,autoSort: false // 禁用前端自动排序
,initSort11111: { // 初始排序状态
field: 'experience' //排序字段,对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
,headers: {headers_token: 'sasasas'}
,where: {
test: '初始 test 参数'
,token: '初始 token'
,key: 'experience'
,order: 'asc'
}
,done: function(res, curr, count){
var id = this.id;
// 记录当前页码
/*
layui.data('tableCache', {
key: 'curr',
value: curr
});
*/
// 重载测试
dropdown.render({
elem: '#reloadTest' //可绑定在任意元素中,此处以上述按钮为例
,data: [{
id: 'reload',
title: '重载'
},{
id: 'reload-deep',
title: '重载 - 参数叠加'
},{
id: 'reloadData',
title: '仅重载数据'
},{
id: 'reloadData-deep',
title: '仅重载数据 - 参数叠加'
}]
// 菜单被点击的事件
,click: function(obj){
switch(obj.id){
case 'reload':
// 重载 - 默认(参数重置)
table.reload('test', {
where: {
abc: '123456'
//,test: '新的 test2'
//,token: '新的 token2'
}
,height: 'full-130' // 重载高度
/*
,cols: [[ // 重置表头
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
]]
*/
});
break;
case 'reload-deep':
// 重载 - 深度(参数叠加)
table.reload('test', {
where: {
abc: 123
,test: '新的 test1'
}
//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
,page: {curr: 5, limit: 20}
//,cols: ins1.config.cols
}, true);
break;
case 'reloadData':
// 数据重载 - 参数重置
var isnt3 = table.reloadData('test', {
where: {
abc: '123456'
//,test: '新的 test2'
//,token: '新的 token2'
}
,height: 2000 // 测试无效参数
//,url: '404'
,elem: null
,page: {curr: 5, limit: 20}
});
console.log(isnt3.config);
break;
case 'reloadData-deep':
// 数据重载 - 参数叠加
table.reloadData('test', {
where: {
abc: 123
,test: '新的 test1'
}
}, true);
break;
}
layer.msg('可观察 Network 请求参数的变化');
}
});
// 更多测试
dropdown.render({
elem: '#moreTest' //可绑定在任意元素中,此处以上述按钮为例
,data: [{
id: 'add',
title: '添加'
},{
id: 'update',
title: '编辑'
},{
id: 'delete',
title: '删除'
}]
//菜单被点击的事件
,click: function(obj){
var checkStatus = table.checkStatus(id)
var data = checkStatus.data; // 获取选中的数据
switch(obj.id){
case 'add':
layer.open({
title: '添加',
type: 1,
area: ['80%','80%'],
content: '<div style="padding: 16px;">自定义表单元素</div>'
});
break;
case 'update':
layer.open({
title: '编辑',
type: 1,
area: ['80%','80%'],
content: '<div style="padding: 16px;">自定义表单元素</div>'
});
break;
case 'delete':
if(data.length === 0){
return layer.msg('请选择一行');
}
layer.msg('delete event');
break;
}
}
});
}
,error: function(res, msg){
console.log(res, msg)
}
/*
,request: { // 自定义请求参数名称
pageName: 'curr' //页码的参数名称默认page
,limitName: 'nums' //每页数据量的参数名默认limit
}
,parseData: function(res){ // 任意数据格式的解析
return {
"status": res.status
,"msg": res.message
,"count": res.total
,"data": res.data.list
};
}
*/
});
//排序事件
table.on('sort(test)', function(obj){
//console.log(obj);
//return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序
table.reloadData('test', {
//initSort: obj,
//page: {curr: 1}, //重新从第一页开始
where: { // 向服务端传入排序参数
key: obj.field, //排序字段
order: obj.type //排序方式
}
});
});
// 工具栏事件
table.on('toolbar(test)', function(obj){
var id = obj.config.id;
var checkStatus = table.checkStatus(id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(layui.util.escape(JSON.stringify(data)));
break;
case 'getData':
var getData = table.getData(id);
console.log(getData);
layer.alert(layui.util.escape(JSON.stringify(getData)));
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;
case 'LAYTABLE_TIPS':
layer.alert('Table for layui-v'+ layui.v);
break;
};
});
//触发单元格工具事件
table.on('tool(test)', function(obj){ // 双击 toolDouble
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
//触发表格复选框选择
table.on('checkbox(test)', function(obj){
console.log(obj)
});
//触发表格单选框选择
table.on('radio(test)', function(obj){
console.log(obj)
});
// 行单击事件
table.on('row(test)', function(obj){
//console.log(obj);
//layer.closeAll('tips');
});
// 行双击事件
table.on('rowDouble(test)', function(obj){
console.log(obj);
});
// 单元格编辑事件
table.on('edit(test)', function(obj){
var field = obj.field //得到字段
,value = obj.value //得到修改后的值
,data = obj.data; //得到所在行所有键值
var update = {};
update[field] = value;
obj.update(update);
});
});
</script>
</body>
</html>

View File

@ -1,32 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>表格操作 - layui</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>表格操作 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 20px; /*overflow-y: scroll;*/}
</style>
<style>
body{padding: 32px; /*overflow-y: scroll;*/}
</style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页所有数据</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
<button class="layui-btn layui-btn-sm" lay-event="reload">重载(保留初始参数)</button>
<button class="layui-btn layui-btn-sm" lay-event="reload2">重载(不保留初始参数)</button>
</div>
</script>
<div class="layui-btn-container">
<a href="table.html" class="layui-btn layui-btn-primary layui-border-green">表格综合</a>
<a href="table-test.html" class="layui-btn">表格操作</a>
<a href="table-static.html" class="layui-btn">静态表格</a>
</div>
<table id="test" lay-filter="test"></table>
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}" lay-filter="appendtest">
<thead>
<tr>
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
</tr>
</thead>
</table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
@ -60,7 +61,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
<table id="test2" lay-filter="test2"></table>
<div style="display: none1;">
<table class="layui-table1" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
<table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
<thead>
<tr>
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
@ -77,7 +78,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
</thead>
</table>
<table class="layui-table" lay-data="{url:'json/table/demo2.json', toolbar: '#toolbarDemo', page: true, limit: 6}">
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}">
<thead>
<tr>
<th lay-data="{field:'username'}" rowspan="3">联系人</th>
@ -179,185 +180,12 @@ body{padding: 20px; /*overflow-y: scroll;*/}
</table>
</div>
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.0.1/layui.js" charset="utf-8"></script>
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.13/layui.js"></script>
<script>
layui.use('table', function(){
var $ = layui.$;
var table = layui.table;
//全局设定某参数
table.set({
where: {
token: '默认 token 参数'
}
//,defaultToolbar: ['filter']
,limit: 30
//,url: 'list'
//,height: 300
});
//渲染
window.ins1 = table.render({
elem: '#test'
,height: 400
//,width: 600
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'
,page: {
}
//,autoSort: false //是否自动排序。如果否,则由服务端排序
//,loading: false
,totalRow: true
,limit: 30
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', {
title: '帮助'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'}
,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
,{field:'email', title:'邮箱', hide: 0, width:150, edit: 'text', templet: function(d){
return '<em>'+ d.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:120, templet: '#cityTpl1'}
,{field:'sign', title:'签名'}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: '{{ d.TOTAL_NUMS }} 分', templet: '<div>{{ d.experience }} 分</div>'}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,initSort1: {
field: 'experience' //排序字段,对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
,headers: {headers_token: 'sasasas'}
,where: {
test: '初始 test 参数'
,token: '初始 token'
,key: 'experience'
,order: 'asc'
}
,error: function(res, msg){
console.log(res, msg)
}
/*
,response: {
statusName: 'status'
,statusCode: 200
}
,parseData: function(res){
return {
"status": res.status
,"msg": res.message
,"count": res.total
,"data": res.data.list
};
}
*/
});
//排序事件
table.on('sort(test)', function(obj){
console.log(obj);
return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序
table.reload('test', {
initSort: obj
//,page: {curr: 1} //重新从第一页开始
,where: { //重新请求服务端
key: obj.field //排序字段
,order: obj.type //排序方式
}
}, true);
});
//工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'update':
layer.msg('编辑');
break;
case 'delete':
layer.msg('删除');
break;
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:'+ data.length + ' 个');
break;
case 'getData':
var getData = table.getData(obj.config.id);
console.log(getData);
layer.alert(JSON.stringify(getData));
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;
case 'LAYTABLE_TIPS':
layer.alert('Table for layui-v'+ layui.v);
break;
case 'reload':
//深度重载
var instReload = table.reload('test', {
where: {
abc: 123
,test: '新的 test1'
}
,page: {curr: 5, limit: 20}
,cols: ins1.config.cols
//,height: 300
//,url: 'x'
}, true);
break;
case 'reload2':
//浅重载
table.reload('test', {
where: {
efg: 'sasasas'
//,test: '新的 test2'
//,token: '新的 token2'
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
]]
//,height: 500
});
break;
};
});
table.on('row(test)', function(obj){
console.log(obj);
//layer.closeAll('tips');
});
table.render({
elem: '#test2'
@ -373,6 +201,7 @@ layui.use('table', function(){
//,height: 300
,cellMinWidth: 80
//,skin: 'line'
//,size: 'lg'
,toolbar: true
,cols: [[
{field: 'id', hide: true}
@ -390,61 +219,10 @@ layui.use('table', function(){
*/
]]
});
//监听表格行点击
table.on('tr', function(obj){
console.log(obj)
});
//监听表格复选框选择
table.on('checkbox(test)', function(obj){
console.log(obj)
});
//监听表格单选框选择
table.on('radio(test)', function(obj){
console.log(obj)
});
//监听表格单选框选择
table.on('rowDouble(test)', function(obj){
console.log(obj);
});
//监听单元格编辑
table.on('edit(test)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
console.log(obj)
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
//return;
//直接赋值数据
// 直接赋值数据
table.render({
elem: '#demo'
//,width: 900
@ -458,7 +236,8 @@ layui.use('table', function(){
,{field: 'sign', title: '签名', width: 150}
,{field: 'sex', title: '性别', width: 80}
,{field: 'city', title: '城市', width: 100}
,{field: 'experience', title: '积分', width: 80, sort: true}
// ,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'}
]]
,data: [{
"id": "10001"
@ -558,6 +337,7 @@ layui.use('table', function(){
,page: true //是否显示分页
,limits: [3,5,10]
,limit: 3 //每页默认显示的数量
,totalRow: true
//,loading: false //请求数据时是否显示loading
});

View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>组件示例模板 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-container" style="padding: 30px 0;">
<div class="" style="padding: 30px 0;">
123
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('lay', function(){
});
</script>
</body>
</html>

50
examples/text.md.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text for markdown - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-container layui-row">
<div class="layui-col-md4 layui-text">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1 <sup class="footnote-ref"><a href="#ref-1">[1]</a></sup></p>
<p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
<p>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3 <a href="">链接</a></p>
<ul>
<li>无序1</li>
<li>无序2</li>
<li>无序3</li>
</ul>
<ol>
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
</ol>
<br>
<blockquote>
<p>引用</p>
<blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote>
</blockquote>
<br>
<pre>
var cp = function(){
return gulp.src('./dist/**/*')
.pipe(gulp.dest(dest));
};</pre>
<p id="ref-1">REF-1</p>
</div>
</div>
</body>
</html>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>文件上传模块 - layui</title>
<title>上传组件 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
@ -45,7 +45,7 @@ hr{margin: 30px 0;}
<thead>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>上传进度</th>
<th>操作</th>
</thead>
<tbody id="demoList"></tbody>
@ -56,36 +56,40 @@ hr{margin: 30px 0;}
<hr>
<button type="button" class="layui-btn test333" lay-data="{size:10,url:'a'}" id="test3"><i class="layui-icon">&#xe67c;</i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary test333" lay-data="{size:20,url:'b'}" id="test33"><i class="layui-icon">&#xe67c;</i>换个样式</button>
<div class="layui-btn-container">
<button type="button" class="layui-btn test333" lay-data="{size:10,url:'a'}" id="test3"><i class="layui-icon">&#xe67c;</i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary test333" lay-data="{size:20,url:'b'}" id="test33"><i class="layui-icon">&#xe67c;</i>换个样式</button>
<button type="button" class="layui-btn" id="test4"><i class="layui-icon">&#xe67c;</i>上传视频</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe67c;</i>上传音频</button>
<button type="button" class="layui-btn" id="test4"><i class="layui-icon">&#xe67c;</i>上传视频</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe67c;</i>上传音频</button>
</div>
<hr>
<button class="layui-btn testm" lay-data="{url: '/a/'}">参数设在元素上</button>
<button class="layui-btn testm" lay-data="{url: '/b/', accept: 'file',size:5}">参数设在元素上</button>
<div class="layui-btn-container">
<button class="layui-btn testm" lay-data="{url: '/a/'}">参数设在元素上</button>
<button class="layui-btn testm" lay-data="{url: '/b/', accept: 'file',size:5}">参数设在元素上</button>
</div>
<hr>
<div class="layui-upload">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal" id="test6">选择文件</button>
<button type="button" class="layui-btn" id="test7">开始上传</button>
</div>
<hr><br>
<div class="layui-upload-drag" id="test9">
<div class="layui-upload-drag" id="test8">
<i class="layui-icon">&#xe67c;</i>
<p>点击上传,或将文件拖拽到此处</p>
</div>
<hr><br>
绑定原始文件域:<input type="file" name="file" id="test8">
绑定原始文件域:<input type="file" name="file" id="test9">
<script src="../src/layui.js"></script>
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<script>
layui.use(['upload', 'element'], function(){
var $ = layui.jquery
@ -94,7 +98,7 @@ layui.use(['upload', 'element'], function(){
var uploadInst = upload.render({
elem: '#test1'
,url: 'http://httpbin.org/post'
,url: 'https://httpbin.org/post'
//,size: 2000 //限制文件大小,单位 KB
//,accept: 'file'
,method: 'get'
@ -106,25 +110,29 @@ layui.use(['upload', 'element'], function(){
return 2
}
}
,choose: function(){
,choose: function(obj){
console.log('choose', obj);
}
,before: function(obj){
//预读本地文件示例不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接base64
});
return;
layer.msg('不允许上传')
return false;
}
,done: function(res){
,done: function(res, index){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
console.log(res);
console.log(res, index);
}
,error: function(){
,error: function(index, upload){
this.item.html('重选上传');
//演示失败状态,并实现重传
@ -136,8 +144,8 @@ layui.use(['upload', 'element'], function(){
element.progress('demo', '0%');
}
,progress: function(n, index, e){
console.log(n + '%', index, e); //获取进度百分比
,progress: function(n, elem, res, index){
console.log(n + '%', elem, res, index); //获取进度百分比
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
}
});
@ -150,20 +158,25 @@ layui.use(['upload', 'element'], function(){
//,size: 2
});
// 演示多图片上传
upload.render({
elem: '#test2'
,url: ''
,url: 'https://httpbin.org/post'
,multiple: true
,number: 3
,accept: 'images'
,number: 3 //同时上传的数量
,size: 1024
,before: function(obj){
//预读本地文件示例不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
//this.files = obj.pushFile();
}
,done: function(res){
,done: function(res, index){
//上传完毕
//console.log(this.files)
}
,allDone: function(obj){
console.log(obj)
@ -174,7 +187,7 @@ layui.use(['upload', 'element'], function(){
var demoListView = $('#demoList');
var uploadListIns = upload.render({
elem: '#testList'
,url: ''
,url: 'https://httpbin.org/post'
,accept: 'file'
,multiple: true
,number: 3
@ -182,16 +195,15 @@ layui.use(['upload', 'element'], function(){
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td><div class="layui-progress" lay-filter="progress-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
@ -208,17 +220,18 @@ layui.use(['upload', 'element'], function(){
});
demoListView.append(tr);
element.render('progress');
});
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
//if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
}
//}
this.error(index, upload);
}
,allDone: function(obj){
@ -227,9 +240,12 @@ layui.use(['upload', 'element'], function(){
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){
console.log(n);
element.progress('progress-'+ index, n + '%'); //进度条
}
});
@ -292,8 +308,8 @@ layui.use(['upload', 'element'], function(){
,choose: function(obj){
var that = this;
obj.preview(function(index, file){
console.log(file.name)
obj.resetFile(index, file, '123.jpg');
console.log(file.name);
//obj.resetFile(index, file, '123.jpg');
});
}
,before: function(){
@ -306,7 +322,7 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '#test8'
,url: ''
,url: 'https://httpbin.org/post'
,done: function(res){
console.log(res);
}
@ -314,12 +330,14 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '#test9'
,url: 'http://httpbin.org/post'
,url: ''
,done: function(res){
console.log(res);
}
});
});
</script>
</body>

View File

@ -1,176 +1,167 @@
/**
layui Build
*/
* Building Layui
*/
var pkg = require('./package.json');
var inds = pkg.independents;
const pkg = require('./package.json');
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 del = require('del');
const minimist = require('minimist');
const yargs = require('yargs');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
var header = require('gulp-header');
var del = require('del');
var gulpif = require('gulp-if');
var minimist = require('minimist');
var zip = require('gulp-zip');
//获取参数
var argv = require('minimist')(process.argv.slice(2), {
default: {
ver: 'all'
}
})
//注释
,note = [
'/** <%= pkg.realname %> v<%= pkg.version %> | Released under the <%= pkg.license %> license */\n <%= js %>'
,{pkg: pkg, js: ';'}
]
//模块
,mods = 'lay,laytpl,laypage,laydate,jquery,layer,util,element,upload,dropdown,slider,colorpicker,form,tree,transfer,table,carousel,rate,flow,layedit,code'
//发行版本目录
,releaseDir = './release/zip/layui-v' + pkg.version
,release = releaseDir + '/layui'
//目标木
,destDir = function(ver){
return ver ? release : function(){
return argv.rc ? 'rc' : 'dist'
}();
}
//任务
,task = {
//聚合 JS 文件
alljs: function(ver){
var src = [
'./src/**/{layui,layui.all,'+ mods +'}.js'
]
,dir = destDir(ver);
return gulp.src(src)
.pipe(concat('layui.js', {newLine: ''}))
.pipe(header.apply(null, note))
.pipe(gulp.dest('./'+ dir));
}
//压缩 css 文件
,mincss: function(ver){
var src = [
'./src/css/**/*.css'
,'!./src/css/**/font.css'
]
,dir = destDir(ver)
,noteNew = JSON.parse(JSON.stringify(note));
noteNew[1].js = '';
return gulp.src(src).pipe(minify({
compatibility: 'ie7'
})) //.pipe(header.apply(null, noteNew))
.pipe(gulp.dest('./'+ dir +'/css'));
}
//复制iconfont文件
,font: function(ver){
var dir = destDir(ver);
return gulp.src('./src/font/*')
.pipe(rename({}))
.pipe(gulp.dest('./'+ dir +'/font'));
}
//复制组件可能所需的非css和js资源
,mv: function(ver){
var src = ['./src/**/*.{png,jpg,gif,html,mp3,json}']
,dir = destDir(ver);
gulp.src(src).pipe(rename({}))
.pipe(gulp.dest('./'+ dir));
}
//复制发行的引导文件
,release: function(){
gulp.src('./release/doc/**/*')
.pipe(replace('http://local.res.layui.com/layui/dist/', 'layui/'))
.pipe(gulp.dest(releaseDir));
}
// 基础配置
const config = {
//注释
comment: [
'/** <%= pkg.version %> | <%= pkg.license %> Licensed */<%= js %>'
,{pkg: pkg, js: ';'}
]
//模块
,modules: 'lay,laytpl,laypage,laydate,jquery,layer,util,dropdown,slider,colorpicker,element,upload,form,table,tree,transfer,carousel,rate,flow,layedit,code'
};
//清理
gulp.task('clear', function(cb) {
return del(['./'+ (argv.rc ? 'rc' : 'dist') +'/*'], cb);
});
gulp.task('clearRelease', function(cb) {
return del([releaseDir], cb);
});
gulp.task('alljs', task.alljs);
gulp.task('mincss', task.mincss);
gulp.task('font', task.font);
gulp.task('mv', task.mv);
gulp.task('release', task.release);
//完整任务 gulp
gulp.task('default', ['clear'], function(){ //rc 版gulp --rc
for(var key in task){
task[key]();
// 获取参数
const argv = require('minimist')(process.argv.slice(2), {
default: {
version: pkg.version
}
});
//发行版 gulp rls
gulp.task('rls', ['clearRelease'], function(){ // gulp rls
for(var key in task){
task[key]('release');
}
});
// 前置目录
const dir = {
rls: './release/zip/layui-v' + pkg.version
};
//打包 layer 独立版
gulp.task('layer', function(){
var dir = './release/layer';
// 输出目录
const dest = ({
dist: './dist'
,rls: dir.rls + '/layui'
}[argv.dest || 'dist'] || argv.dest) + (argv.vs ? '/'+ pkg.version : '');
// js
const js = () => {
let src = [
'./src/**/{layui,layui.all,'+ config.modules +'}.js'
];
return gulp.src(src).pipe(concat('layui.js', {newLine: ''}))
.pipe(header.apply(null, config.comment))
.pipe(gulp.dest(dest));
};
// css
const css = () => {
let src = [
'./src/css/**/*.css'
,'!./src/css/**/font.css'
];
return gulp.src(src).pipe(cleanCSS({
compatibility: 'ie8'
}))
//.pipe(concat('layui.css', {newLine: ''}))
.pipe(gulp.dest(dest +'/css'));
};
// files
const files = () => {
let src = ['./src/**/*.{eot,svg,ttf,woff,woff2,html,json,png,jpg,gif}'];
return gulp.src(src)
.pipe(gulp.dest(dest));
};
// cp
const cp = () => {
return gulp.src('./dist/**/*')
.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/default/*')
.pipe(gulp.dest(dir + '/src/theme/default'));
.pipe(gulp.dest(dest + '/src/theme/default'));
return gulp.src('./src/modules/layer.js')
.pipe(gulp.dest(dir + '/src'));
});
.pipe(gulp.dest(dest + '/src'));
};
//打包 layDate 独立版
gulp.task('laydate', function(){
//发行目录
var dir = './release/laydate'
//注释
,notes = [
'/** \n @Name<%= title %> \n @License: <%= license %> \n */ \n\n'
,{title: 'layDate 日期与时间组件', license: 'MIT'}
// 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/default/{font,laydate}.css')
.pipe(concat('laydate.css', {newLine: '\n\n'}))
.pipe(gulp.dest(dir + '/src/theme/default'));
// css
gulp.src('./src/css/modules/laydate.css')
.pipe(gulp.dest(dest + 'src/'));
//合并所依赖的 js 文件
return gulp.src(['./src/modules/{lay,laydate}.js'])
.pipe(concat('laydate.js', {newLine: ''}))
.pipe(header.apply(null, notes))
.pipe(gulp.dest(dir + '/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(concat('laydate.js', {newLine: ''}))
.pipe(header.apply(null, comment)) //追加头部
.pipe(gulp.dest(dest + 'src'));
};
// helper
exports.help = () => {
let usage = '\nUsage: gulp [options] tasks';
let parser = yargs.usage(usage, {
dest: {
type: 'string'
,desc: '定义输出目录可选项dist默认、rls、任意路径'
}
,vs: {
type: 'boolean'
,desc: '生成一个带版本号的文件夹'
}
});
parser.showHelp(console.log);
console.log([
'Tasks:'
,' default 默认任务'
,' rls 发行任务'
,' cp 将 dist 目录复制一份到参数 --dest 指向的目录'
].join('\n'), '\n\nExamples:\n gulp cp --dest ./v --vs', '\n');
return gulp.src('./');
};

View File

@ -1,178 +0,0 @@
/**
* @file karma自动化测试配置
* @author fe.xiaowu@gmail.com
*/
var url = require('url');
/**
* mock一个server供测试使用
*
* @param {Object} req request
* @param {Object} res response
* @param {Function} next 下一路由
*
* @example
* 请求 /api/mock 参数如:
* timeout - 超时时间, 默认 0
* statusCode - 状态码, 默认 200
* response - 响应内容, 默认 {}
* dataType - 响应格式, 默认 json
*/
var httpServer = function (req, res, next) {
if (req.url.indexOf('/api/mock') === -1) {
return next();
}
var data = url.parse(req.url, true).query;
setTimeout(function () {
res.statusCode = data.statusCode || 200;
res.setHeader('content-type', data.contentType || 'json');
res.end(data.response || '{}');
}, data.timeout || 0);
};
/**
* 源文件
*
* @type {Array}
*/
var sourceFileMap = [
'src/layui.js',
'src/lay/modules/jquery.js',
'src/lay/modules/carousel.js',
'src/lay/modules/code.js',
'src/lay/modules/element.js',
'src/lay/modules/flow.js',
'src/lay/modules/form.js',
'src/lay/modules/laydate.js',
'src/lay/modules/layedit.js',
'src/lay/modules/layer.js',
'src/lay/modules/laypage.js',
'src/lay/modules/laytpl.js',
'src/lay/modules/table.js',
'src/lay/modules/tree.js',
'src/lay/modules/upload.js',
'src/lay/modules/util.js',
'src/lay/modules/mobile/zepto.js',
'src/lay/modules/mobile/layer-mobile.js',
'src/lay/modules/mobile/upload-mobile.js'
];
/**
* 测试覆盖率文件, 要忽略 jquery.jszepto.js
*
* @type {Object}
*/
var coverageFileMap = {};
sourceFileMap.filter(function (uri) {
return !/(jquery|zepto)\.js$/.test(uri);
}).forEach(function (uri) {
coverageFileMap[uri] = ['coverage'];
});
module.exports = function (config) {
return {
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
// Important: 下列数组中文件将『逆序载入』
frameworks: ['mocha', 'chai', 'chai-sinon'],
// list of files / patterns to load in the browser
files: sourceFileMap.concat('test/**/*.js').concat({
pattern: 'src/css/**/*',
included: false
}, {
pattern: 'src/font/**/*',
included: false
}, {
pattern: 'src/images/**/*',
included: false
}),
// list of files to exclude
exclude: [],
client: {
mocha: {
// mocha测试超时6秒
timeout: 1000 * 6
}
},
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: coverageFileMap,
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: [
'mocha'
// 'coverage'
],
coverageReporter: {
// specify a common output directory
dir: '.',
reporters: [
// { type: 'html', subdir: 'report-html' },
{
type: 'lcov',
subdir: 'coverage'
},
{
type: 'text-summary'
}
]
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
// Note: 如果要调试Karma请设置为DEBUG
logLevel: config.LOG_INFO,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [
'PhantomJS'
],
// enable / disable watching file and executing tests whenever any file changes
// Note: 代码改动自动运行测试需要singleRun为false
autoWatch: false,
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
// 脚本调用请设为 true
singleRun: true,
middleware: ['httpServer'],
plugins: ['karma-*', {
'middleware:httpServer': [
'factory', function () {
return httpServer;
}
]
}]
};
};

View File

@ -1,109 +0,0 @@
/**
* @file karma配置
* @author fe.xiaowu@gmail.com
*/
var base = require('./karma.conf.base.js');
var customLaunchers = {
// Safari
sl_ios_safari: {
base: 'SauceLabs',
browserName: 'Safari'
},
// 安卓浏览器
// sl_android_4_4: {
// base: 'SauceLabs',
// browserName: 'android',
// version: '4.4'
// },
// sl_android_5: {
// base: 'SauceLabs',
// browserName: 'android',
// version: '5'
// },
sl_android_6: {
base: 'SauceLabs',
browserName: 'android',
version: '6'
},
// chrome
sl_ios_chrome: {
base: 'SauceLabs',
browserName: 'chrome'
},
// sl_ie_8: {
// base: 'SauceLabs',
// browserName: 'internet explorer',
// version: '8'
// },
sl_ie_9: {
base: 'SauceLabs',
browserName: 'internet explorer',
version: '9'
},
sl_ie_10: {
base: 'SauceLabs',
browserName: 'internet explorer',
version: '10'
},
sl_ie_11: {
base: 'SauceLabs',
browserName: 'internet explorer',
version: '11'
},
sl_edga: {
base: 'SauceLabs',
browserName: 'microsoftedge',
// platform: 'Windows 10'
},
// sl_firefox: {
// base: 'SauceLabs',
// browserName: 'firefox'
// }
};
// 不支持本地运行
if (!process.env.TRAVIS) {
console.error('不支持本地运行, 请使用 npm run test!');
process.exit(1);
}
// 变量检查
if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
console.error('---------------');
console.error('Make sure the SAUCE_USERNAME and SAUCE_ACCESS_KEY environment variables are set.');
console.error('---------------');
process.exit(1);
}
module.exports = function (config) {
var options = Object.assign(base(config), {
reporters: ['mocha', 'saucelabs'],
sauceLabs: {
'testName': 'layui',
'recordVideo': false,
'recordScreenshots': false,
'startConnect': false,
'connectOptions': {
'no-ssl-bump-domains': 'all'
},
'public': 'public',
'build': 'layui-build-' + process.env.TRAVIS_BUILD_NUMBER,
'tunnelIdentifier': process.env.TRAVIS_JOB_NUMBER
},
customLaunchers: customLaunchers,
browsers: Object.keys(customLaunchers),
captureTimeout: 1000 * 60 * 5,
browserNoActivityTimeout: 1000 * 60 * 5,
browserDisconnectTolerance: 3,
browserDisconnectTimeout: 10000
});
config.set(options);
};

View File

@ -1,12 +0,0 @@
/**
* @file karma配置
* @author fe.xiaowu@gmail.com
*/
var base = require('./karma.conf.base.js');
module.exports = function (config) {
var options = Object.assign(base(config), {});
config.set(options);
};

View File

@ -1,63 +1,41 @@
{
"name": "layui-src",
"name": "layui",
"realname": "layui",
"version": "2.6.3",
"description": "Classic modular front-end component library",
"version": "2.7.1",
"description": "Classic modular Front-End UI library",
"main": "dist/layui.js",
"license": "MIT",
"scripts": {
"test": "karma start karma.conf.unit.js",
"test:cov": "npm test -- --reporters mocha,coverage",
"test:sauce": "karma start karma.conf.sauce.js",
"test:watch": "npm test -- --auto-watch --no-single-run"
},
"scripts": {},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/sentsin/layui.git"
"url": "git+ssh://git@github.com/layui/layui.git"
},
"author": [
"sentsin <xu@sentsin.com>"
],
"homepage": "/",
"homepage": "https://github.com/layui/layui/",
"devDependencies": {
"chai": "^4.3.4",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0 ",
"gulp-header": "^1.8.8",
"gulp-if": "^2.0.1",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1",
"gulp-uglify": "^1.5.4",
"gulp-zip": "^4.0.0",
"karma": "^1.5.0",
"karma-chai": "^0.1.0",
"karma-chai-sinon": "^0.1.5",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.3",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sauce-launcher": "^1.1.0",
"minimist": "^1.2.5",
"mocha": "^3.2.0",
"sinon": "^3.2.1",
"sinon-chai": "^2.13.0"
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-footer": "^2.1.0",
"gulp-header": "^2.0.9",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.1.3",
"gulp-uglify": "^3.0.2",
"minimist": "^1.2.5"
},
"bugs": {
"url": "https://gitee.com/sentsin/layui/issues"
},
"directories": {
"doc": "doc",
"example": "examples",
"test": "test"
"dependencies": {
"layui": "file:"
},
"dependencies": {},
"keywords": [
"layui",
"ui",
"JavaScript Framework",
"toolkit",
"front-end component library"
"javascript",
"css",
"components",
"framework",
"library"
]
}

View File

@ -1,9 +1,7 @@
/**
@Name: layui
@Description: Classic modular front-end UI framework
@License: MIT
* Layui
* Classic modular Front-End UI library
* MIT Licensed
*/
@ -244,7 +242,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-icon-music:before{content:"\e690"}
/* 基本布局 */
.layui-main{position: relative; width: 1140px; margin: 0 auto;}
.layui-main{position: relative; width: 1160px; margin: 0 auto;}
.layui-header{position: relative; z-index: 1000; height: 60px;}
.layui-header a:hover{transition: all .5s; -webkit-transition: all .5s;}
.layui-side{position: fixed; left: 0; top: 0; bottom: 0; z-index: 999; width: 200px; overflow-x: hidden;}
@ -258,14 +256,14 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-layout-admin .layui-body{position: absolute; top: 60px; padding-bottom: 44px;}
.layui-layout-admin .layui-main{width: auto; margin: 0 15px;}
.layui-layout-admin .layui-footer{position: fixed; left: 200px; right: 0; bottom: 0; z-index: 990; height: 44px; line-height: 44px; padding: 0 15px; box-shadow: -1px 0 4px rgb(0 0 0 / 12%); background-color: #FAFAFA;}
.layui-layout-admin .layui-logo{position: absolute; left: 0; top: 0; width: 200px; height: 100%; line-height: 60px; text-align: center; color: #009688; font-size: 16px;}
.layui-layout-admin .layui-logo{position: absolute; left: 0; top: 0; width: 200px; height: 100%; line-height: 60px; text-align: center; color: #009688; font-size: 16px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);}
.layui-layout-admin .layui-header .layui-nav{background: none;}
.layui-layout-left{position: absolute !important; left: 200px; top: 0;}
.layui-layout-right{position: absolute !important; right: 0; top: 0;}
/* 栅格布局 */
.layui-container{position: relative; margin: 0 auto; padding: 0 15px; box-sizing: border-box;}
.layui-container{position: relative; margin: 0 auto; box-sizing: border-box;}
.layui-fluid{position: relative; margin: 0 auto; padding: 0 15px;}
.layui-row:before, .layui-row:after{content: ""; display: block; clear: both;}
@ -303,7 +301,8 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-col-xs-offset12{margin-left: 100%;}
/* 超小屏幕(手机) */
@media screen and (max-width: 768px) {
@media screen and (max-width: 767.98px) {
.layui-container{padding: 0 15px;}
.layui-hide-xs{display: none!important;}
.layui-show-xs-block{display: block!important;}
.layui-show-xs-inline{display: inline!important;}
@ -312,7 +311,7 @@ a cite{font-style: normal; *cursor:pointer;}
/* 小型屏幕(平板) */
@media screen and (min-width: 768px) {
.layui-container{width: 750px;}
.layui-container{width: 720px;}
.layui-hide-sm{display: none!important;}
.layui-show-sm-block{display: block!important;}
.layui-show-sm-inline{display: inline!important;}
@ -347,7 +346,7 @@ a cite{font-style: normal; *cursor:pointer;}
}
/* 中型屏幕(桌面) */
@media screen and (min-width: 992px) {
.layui-container{width: 970px;}
.layui-container{width: 960px;}
.layui-hide-md{display: none!important;}
.layui-show-md-block{display: block!important;}
.layui-show-md-inline{display: inline!important;}
@ -382,7 +381,7 @@ a cite{font-style: normal; *cursor:pointer;}
}
/* 大型屏幕(桌面) */
@media screen and (min-width: 1200px) {
.layui-container{width: 1170px;}
.layui-container{width: 1150px;}
.layui-hide-lg{display: none!important;}
.layui-show-lg-block{display: block!important;}
.layui-show-lg-inline{display: inline!important;}
@ -473,7 +472,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-progress-bar{position: absolute; left: 0; top: 0; width: 0; max-width: 100%; height: 6px; border-radius: 20px; text-align: right; background-color: #5FB878; transition: all .3s; -webkit-transition: all .3s;}
.layui-progress-big,
.layui-progress-big .layui-progress-bar{height: 18px; line-height: 18px;}
.layui-progress-text{position: relative; top: -20px; line-height: 18px; font-size: 12px; color: #666}
.layui-progress-text{position: relative; top: -20px; line-height: 18px; font-size: 12px; color: #5F5F5F}
.layui-progress-big .layui-progress-text{position: static; padding: 0 10px; color: #fff;}
@ -490,7 +489,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-colla-content{border-top-width: 1px; border-top-style: solid;}
.layui-colla-item:first-child{border-top: none;}
.layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #FAFAFA; cursor: pointer; font-size: 14px; overflow: hidden;}
.layui-colla-content{display: none; padding: 10px 15px; line-height: 1.6; color: #666;}
.layui-colla-content{display: none; padding: 10px 15px; line-height: 1.6; color: #5F5F5F;}
.layui-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;}
/* 卡片面板 */
@ -504,7 +503,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-card .layui-tab{margin: 0;}
/* 常规面板 */
.layui-panel{position: relative; border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); background-color: #fff; color: #666;}
.layui-panel{position: relative; border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); background-color: #fff; color: #5F5F5F;}
/* 窗口面板 */
.layui-panel-window{position: relative; padding: 15px; border-radius: 0; border-top: 5px solid #eee; background-color: #fff;}
@ -526,8 +525,8 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-bg-green{background-color: #009688!important; color: #fff!important;} /*绿*/
.layui-bg-cyan{background-color: #2F4056!important; color: #fff!important;} /*青*/
.layui-bg-blue{background-color: #1E9FFF!important; color: #fff!important;} /*蓝*/
.layui-bg-black{background-color: #393D49!important; color: #fff!important;} /**/
.layui-bg-gray{background-color: #FAFAFA!important; color: #666!important;} /*灰*/
.layui-bg-black{background-color: #393D49!important; color: #fff!important;} /**/
.layui-bg-gray{background-color: #FAFAFA!important; color: #5F5F5F!important;} /*浅*/
/* 边框 */
.layui-border,
@ -548,7 +547,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-pane .layui-form-item[pane],
.layui-layedit, .layui-layedit-tool{border-color: #eee;}
.layui-border{border-width: 1px; border-style: solid; color: #666!important;}
.layui-border{border-width: 1px; border-style: solid; color: #5F5F5F!important;}
.layui-border-red{border-width: 1px; border-style: solid; border-color: #FF5722!important; color: #FF5722!important;}
.layui-border-orange{border-width: 1px; border-style: solid; border-color: #FFB800!important; color: #FFB800!important;}
.layui-border-green{border-width: 1px; border-style: solid; border-color: #009688!important; color: #009688!important;}
@ -560,26 +559,39 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-timeline-item:before{background-color: #eee;}
/* 文本区域 */
.layui-text{line-height: 1.6; font-size: 14px; color: #666;}
.layui-text{line-height: 1.6; font-size: 14px; color: #5F5F5F;}
.layui-text h1,
.layui-text h2,
.layui-text h3{font-weight: 500; color: #333;}
.layui-text h1{font-size: 30px;}
.layui-text h3,
.layui-text h4,
.layui-text h5,
.layui-text h6{font-weight: 500; color: #333;}
.layui-text h1{font-size: 32px;}
.layui-text h2{font-size: 24px;}
.layui-text h3{font-size: 18px;}
.layui-text h4{font-size: 16px;}
.layui-text h5{font-size: 14px;}
.layui-text h6{font-size: 13px;}
.layui-text a:not(.layui-btn){color: #01AAED;}
.layui-text a:not(.layui-btn):hover{text-decoration: underline;}
.layui-text ul{padding: 5px 0 5px 15px;}
.layui-text ul,
.layui-text ol{padding: 5px 0 5px 15px;}
.layui-text ul li{margin-top: 5px; list-style-type: disc;}
.layui-text ol li{margin-top: 5px; list-style-type: decimal;}
.layui-text em,
.layui-word-aux{color: #999 !important; padding-left: 5px !important; padding-right: 5px !important;}
.layui-text p{margin: 15px 0;}
.layui-text p:first-child{margin-top: 0;}
.layui-text p:last-child{margin-bottom: 0;}
.layui-text blockquote:not(.layui-elem-quote){padding: 5px 15px; border-left: 5px solid #eee;}
.layui-text pre:not(.layui-code){padding: 15px; font-family: Lucida Console,Consolas,Courier New; background-color: #FAFAFA;}
/* 字体大小及颜色 */
.layui-font-12{font-size: 12px;}
.layui-font-14{font-size: 14px;}
.layui-font-16{font-size: 16px;}
.layui-font-18{font-size: 18px;}
.layui-font-20{font-size: 20px;}
.layui-font-12{font-size: 12px !important;;}
.layui-font-14{font-size: 14px !important;}
.layui-font-16{font-size: 16px !important;}
.layui-font-18{font-size: 18px !important;}
.layui-font-20{font-size: 20px !important;}
.layui-font-red{color: #FF5722 !important;} /*赤*/
.layui-font-orange{color: #FFB800!important;} /*橙*/
@ -597,7 +609,7 @@ a cite{font-style: normal; *cursor:pointer;}
*/
.layui-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; padding: 0 18px; border: 1px solid transparent; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
.layui-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; border: 1px solid transparent; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
.layui-btn:hover{opacity: 0.8; filter:alpha(opacity=80); color: #fff;}
.layui-btn:active{opacity: 1; filter:alpha(opacity=100);}
.layui-btn+.layui-btn{margin-left: 10px;}
@ -612,13 +624,13 @@ a cite{font-style: normal; *cursor:pointer;}
/* 圆角 */.layui-btn-radius{border-radius: 100px;}
.layui-btn .layui-icon{padding: 0 2px; vertical-align: middle\0; vertical-align: bottom;}
/* 原始 */.layui-btn-primary{border-color: #d2d2d2; background: none; color: #666;}
/* 原始 */.layui-btn-primary{border-color: #d2d2d2; background: none; color: #5F5F5F;}
.layui-btn-primary:hover{border-color: #009688; color: #333;}
/* 百搭 */.layui-btn-normal{background-color: #1E9FFF;}
/* 暖色 */.layui-btn-warm{background-color: #FFB800;}
/* 警告 */.layui-btn-danger{background-color: #FF5722;}
/* 选中 */.layui-btn-checked{background-color: #5FB878;}
/* 禁用 */.layui-btn-disabled,.layui-btn-disabled:hover,.layui-btn-disabled:active{border-color: #eee; background-color: #FBFBFB; color: #d2d2d2; cursor: not-allowed; opacity: 1;}
/* 禁用 */.layui-btn-disabled, .layui-btn-disabled:hover, .layui-btn-disabled:active{border-color: #eee !important; background-color: #FBFBFB !important; color: #d2d2d2 !important; cursor: not-allowed !important; opacity: 1;}
/* 大型 */.layui-btn-lg{height: 44px; line-height: 44px; padding: 0 25px; font-size: 16px;}
/* 小型 */.layui-btn-sm{height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px;}
@ -636,7 +648,7 @@ a cite{font-style: normal; *cursor:pointer;}
/* 流体 */.layui-btn-fluid{width: 100%;}
/** 表单 **/
.layui-input, .layui-textarea, .layui-select{height: 38px; line-height: 1.3; line-height: 38px\9; border-width: 1px; border-style: solid; background-color: #fff; border-radius: 2px;}
.layui-input, .layui-textarea, .layui-select{height: 38px; line-height: 1.3; line-height: 38px\9; border-width: 1px; border-style: solid; background-color: #fff; color: rgba(0,0,0,.85); border-radius: 2px;}
.layui-input::-webkit-input-placeholder,
.layui-textarea::-webkit-input-placeholder,
.layui-select::-webkit-input-placeholder{line-height: 1.3;}
@ -661,15 +673,18 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-item .layui-input-inline{float: left; width: 190px; margin-right: 10px;}
.layui-form-text .layui-input-inline{width: auto;}
/* 分割块 */.layui-form-mid{position: relative; float: left; display: block; padding: 9px 0 !important; line-height: 20px; margin-right: 10px;}
/* 警告域 */.layui-form-danger:focus
,.layui-form-danger+.layui-form-select .layui-input{border-color: #FF5722 !important;}
/* 分割块 */
.layui-form-mid{position: relative; float: left; display: block; padding: 9px 0 !important; line-height: 20px; margin-right: 10px;}
/* 警告条 */
.layui-form-danger:focus,
.layui-form-danger+.layui-form-select .layui-input{border-color: #FF5722 !important;}
/* 下拉选择 */.layui-form-select{position: relative;}
/* 下拉选择 */
.layui-form-select{position: relative;}
.layui-form-select .layui-input{padding-right: 30px; cursor: pointer;}
.layui-form-select .layui-edge{position: absolute; right: 10px; top: 50%; margin-top: -3px; cursor: pointer; border-width: 6px; border-top-color: #c2c2c2; border-top-style: solid; transition: all .3s; -webkit-transition: all .3s;}
.layui-form-select dl{display: none; position: absolute; left: 0; top: 42px; padding: 5px 0; z-index: 899; min-width: 100%; border: 1px solid #d2d2d2; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); box-sizing: border-box;}
.layui-form-select dl{display: none; position: absolute; left: 0; top: 42px; padding: 5px 0; z-index: 899; min-width: 100%; border: 1px solid #eee; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box;}
.layui-form-select dl dt,
.layui-form-select dl dd{padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.layui-form-select dl dt{font-size: 12px; color: #999;}
@ -678,6 +693,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-select .layui-select-group dd{padding-left: 20px;}
.layui-form-select dl dd.layui-select-tips{padding-left: 10px !important; color: #999;}
.layui-form-select dl dd.layui-this{background-color: #5FB878; color: #fff;}
/*.layui-form-select dl dd.layui-this{background-color: #F6F6F6; color: #5FB878; font-weight: 700;}*/
.layui-form-select dl dd.layui-disabled{background-color: #fff;}
.layui-form-selected dl{display: block;}
.layui-form-selected .layui-edge{margin-top: -9px; -webkit-transform:rotate(180deg); transform: rotate(180deg);}
@ -702,12 +718,13 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-item .layui-form-checkbox{margin-top: 4px;}
/* 复选框-原始风格 */.layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 28px; padding-right: 0; background: none;}
.layui-form-checkbox[lay-skin="primary"] span{padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #666;}
.layui-form-checkbox[lay-skin="primary"] span{padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;}
.layui-form-checkbox[lay-skin="primary"] i{right: auto; left: 0; width: 16px; height: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-checkbox[lay-skin="primary"]:hover i{border-color: #5FB878; color: #fff;}
.layui-form-checked[lay-skin="primary"] i{border-color: #5FB878 !important; background-color: #5FB878; color: #fff;}
.layui-checkbox-disbaled[lay-skin="primary"] span{background: none!important; color: #c2c2c2!important;}
.layui-checkbox-disbaled[lay-skin="primary"]:hover i{border-color: #d2d2d2;}
.layui-checkbox-disabled[lay-skin="primary"] span{background: none!important; color: #c2c2c2!important;}
.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] i{background: #eee!important; border-color: #eee!important;}
.layui-checkbox-disabled[lay-skin="primary"]:hover i{border-color: #d2d2d2;}
.layui-form-item .layui-form-checkbox[lay-skin="primary"]{margin-top: 10px;}
/* 复选框-开关风格 */.layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 22px; line-height: 22px; min-width: 35px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
@ -717,11 +734,11 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-onswitch i{left: 100%; margin-left: -21px; background-color: #fff;}
.layui-form-onswitch em{margin-left: 5px; margin-right: 21px; color: #fff!important;}
.layui-checkbox-disbaled{border-color: #eee !important;}
.layui-checkbox-disbaled span{background-color: #eee !important;}
.layui-checkbox-disbaled i{border-color: #eee !important;}
.layui-checkbox-disbaled em{color: #d2d2d2 !important;}
.layui-checkbox-disbaled:hover i{color: #fff !important;}
.layui-checkbox-disabled{border-color: #eee !important;}
.layui-checkbox-disabled span{background-color: #eee !important;}
.layui-checkbox-disabled i{border-color: #eee !important;}
.layui-checkbox-disabled em{color: #d2d2d2 !important;}
.layui-checkbox-disabled:hover i{color: #fff !important;}
/* 单选框 */
*[lay-radio]{display: none;}
@ -731,10 +748,10 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-radioed,
.layui-form-radioed>i,
.layui-form-radio:hover *{color: #5FB878;}
.layui-radio-disbaled>i{color: #eee !important;}
.layui-radio-disbaled *{color: #c2c2c2!important;}
.layui-radio-disabled>i{color: #eee !important;}
.layui-radio-disabled *{color: #c2c2c2!important;}
/* 表单方框风格 */.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #FBFBFB; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;}
/* 表单方框风格 */.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #FAFAFA; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;}
.layui-form-pane .layui-input-inline{margin-left: -1px;}
.layui-form-pane .layui-input-block{margin-left: 110px; left: -1px;}
.layui-form-pane .layui-input{border-radius: 0 2px 2px 0;}
@ -754,7 +771,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-item .layui-form-label{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.layui-form-item .layui-inline{display: block; margin-right: 0; margin-bottom: 20px; clear: both;}
.layui-form-item .layui-inline:after{content:'\20'; clear:both; display:block; height:0;}
.layui-form-item .layui-input-inline{display: block; float: none; left: -3px; width: auto; margin: 0 0 10px 112px; }
.layui-form-item .layui-input-inline{display: block; float: none; left: -3px; width: auto !important; margin: 0 0 10px 112px; }
.layui-form-item .layui-input-inline+.layui-form-mid{margin-left: 110px; top: -5px; padding: 0;}
.layui-form-item .layui-form-checkbox{margin-right: 5px; margin-bottom: 5px;}
}
@ -836,7 +853,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-flow-more a i{font-size: 30px; color: #737383;}
/** 表格 **/
.layui-table{width: 100%; margin: 10px 0; background-color: #fff; color: #666;}
.layui-table{width: 100%; margin: 10px 0; background-color: #fff; color: #5F5F5F;}
.layui-table tr{transition: all .3s; -webkit-transition: all .3s;}
.layui-table th{text-align: left; font-weight: 400;}
@ -847,11 +864,12 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-total tr,
.layui-table-patch,
.layui-table-mend,
.layui-table[lay-even] tr:nth-child(even),
.layui-table tbody tr:hover,
.layui-table-hover,
.layui-table-click{background-color: #FAFAFA;}
.layui-table[lay-even] tr:nth-child(even){background-color: #f2f2f2;}
.layui-table th,
.layui-table td,
.layui-table[lay-skin="line"],
@ -876,20 +894,20 @@ a cite{font-style: normal; *cursor:pointer;}
/* 大表格 */.layui-table[lay-size="lg"] th,
.layui-table[lay-size="lg"] td{padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;}
.layui-table-view .layui-table[lay-size="lg"] .layui-table-cell{height: 40px; line-height: 40px;}
.layui-table-view .layui-table[lay-size="lg"] .layui-table-cell{height: 50px; line-height: 40px;}
/* 小表格 */.layui-table[lay-size="sm"] th,
.layui-table[lay-size="sm"] td{padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; font-size: 12px;}
.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell{height: 20px; line-height: 20px;}
.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell{height: 30px; line-height: 20px;}
/* 数据表格 */
.layui-table[lay-data]{display: none;}
.layui-table-box{position: relative; overflow: hidden;}
.layui-table-view{margin: 10px 0;}
.layui-table-view .layui-table{position: relative; width: auto; margin: 0;}
.layui-table-view .layui-table{position: relative; width: auto; margin: 0; border: 0; border-collapse: separate;}
.layui-table-view .layui-table[lay-skin="line"]{border-width: 0; border-right-width: 1px;}
.layui-table-view .layui-table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;}
.layui-table-view .layui-table th,
.layui-table-view .layui-table td{padding: 5px 0; border-top: none; border-left: none;}
.layui-table-view .layui-table td{padding: 0; border-top: none; border-left: none;}
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span{cursor: pointer;}
.layui-table-view .layui-table td{cursor: default;}
.layui-table-view .layui-table td[data-edit="text"]{cursor: text;}
@ -901,6 +919,10 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-header{border-width: 0; border-bottom-width: 1px; overflow: hidden;}
.layui-table-header .layui-table{margin-bottom: -1px;}
.layui-table-column{position: relative; width: 100%; min-height: 41px; padding: 8px 16px; border-width: 0; border-bottom-width: 1px;}
.layui-table-column .layui-btn-container{margin-bottom: -8px;}
.layui-table-column .layui-btn-container .layui-btn{margin-right: 8px; margin-bottom: 8px;}
.layui-table-tool .layui-inline[lay-event]{position: relative; width: 26px; height: 26px; padding: 5px; line-height: 16px; margin-right: 10px; text-align: center; color: #333; border: 1px solid #ccc; cursor: pointer; -webkit-transition: .5s all; transition: .5s all;}
.layui-table-tool .layui-inline[lay-event]:hover{border: 1px solid #999;}
.layui-table-tool-temp{padding-right: 120px;}
@ -920,37 +942,39 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-sort{width: 10px; height: 20px; margin-left: 5px; cursor: pointer!important;}
.layui-table-sort .layui-edge{position: absolute; left: 5px; border-width: 5px;}
.layui-table-sort .layui-table-sort-asc{top: 3px; border-top: none; border-bottom-style: solid; border-bottom-color: #b2b2b2;}
.layui-table-sort .layui-table-sort-asc:hover{border-bottom-color: #666;}
.layui-table-sort .layui-table-sort-asc:hover{border-bottom-color: #5F5F5F;}
.layui-table-sort .layui-table-sort-desc{bottom: 5px; border-bottom: none; border-top-style: solid; border-top-color: #b2b2b2;}
.layui-table-sort .layui-table-sort-desc:hover{border-top-color: #666;}
.layui-table-sort .layui-table-sort-desc:hover{border-top-color: #5F5F5F;}
.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc{border-bottom-color: #000;}
.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc{border-top-color: #000;}
.layui-table-cell{height: 28px; line-height: 28px; padding: 0 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.layui-table-cell{height: 38px; line-height: 28px; padding: 6px 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: -1px; padding: 0;}
.layui-table-cell .layui-table-link{color: #01AAED;}
.layui-table-cell[align="center"]{-webkit-box-pack: center;}
.layui-table-cell[align="right"]{-webkit-box-pack: end;}
.laytable-cell-checkbox,
.laytable-cell-radio,
.laytable-cell-space,
.laytable-cell-numbers{padding: 0; text-align: center;}
.laytable-cell-numbers{text-align: center; -webkit-box-pack: center;}
.layui-table-body{position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px;}
.layui-table-body .layui-none{line-height: 26px; padding: 15px; text-align: center; color: #999;}
.layui-table-body .layui-none{line-height: 26px; padding: 30px 15px; text-align: center; color: #999;}
.layui-table-fixed{position: absolute; left: 0; top: 0; z-index: 101;}
.layui-table-fixed .layui-table-body{overflow: hidden;}
.layui-table-fixed-l{box-shadow: 0 -1px 8px rgba(0,0,0,.08);}
.layui-table-fixed-l{box-shadow: 1px 0 8px rgba(0,0,0,.08);}
.layui-table-fixed-r{left: auto; right: -1px; border-width: 0; border-left-width: 1px; box-shadow: -1px 0 8px rgba(0,0,0,.08);}
.layui-table-fixed-r .layui-table-header{position: relative; overflow: visible;}
.layui-table-mend{position: absolute; right: -49px; top: 0; height: 100%; width: 50px;}
.layui-table-tool{position: relative; z-index: 890; width: 100%; min-height: 50px; line-height: 30px; padding: 10px 15px; border-width: 0; border-bottom-width: 1px;}
.layui-table-tool{position: relative; z-index: 890; width: 100%; min-height: 50px; line-height: 30px; padding: 10px 15px; border-width: 0; border-bottom-width: 1px; /*box-shadow: 0 1px 8px 0 rgb(0 0 0 / 8%);*/}
.layui-table-tool .layui-btn-container{margin-bottom: -10px;}
.layui-table-total{margin-bottom: -1px; border-width: 0; border-top-width: 1px; overflow: hidden;}
.layui-table-page{position: relative; width: 100%; padding: 7px 7px 0; border-width: 0; border-top-width: 1px; height: 41px; margin-bottom: -1px; font-size: 12px; white-space: nowrap; overflow: hidden;}
.layui-table-page{z-index: 880; border-width: 0; border-top-width: 1px; margin-bottom: -1px; white-space: nowrap; overflow: hidden;}
.layui-table-page>div{height: 26px;}
.layui-table-page .layui-laypage{margin: 0;}
.layui-table-page .layui-laypage a,
@ -958,18 +982,19 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-page .layui-laypage a,
.layui-table-page .layui-laypage span.layui-laypage-curr{padding: 0 12px;}
.layui-table-page .layui-laypage span{margin-left: 0; padding: 0;}
.layui-table-page .layui-laypage .layui-laypage-prev{margin-left: -7px!important;}
.layui-table-page .layui-laypage .layui-laypage-prev{margin-left: -11px!important;}
.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em{left: 0; top: 0; padding: 0;}
.layui-table-page .layui-laypage input,
.layui-table-page .layui-laypage button{height: 26px; line-height: 26px; }
.layui-table-page .layui-laypage input{width: 40px;}
.layui-table-page .layui-laypage button{padding: 0 10px;}
.layui-table-page select{height: 18px;}
.layui-table-view select[lay-ignore]{display: inline-block;}
.layui-table-pagebar{float: right; line-height: 32px;}
.layui-table-view select[lay-ignore]{display: inline-block;}
.layui-table-patch .layui-table-cell{padding: 0; width: 30px;}
.layui-table-edit{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 14px 1px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15)}
.layui-table-edit{position: absolute; left: 0; top: 0; z-index: 900; min-width: 100%; min-height: 100%; padding: 5px 14px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15); background-color: #fff;}
.layui-table-edit:focus{border-color: #5FB878!important;}
select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
.layui-table-view .layui-form-switch,
@ -985,15 +1010,15 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
.layui-table-grid-down:hover{background-color: #fbfbfb;}
body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.12);}
.layui-table-tips-main{margin: -44px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #666;}
.layui-table-tips-c{position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #666; border-radius: 50%; color: #fff;}
.layui-table-tips-main{margin: -49px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #5F5F5F;}
.layui-table-tips-c{position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #5F5F5F; border-radius: 50%; color: #fff;}
.layui-table-tips-c:hover{background-color: #777;}
.layui-table-tips-c:before{position: relative; right: -2px;}
/** 文件上传 **/
.layui-upload-file{display: none!important; opacity: .01; filter: Alpha(opacity=1);}
.layui-upload-list{margin: 10px 0;}
.layui-upload-choose{padding: 0 10px; color: #999;}
.layui-upload-choose{max-width: 200px; padding: 0 10px; color: #999; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.layui-upload-drag{position: relative; display: inline-block; padding: 30px; border: 1px dashed #e2e2e2; background-color: #fff; text-align: center; cursor: pointer; color: #999;}
.layui-upload-drag .layui-icon{font-size: 50px; color: #009688;}
.layui-upload-drag[lay-over]{border-color: #009688}
@ -1001,6 +1026,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-upload-iframe{position: absolute; width: 0; height: 0; border: 0; visibility: hidden}
.layui-upload-wrap{position: relative; display: inline-block; vertical-align: middle;}
.layui-upload-wrap .layui-upload-file{display: block!important; position: absolute; left: 0; top: 0; z-index: 10; font-size: 100px; width: 100%; height: 100%; opacity: .01; filter: Alpha(opacity=1); cursor: pointer;}
.layui-btn-container .layui-upload-choose{padding-left: 0;}
/* 基础菜单元素 */
@ -1008,7 +1034,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-menu *{box-sizing: border-box;}
.layui-menu li,
.layui-menu-body-title a{padding: 5px 15px;}
.layui-menu li{position: relative; margin: 1px 0; width: calc(100% + 1px); line-height: 22px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
.layui-menu li{position: relative; margin: 1px 0; width: calc(100% + 1px); line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
.layui-menu li:hover{background-color: #F6F6F6; }
.layui-menu-item-parent:hover>.layui-menu-body-panel{display: block; animation-name: layui-fadein; animation-duration: 0.3s; animation-fill-mode: both; animation-delay:.2s;}
@ -1058,65 +1084,48 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
/* 下拉菜单 */
.layui-dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 66666666; margin: 5px 0; min-width: 100px;}
.layui-dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; margin: 5px 0; min-width: 100px;}
.layui-dropdown:before{content:""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px;}
/** 穿梭框 **/
.layui-transfer-box,
.layui-transfer-header,
.layui-transfer-search{border-width: 0; border-style: solid; border-color: #eee}
.layui-transfer-box{position: relative; display: inline-block; vertical-align: middle; border-width: 1px; width: 200px; height: 360px; border-radius: 2px; background-color:#fff;}
.layui-transfer-box .layui-form-checkbox{width: 100%; margin: 0 !important;}
.layui-transfer-header{height: 38px; line-height: 38px; padding: 0 10px; border-bottom-width: 1px;}
.layui-transfer-search{position:relative; padding: 10px; border-bottom-width: 1px;}
.layui-transfer-search .layui-input{height: 32px; padding-left: 30px; font-size: 12px;}
.layui-transfer-search .layui-icon-search{position: absolute; left: 20px; top: 50%; margin-top: -8px; color: #666;}
.layui-transfer-active{margin: 0 15px; display: inline-block; vertical-align: middle;}
.layui-transfer-active .layui-btn{display: block; margin: 0; padding: 0 15px; background-color: #5FB878; border-color: #5FB878; color: #fff;}
.layui-transfer-active .layui-btn-disabled{background-color: #FBFBFB; border-color: #eee; color: #d2d2d2;}
.layui-transfer-active .layui-btn:first-child{margin-bottom: 15px;}
.layui-transfer-active .layui-btn .layui-icon{margin: 0; font-size: 14px !important;}
.layui-transfer-data{padding: 5px 0; overflow: auto;}
.layui-transfer-data li{height: 32px; line-height: 32px; padding: 0 10px;}
.layui-transfer-data li:hover{background-color: #F6F6F6; transition: .5s all;}
.layui-transfer-data .layui-none{padding: 15px 10px; text-align: center; color: #999;}
/** 导航菜单 **/
.layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;}
.layui-nav *{font-size: 14px;}
.layui-nav .layui-nav-item{position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; line-height: 60px;}
.layui-nav .layui-nav-item a{display: block; padding: 0 20px; color: #fff; color: rgba(255,255,255,.7); transition: all .3s; -webkit-transition: all .3s;}
.layui-nav-bar,
.layui-nav .layui-this:after,
.layui-nav-tree .layui-nav-itemed:after{position: absolute; left: 0; top: 0; width: 0; height: 5px; background-color: #5FB878; transition: all .2s; -webkit-transition: all .2s;}
.layui-nav .layui-this:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 5px; background-color: #5FB878; transition: all .2s; -webkit-transition: all .2s; pointer-events: none;}
.layui-nav-bar{z-index: 1000;}
.layui-nav[lay-bar="disabled"] .layui-nav-bar{display: none;}
.layui-nav[lay-bar="disabled"].layui-this:after{}
.layui-nav .layui-this a
,.layui-nav .layui-nav-item a:hover{color: #fff;}
.layui-nav .layui-this:after{content: ""; top: auto; bottom: 0; width: 100%;}
.layui-nav .layui-this:after{top: auto; bottom: 0; width: 100%;}
.layui-nav-img{width: 30px; height: 30px; margin-right: 10px; border-radius: 50%;}
.layui-nav .layui-nav-more{content: ""; width: 0; height: 0; border-style: dashed; border-color: transparent; overflow: hidden; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;}
.layui-nav .layui-nav-more{position: absolute; top: 50%; right: 3px; margin-top: -4px; border-width: 6px; border-top-style: solid; border-top-color: #fff; border-top-color: rgba(255,255,255,.7);}
.layui-nav .layui-nav-more{position: absolute; top: 0; right: 3px; left: auto !important; margin-top: 0; font-size: 12px; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;}
.layui-nav .layui-nav-mored,
.layui-nav-itemed > a .layui-nav-more{margin-top: -9px; border-style: dashed; border-color: transparent; border-bottom-style: solid; border-bottom-color: #fff;}
.layui-nav-itemed > a .layui-nav-more{transform: rotate(180deg);}
.layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
.layui-nav .layui-nav-child a{color: #333;}
.layui-nav .layui-nav-child a:hover{background-color: #F6F6F6; color: #5FB878;}
.layui-nav-child dd{position: relative;}
.layui-nav-child dd.layui-this{background-color: #5FB878; color: #fff;}
.layui-nav .layui-nav-child dd.layui-this a{background-color: #5FB878; color: #fff;}
.layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #eee; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
.layui-nav .layui-nav-child a{color: #5F5F5F; color: rgba(0,0,0,.8);}
.layui-nav .layui-nav-child a:hover{background-color: #F6F6F6; color: rgba(0,0,0,.8);}
.layui-nav-child dd{margin: 1px 0; position: relative;}
.layui-nav-child dd.layui-this{background-color: #F6F6F6; color: #000;}
.layui-nav-child dd.layui-this:after{display: none;}
.layui-nav-child-r{left: auto; right: 0;}
.layui-nav-child-c{text-align: center;}
/* 垂直导航菜单 */.layui-nav-tree{width: 200px; padding: 0;}
.layui-nav-tree .layui-nav-item{display: block; width: 100%; line-height: 45px;}
.layui-nav-tree .layui-nav-item a{position: relative; height: 45px; line-height: 45px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.layui-nav-tree .layui-nav-item a:hover{background-color: #4E5465;}
.layui-nav-tree .layui-nav-item{display: block; width: 100%; line-height: 40px;}
.layui-nav-tree .layui-nav-item a{position: relative; height: 40px; line-height: 40px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.layui-nav-tree .layui-nav-item>a{padding-top: 5px; padding-bottom: 5px;}
.layui-nav-tree .layui-nav-more{right: 15px;}
.layui-nav-tree .layui-nav-item>a .layui-nav-more{padding: 5px 0;}
.layui-nav-tree .layui-nav-bar{width: 5px; height: 0;}
.layui-side .layui-nav-tree .layui-nav-bar{width: 2px;}
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-this>a:hover,
@ -1129,41 +1138,32 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-nav-tree .layui-nav-bar{background-color: #009688;}
.layui-nav-tree .layui-nav-child{position: relative; z-index: 0; top: 0; border: none; box-shadow: none;}
.layui-nav-tree .layui-nav-child a{height: 40px; line-height: 40px;}
.layui-nav-tree .layui-nav-child dd{margin: 0;}
.layui-nav-tree .layui-nav-child a{color: #fff; color: rgba(255,255,255,.7);}
.layui-nav-tree .layui-nav-child a:hover,
.layui-nav-tree .layui-nav-child{background: none; color: #fff;}
.layui-nav-tree .layui-nav-more{right: 10px;}
.layui-nav-itemed>.layui-nav-child{display: block; padding: 0; background-color: rgba(0,0,0,.3) !important;}
.layui-nav-itemed>.layui-nav-child{display: block; background-color: rgba(0,0,0,.3) !important;}
.layui-nav-itemed>.layui-nav-child>.layui-this>.layui-nav-child{display: block;}
/* 侧边 */.layui-nav-side{position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;}
/* 导航主题色 */.layui-bg-blue .layui-nav-bar,
.layui-bg-blue .layui-this:after,
.layui-bg-blue .layui-nav-itemed:after{background-color: #93D1FF;}
.layui-bg-blue .layui-nav-child dd.layui-this{background-color: #1E9FFF;}
.layui-nav-tree.layui-bg-blue .layui-nav-title a,
.layui-nav-tree.layui-bg-blue .layui-nav-title a:hover,
.layui-bg-blue .layui-nav-itemed>a{background-color: #007DDB !important;}
/** 面包屑 **/
.layui-breadcrumb{visibility: hidden; font-size: 0;}
.layui-breadcrumb>*{font-size: 14px;}
.layui-breadcrumb a{color: #999 !important;}
.layui-breadcrumb a:hover{color: #5FB878 !important;}
.layui-breadcrumb a cite{color: #666; font-style: normal;}
.layui-breadcrumb a cite{color: #5F5F5F; font-style: normal;}
.layui-breadcrumb span[lay-separator]{margin: 0 10px; color: #999;}
/** Tab选项卡 **/
/** Tab 选项卡 **/
.layui-tab{margin: 10px 0; text-align: left !important;}
.layui-tab[overflow]>.layui-tab-title{overflow: hidden;}
.layui-tab-title{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s; -webkit-transition: all .2s;}
.layui-tab-title li{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .2s; -webkit-transition: all .2s;}
.layui-tab-title li{position: relative; line-height: 40px; min-width: 65px; padding: 0 15px; text-align: center; cursor: pointer;}
.layui-tab-title li a{display: block;}
.layui-tab-title li a{display: block; padding: 0 15px; margin: 0 -15px;}
.layui-tab-title .layui-this{color: #000;}
.layui-tab-title .layui-this:after{position: absolute; left:0; top: 0; content: ""; width:100%; height: 41px; border-width: 1px; border-style: solid; border-bottom-color: #fff; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none;}
@ -1177,15 +1177,15 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-tab-content{padding: 15px 0;}
/* Tab关闭 */.layui-tab-title li .layui-tab-close{position: relative; display: inline-block; width: 18px; height: 18px; line-height: 20px; margin-left: 8px; top: 1px; text-align: center; font-size: 14px; color: #c2c2c2; transition: all .2s; -webkit-transition: all .2s;}
/* Tab 关闭 */.layui-tab-title li .layui-tab-close{position: relative; display: inline-block; width: 18px; height: 18px; line-height: 20px; margin-left: 8px; top: 1px; text-align: center; font-size: 14px; color: #c2c2c2; transition: all .2s; -webkit-transition: all .2s;}
.layui-tab-title li .layui-tab-close:hover{border-radius: 2px; background-color: #FF5722; color: #fff;}
/* Tab简洁风格 */.layui-tab-brief > .layui-tab-title .layui-this{color: #009688;}
/* Tab 简洁风格 */.layui-tab-brief > .layui-tab-title .layui-this{color: #009688;}
.layui-tab-brief > .layui-tab-title .layui-this:after
,.layui-tab-brief > .layui-tab-more li.layui-this:after{border: none; border-radius: 0; border-bottom: 2px solid #5FB878;}
.layui-tab-brief[overflow] > .layui-tab-title .layui-this:after{top: -1px;}
/* Tab卡片风格 */.layui-tab-card{border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
/* Tab 卡片风格 */.layui-tab-card{border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.layui-tab-card > .layui-tab-title{background-color: #FAFAFA;}
.layui-tab-card > .layui-tab-title li{margin-right: -1px; margin-left: -1px;}
.layui-tab-card > .layui-tab-title .layui-this{background-color: #fff; }
@ -1212,7 +1212,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-badge-rim{position:relative; display: inline-block; padding: 0 6px; font-size: 12px; text-align: center; background-color: #FF5722; color: #fff; border-radius: 2px;}
.layui-badge{height: 18px; line-height: 18px;}
.layui-badge-dot{width: 8px; height: 8px; padding: 0; border-radius: 50%;}
.layui-badge-rim{height: 18px; line-height: 18px; border-width: 1px; border-style: solid; background-color: #fff; color: #666;}
.layui-badge-rim{height: 18px; line-height: 18px; border-width: 1px; border-style: solid; background-color: #fff; color: #5F5F5F;}
.layui-btn .layui-badge,
.layui-btn .layui-badge-dot{margin-left: 5px;}
@ -1289,7 +1289,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
/** 表情面板 **/
body .layui-util-face{border: none; background: none;}
body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; color:#666; box-shadow:none}
body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; color:#5F5F5F; box-shadow:none}
.layui-util-face .layui-layer-TipsG{display:none;}
.layui-util-face ul{position:relative; width:372px; padding:10px; border:1px solid #D9D9D9; background-color:#fff; box-shadow: 0 0 20px rgba(0,0,0,.2);}
.layui-util-face ul li{cursor: pointer; float: left; border: 1px solid #e8e8e8; height: 22px; width: 26px; overflow: hidden; margin: -1px 0 0 -1px; padding: 4px 2px; text-align: center;}
@ -1298,7 +1298,27 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
/** 代码文本修饰 **/
.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 12px;}
/** 评分组件 By star1029 **/
/** 穿梭框 **/
.layui-transfer-box,
.layui-transfer-header,
.layui-transfer-search{border-width: 0; border-style: solid; border-color: #eee}
.layui-transfer-box{position: relative; display: inline-block; vertical-align: middle; border-width: 1px; width: 200px; height: 360px; border-radius: 2px; background-color:#fff;}
.layui-transfer-box .layui-form-checkbox{width: 100%; margin: 0 !important;}
.layui-transfer-header{height: 38px; line-height: 38px; padding: 0 10px; border-bottom-width: 1px;}
.layui-transfer-search{position:relative; padding: 10px; border-bottom-width: 1px;}
.layui-transfer-search .layui-input{height: 32px; padding-left: 30px; font-size: 12px;}
.layui-transfer-search .layui-icon-search{position: absolute; left: 20px; top: 50%; margin-top: -8px; color: #5F5F5F;}
.layui-transfer-active{margin: 0 15px; display: inline-block; vertical-align: middle;}
.layui-transfer-active .layui-btn{display: block; margin: 0; padding: 0 15px; background-color: #5FB878; border-color: #5FB878; color: #fff;}
.layui-transfer-active .layui-btn-disabled{background-color: #FBFBFB; border-color: #eee; color: #d2d2d2;}
.layui-transfer-active .layui-btn:first-child{margin-bottom: 15px;}
.layui-transfer-active .layui-btn .layui-icon{margin: 0; font-size: 14px !important;}
.layui-transfer-data{padding: 5px 0; overflow: auto;}
.layui-transfer-data li{height: 32px; line-height: 32px; padding: 0 10px;}
.layui-transfer-data li:hover{background-color: #F6F6F6; transition: .5s all;}
.layui-transfer-data .layui-none{padding: 15px 10px; text-align: center; color: #999;}
/** 评分组件 **/
.layui-rate,
.layui-rate *{display: inline-block; vertical-align: middle;}
.layui-rate{padding: 10px 5px 10px 0; font-size: 0;}
@ -1307,7 +1327,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
.layui-rate[readonly] li i:hover{cursor: default; transform: scale(1);}
/** 颜色选择器 By star1029 **/
/** 颜色选择器 **/
.layui-colorpicker{width: 26px; height: 26px; border: 1px solid #eee; padding: 5px; border-radius: 2px; line-height: 24px; display: inline-block; cursor: pointer; transition: all .3s; -webkit-transition: all .3s;}
.layui-colorpicker:hover{border-color: #d2d2d2;}
.layui-colorpicker.layui-colorpicker-lg{width: 34px; height: 34px; line-height: 32px;}
@ -1319,7 +1339,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-colorpicker-trigger-i{display: inline-block; color: #FFF; font-size: 12px;}
.layui-colorpicker-trigger-i.layui-icon-close{color: #999;}
.layui-colorpicker-main{position: absolute; z-index: 66666666; width: 280px; padding: 7px; background: #FFF; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
.layui-colorpicker-main{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; width: 280px; margin: 5px 0; padding: 7px; background: #FFF; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
.layui-colorpicker-main-wrapper{height: 180px; position: relative;}
.layui-colorpicker-basis{width: 260px; height: 100%; position: relative;}
.layui-colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #FFF, hsla(0,0%,100%,0));}
@ -1339,9 +1359,9 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-colorpicker-main-input{text-align: right; padding-top: 7px;}
.layui-colorpicker-main-input .layui-btn-container .layui-btn{margin: 0 0 0 10px;}
.layui-colorpicker-main-input div.layui-inline{float: left; margin-right: 10px; font-size: 14px;}
.layui-colorpicker-main-input input.layui-input{width: 150px; height: 30px; color: #666;}
.layui-colorpicker-main-input input.layui-input{width: 150px; height: 30px; color: #5F5F5F;}
/** 滑块 By star1029 **/
/** 滑块 **/
.layui-slider{height: 4px; background: #eee; border-radius: 3px; position: relative; cursor: pointer;}
.layui-slider-bar{border-radius: 3px; position: absolute; height: 100%;}
.layui-slider-step{position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #FFF; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
@ -1351,7 +1371,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-slider-wrap-btn:hover,
.layui-slider-wrap-btn.layui-slider-hover{transform: scale(1.2);}
.layui-slider-wrap-btn.layui-disabled:hover{transform: scale(1) !important;}
.layui-slider-tips{position: absolute; top: -42px; z-index: 66666666; white-space:nowrap; display: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
.layui-slider-tips{position: absolute; top: -42px; z-index: 77777777; white-space:nowrap; display: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
.layui-slider-tips:after{content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #000 transparent transparent transparent;}
.layui-slider-input{width: 70px; height: 32px; border: 1px solid #eee; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -14px;}
.layui-slider-input-btn{position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #eee;}
@ -1373,7 +1393,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-slider > span{margin-left: 8px;}
}
/** 树组件 By star1029 **/
/** 树组件 **/
.layui-tree{line-height: 22px;}
.layui-tree .layui-form-checkbox{margin: 0 !important;}
.layui-tree-set{width: 100%; position: relative;}
@ -1391,12 +1411,12 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-tree-iconClick{display: inline-block; vertical-align: middle; position: relative; height: 20px; line-height: 20px; margin: 0 10px; color: #c0c4cc;}
.layui-tree-icon{height: 12px; line-height: 12px; width: 12px; text-align: center; border: 1px solid #c0c4cc;}
.layui-tree-iconClick .layui-icon{font-size: 18px;}
.layui-tree-icon .layui-icon{font-size: 12px; color: #666;}
.layui-tree-icon .layui-icon{font-size: 12px; color: #5F5F5F;}
.layui-tree-iconArrow{padding: 0 5px;}
.layui-tree-iconArrow:after{content: ""; position: absolute; left: 4px; top: 3px; z-index: 100; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #c0c4cc; transition: 0.5s;}
.layui-tree-spread>.layui-tree-entry>.layui-tree-iconClick>.layui-tree-iconArrow:after{transform: rotate(90deg) translate(3px, 4px);}
.layui-tree-spread>.layui-tree-entry .layui-tree-iconClick>.layui-tree-iconArrow:after{transform: rotate(90deg) translate(3px, 4px);}
.layui-tree-txt{display: inline-block; vertical-align: middle; color: #555;}
.layui-tree-search{margin-bottom: 15px; color: #666;}
.layui-tree-search{margin-bottom: 15px; color: #5F5F5F;}
.layui-tree-btnGroup{visibility: hidden; display: inline-block; vertical-align: middle; position: relative;}
.layui-tree-btnGroup .layui-icon{display: inline-block; vertical-align: middle; padding: 0 2px; cursor: pointer;}
.layui-tree-btnGroup .layui-icon:hover{color: #999; transition: 0.3s;}
@ -1408,7 +1428,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
/** 动画 **/
.layui-anim{-webkit-animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-duration: 0.2s; animation-fill-mode: both;}
.layui-anim{-webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-duration: 0.3s; animation-fill-mode: both;}
.layui-anim.layui-icon{display: inline-block;}
.layui-anim-loop{-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.layui-trans,

View File

@ -10,7 +10,7 @@
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
/* 默认风格 */
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 12px;}
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
.layui-code-h3{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
.layui-code-h3 a{position: absolute; right: 10px; top: 0; color: #999;}
.layui-code-view .layui-code-ol{position: relative; overflow: auto;}
@ -19,7 +19,7 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
.layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;}
.layui-code-view pre{margin: 0;}
/* notepadd++风格 */
/* notepadd++ 风格 */
.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
.layui-code-notepad .layui-code-h3{border-bottom: none;}
.layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;}

View File

@ -48,7 +48,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
.layui-laydate-header i.laydate-next-y{right: 15px;}
.layui-laydate-header i.laydate-next-m{right: 45px;}
.laydate-set-ym{width: 100%; text-align: center; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.laydate-set-ym span{padding: 0 5px; cursor: pointer;}
.laydate-set-ym span{padding: 0 10px; cursor: pointer;}
.laydate-time-text{cursor: default !important;}
/* 主体结构 */
@ -58,15 +58,18 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
.layui-laydate-content td{width: 36px; height: 30px; padding: 5px; text-align: center;}
.layui-laydate-content th{font-weight: 400;}
.layui-laydate-content td{position: relative; cursor: pointer;}
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
.laydate-day-mark::after{position: absolute; content:''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;}
/* 底部结构 */
.layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px 20px;}
.layui-laydate-footer span{margin-right: 15px; display: inline-block; cursor: pointer; font-size: 12px;}
.layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px;}
.layui-laydate-footer span{display: inline-block; vertical-align: top; height: 26px; line-height: 24px; padding: 0 10px; border: 1px solid #C9C9C9; border-radius: 2px; background-color: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .3s;}
.layui-laydate-footer span:hover{color: #5FB878;}
.layui-laydate-footer span.layui-laydate-preview{cursor: default; border-color: transparent !important;}
.layui-laydate-footer span.layui-laydate-preview:hover{color: #666;}
.layui-laydate-footer span:first-child.layui-laydate-preview{padding-left: 0;}
.laydate-footer-btns{position: absolute; right: 10px; top: 10px;}
.laydate-footer-btns span{height: 26px; line-height: 26px; margin: 0 0 0 -1px; padding: 0 10px; border: 1px solid #C9C9C9; background-color: #fff; white-space: nowrap; vertical-align: top; border-radius: 2px;}
.laydate-footer-btns span{margin: 0 0 0 -1px;}
/* 年月列表 */
.layui-laydate-list{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-color: #fff;}
@ -77,7 +80,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
.laydate-time-list p{position: relative; top: -4px; line-height: 29px;}
.laydate-time-list ol{height: 181px; overflow: hidden;}
.laydate-time-list>li:hover ol{overflow-y: auto;}
.laydate-time-list ol li{width: 130%; padding-left: 33px; line-height: 30px; text-align: left; cursor: pointer;}
.laydate-time-list ol li{width: 130%; padding-left: 33px; height: 30px; line-height: 30px; text-align: left; cursor: pointer;}
/* 提示 */
.layui-laydate-hint{position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -144,16 +144,15 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
.layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;}
/* photo模式 */
.layui-layer-photos{-webkit-animation-duration: .8s; animation-duration: .8s;}
.layui-layer-photos{background: none; box-shadow: none;}
.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;}
.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-imguide,.layui-layer-imgbar{display:none;}
.layui-layer-imgprev, .layui-layer-imgnext{position:absolute; top:50%; width:27px; _width:44px; height:44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());}
.layui-layer-imgprev{left:10px; background-position:-5px -5px; _background-position:-70px -5px;}
.layui-layer-imgprev, .layui-layer-imgnext{position: fixed; top: 50%; width: 27px; _width: 44px; height: 44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());}
.layui-layer-imgprev{left: 30px; background-position:-5px -5px; _background-position:-70px -5px;}
.layui-layer-imgprev:hover{background-position:-33px -5px; _background-position:-120px -5px;}
.layui-layer-imgnext{right:10px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;}
.layui-layer-imgnext:hover{background-position:-33px -50px; _background-position:-120px -50px;}
.layui-layer-imgbar{position:absolute; left:0; bottom:0; width:100%; height:32px; line-height:32px; background-color:rgba(0,0,0,.8); background-color:#000\9; filter:Alpha(opacity=80); color:#fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
.layui-layer-imgnext{right: 30px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;}
.layui-layer-imgnext:hover{background-position: -33px -50px; _background-position: -120px -50px;}
.layui-layer-imgbar{position: fixed; left:0; right: 0; bottom:0; width:100%; height: 40px; line-height: 40px; background-color:#000\9; filter:Alpha(opacity=60); background-color: rgba(2,0,0,.35); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
.layui-layer-imgtit{/*position:absolute; left:20px;*/}
.layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;}
.layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;}

View File

@ -1,15 +1,13 @@
/*!
@Name: layui
@DescriptionClassic modular front-end UI framework
@LicenseMIT
/**
* Layui
* Classic modular front-end UI library
* MIT Licensed
*/
;!function(win){
"use strict";
var doc = document, config = {
var doc = win.document, config = {
modules: {} //记录模块物理路径
,status: {} //记录模块加载状态
,timeout: 10 //符合规范的模块请求最长等待秒数
@ -17,10 +15,13 @@
}
,Layui = function(){
this.v = '2.6.3'; //版本号
this.v = '2.7.1'; // layui 版本号
}
//识别预先可能定义的指定全局对象
,GLOBAL = win.LAYUI_GLOBAL || {}
//获取layui所在目录
//获取 layui 所在目录
,getPath = function(){
var jsPath = doc.currentScript ? doc.currentScript.src : function(){
var js = doc.scripts
@ -34,7 +35,8 @@
}
return src || js[last].src;
}();
return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
return config.dir = GLOBAL.dir || jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
}()
//异常提示
@ -99,12 +101,12 @@
deps = []
);
that.use(deps, callback);
that.use(deps, callback, null, 'define');
return that;
};
//使用特定模块
Layui.prototype.use = function(apps, callback, exports){
Layui.prototype.use = function(apps, callback, exports, from){
var that = this
,dir = config.dir = config.dir ? config.dir : getPath
,head = doc.getElementsByTagName('head')[0];
@ -122,8 +124,7 @@
}();
//如果页面已经存在 jQuery 1.7+ 库且所定义的模块依赖 jQuery则不加载内部 jquery 模块
/*
if(window.jQuery && jQuery.fn.on){
if(win.jQuery && jQuery.fn.on){
that.each(apps, function(index, item){
if(item === 'jquery'){
apps.splice(index, 1);
@ -131,7 +132,6 @@
});
layui.jquery = layui.$ = jQuery;
}
*/
var item = apps[0]
,timeout = 0;
@ -154,15 +154,15 @@
}());
}
}
//回调
function onCallback(){
exports.push(layui[item]);
apps.length > 1 ?
that.use(apps.slice(1), callback, exports)
that.use(apps.slice(1), callback, exports, from)
: ( typeof callback === 'function' && function(){
//保证文档加载完毕再执行回调
if(layui.jquery && typeof layui.jquery === 'function'){
if(layui.jquery && typeof layui.jquery === 'function' && from !== 'define'){
return layui.jquery(function(){
callback.apply(layui, exports);
});
@ -232,6 +232,22 @@
return that;
};
// 弃用原有的指定模块,以便重新扩展新的同名模块
Layui.prototype.disuse = function(apps){
var that = this;
apps = that.isArray(apps) ? apps : [apps];
that.each(apps, function (index, item) {
if (!config.status[item]) {
return error('module ' + item + ' is not exist');
}
delete that[item];
delete modules[item];
delete that.modules[item];
delete config.status[item];
delete config.modules[item];
});
};
//获取节点的 style 属性值
Layui.prototype.getStyle = function(node, name){
var style = node.currentStyle ? node.currentStyle : win.getComputedStyle(node, null);
@ -241,13 +257,14 @@
//css外部加载器
Layui.prototype.link = function(href, fn, cssname){
var that = this
,link = doc.createElement('link')
,head = doc.getElementsByTagName('head')[0];
,head = doc.getElementsByTagName('head')[0]
,link = doc.createElement('link');
if(typeof fn === 'string') cssname = fn;
var app = (cssname || href).replace(/\.|\//g, '')
,id = link.id = 'layuicss-'+ app
,STAUTS_NAME = 'creating'
,timeout = 0;
link.rel = 'stylesheet';
@ -257,10 +274,35 @@
if(!doc.getElementById(id)){
head.appendChild(link);
}
if(typeof fn !== 'function') return that;
//轮询 css 是否加载完毕
(function poll(status) {
var delay = 100
,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 标签状态
if(status === STAUTS_NAME) getLinkElem.removeAttribute('lay-status');
//如果 link 标签的状态仍为「创建中」,则继续进入轮询,直到状态改变,则执行回调
getLinkElem.getAttribute('lay-status') === STAUTS_NAME ? setTimeout(poll, delay) : fn();
} else {
getLinkElem.setAttribute('lay-status', STAUTS_NAME);
setTimeout(function(){
poll(STAUTS_NAME);
}, delay);
}
}());
//轮询css是否加载完毕
/*
(function poll() {
if(++timeout > config.timeout * 1000 / 100){
return error(href + ' timeout');
@ -269,10 +311,16 @@
fn();
}() : setTimeout(poll, 100);
}());
*/
return that;
};
//css 内部加载器
Layui.prototype.addcss = function(firename, fn, cssname){
return layui.link(config.dir + 'css/' + firename, fn, cssname);
};
//存储模块的回调
config.callback = {};
@ -285,11 +333,6 @@
}
};
//css内部加载器
Layui.prototype.addcss = function(firename, fn, cssname){
return layui.link(config.dir + 'css/' + firename, fn, cssname);
};
//图片预加载
Layui.prototype.img = function(url, callback, error) {
var img = new Image();
@ -343,7 +386,7 @@
};
// location.hash 路由解析
Layui.prototype.router = function(hash){
Layui.prototype.router = Layui.prototype.hash = function(hash){
var that = this
,hash = hash || location.hash
,data = {
@ -418,7 +461,7 @@
//提取 Hash
,hash: that.router(function(){
return href
? ((href.match(/#.+/) || [])[0] || '')
? ((href.match(/#.+/) || [])[0] || '/')
: location.hash;
}())
};
@ -509,62 +552,242 @@
Layui.prototype.hint = function(){
return {
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(.+)\]$/) || [] //匹配类型字符
,classType = 'Function|Array|Date|RegExp|Object|Error|Symbol'; //常见类型字符
type = type[1] || 'Object';
//除匹配到的类型外,其他对象均返回 object
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
,len
,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 对象
);
};
//遍历
Layui.prototype.each = function(obj, fn){
var key
,that = this;
,that = this
,callFn = function(key, obj){ //回调
return fn.call(obj[key], key, obj[key])
};
if(typeof fn !== 'function') return that;
obj = obj || [];
if(obj.constructor === Object){
for(key in obj){
if(fn.call(obj[key], key, obj[key])) break;
//优先处理数组结构
if(that.isArray(obj)){
for(key = 0; key < obj.length; key++){
if(callFn(key, obj)) break;
}
} else {
for(key = 0; key < obj.length; key++){
if(fn.call(obj[key], key, obj[key])) break;
for(key in obj){
if(callFn(key, obj)) break;
}
}
return that;
};
//将数组中的对象按其某个成员排序
Layui.prototype.sort = function(obj, key, desc){
var clone = JSON.parse(
JSON.stringify(obj || [])
// 将数组中的成员对象按照某个 key 的 value 值进行排序
Layui.prototype.sort = function(arr, key, desc){
var that = this
,clone = JSON.parse(
JSON.stringify(arr || [])
);
if(!key) return clone;
// 若未传入 key则直接返回原对象
if(that.type(arr) === 'object' && !key){
return clone;
} else if(typeof arr !== 'object'){ //若 arr 非对象
return [clone];
}
//如果是数字,按大小排序,如果是非数字,按字典序排序
// 开始排序
clone.sort(function(o1, o2){
var isNum = /^-?\d+$/
,v1 = o1[key]
var v1 = o1[key]
,v2 = o2[key];
if(isNum.test(v1)) v1 = parseFloat(v1);
if(isNum.test(v2)) v2 = parseFloat(v2);
/*
* 特殊数据
* 若比较的成员均非对象
*/
// 若比较的成员均为数字
if(!isNaN(o1) && !isNaN(o2)) return o1 - o2;
// 若比较的成员只存在某一个非对象
if(!isNaN(o1) && isNaN(o2)){
if(key && typeof o2 === 'object'){
v1 = o1;
} else {
return -1;
}
} else if (isNaN(o1) && !isNaN(o2)){
if(key && typeof o1 === 'object'){
v2 = o2;
} else {
return 1;
}
}
/*
* 正常数据
* 即成员均为对象也传入了对比依据 key
* value 为数字大小排序 value 非数字则按字典序排序
*/
// value 是否为数字
var isNum = [!isNaN(v1), !isNaN(v2)];
// 若为数字比较
if(isNum[0] && isNum[1]){
if(v1 && (!v2 && v2 !== 0)){ //数字 vs 空
return 1;
} else if((!v1 && v1 !== 0) && v2){ //空 vs 数字
return -1;
} else { //数字 vs 数字
return v1 - v2;
}
};
if(v1 && !v2){
return 1;
} else if(!v1 && v2){
return -1;
/**
* 字典序排序
*/
// 若为非数字比较
if(!isNum[0] && !isNum[1]){
// 字典序比较
if(v1 > v2){
return 1;
} else if (v1 < v2) {
return -1;
} else {
return 0;
}
}
if(v1 > v2){
return 1;
} else if (v1 < v2) {
// 若为混合比较
if(isNum[0] || !isNum[1]){ //数字 vs 非数字
return -1;
} else {
return 0;
} else if(!isNum[0] || isNum[1]) { //非数字 vs 数字
return 1;
}
});
desc && clone.reverse(); //倒序
desc && clone.reverse(); // 倒序
return clone;
};
// 不复制 将数组中的成员对象按照某个 key 的 value 值进行排序
Layui.prototype.thissort = function(arr, key, desc){
var that = this
,clone = (arr || []);
// 若未传入 key则直接返回原对象
if(that.type(arr) === 'object' && !key){
return clone;
} else if(typeof arr !== 'object'){ //若 arr 非对象
return [clone];
}
// 开始排序
clone.sort(function(o1, o2){
var v1 = o1[key]
,v2 = o2[key];
/*
* 特殊数据
* 若比较的成员均非对象
*/
// 若比较的成员均为数字
if(!isNaN(o1) && !isNaN(o2)) return o1 - o2;
// 若比较的成员只存在某一个非对象
if(!isNaN(o1) && isNaN(o2)){
if(key && typeof o2 === 'object'){
v1 = o1;
} else {
return -1;
}
} else if (isNaN(o1) && !isNaN(o2)){
if(key && typeof o1 === 'object'){
v2 = o2;
} else {
return 1;
}
}
/*
* 正常数据
* 即成员均为对象也传入了对比依据 key
* value 为数字大小排序 value 非数字则按字典序排序
*/
// value 是否为数字
var isNum = [!isNaN(v1), !isNaN(v2)];
// 若为数字比较
if(isNum[0] && isNum[1]){
if(v1 && (!v2 && v2 !== 0)){ //数字 vs 空
return 1;
} else if((!v1 && v1 !== 0) && v2){ //空 vs 数字
return -1;
} else { //数字 vs 数字
return v1 - v2;
}
};
/**
* 字典序排序
*/
// 若为非数字比较
if(!isNum[0] && !isNum[1]){
// 字典序比较
if(v1 > v2){
return 1;
} else if (v1 < v2) {
return -1;
} else {
return 0;
}
}
// 若为混合比较
if(isNum[0] || !isNum[1]){ //数字 vs 非数字
return -1;
} else if(!isNum[0] || isNum[1]) { //非数字 vs 数字
return 1;
}
});
desc && clone.reverse(); // 倒序
return clone;
};
//阻止事件冒泡
Layui.prototype.stope = function(thisEvent){
@ -573,6 +796,9 @@
thisEvent.cancelBubble = true;
}
};
//字符常理
var EV_REMOVE = 'LAYUI-EVENT-REMOVE';
//自定义模块事件
Layui.prototype.onevent = function(modName, events, callback){
@ -595,7 +821,7 @@
};
//如果参数传入特定字符,则执行移除事件
if(params === 'LAYUI-EVENT-REMOVE'){
if(params === EV_REMOVE){
delete (that.cache.event[eventName] || {})[filterName];
return that;
}
@ -604,7 +830,7 @@
if(fn){
config.event[eventName] = config.event[eventName] || {};
//这里不再对多次事件监听做支持,避免更多麻烦
//这里不再对重复事件做支持
//config.event[eventName][filterName] ? config.event[eventName][filterName].push(fn) :
config.event[eventName][filterName] = [fn];
return this;
@ -635,10 +861,11 @@
//移除模块事件
Layui.prototype.off = function(events, modName){
var that = this;
return that.event.call(that, modName, events, 'LAYUI-EVENT-REMOVE');
return that.event.call(that, modName, events, EV_REMOVE);
};
//exports layui
win.layui = new Layui();
}(window);
}(window); //gulp build: layui-footer

View File

@ -1,8 +1,6 @@
/**
@Name用于加载所有内置模块
@LicenseMIT
/*!
* 用于加载所有内置模块
* MIT Licensed
*/
layui.define(function(){

View File

@ -1,8 +1,6 @@
/**
@Namecarousel 轮播模块
@LicenseMIT
* carousel 轮播模块
* MIT Licensed
*/
layui.define('jquery', function(exports){
@ -278,11 +276,15 @@ layui.define('jquery', function(exports){
that.haveSlide = true;
layui.event.call(this, MOD_NAME, 'change('+ filter +')', {
// 回调返回的参数
var params = {
index: options.index
,prevIndex: thisIndex
,item: elemItem.eq(options.index)
});
};
typeof options.change === 'function' && options.change(params);
layui.event.call(this, MOD_NAME, 'change('+ filter +')', params);
};
//事件处理
@ -294,8 +296,10 @@ layui.define('jquery', function(exports){
//移入移出容器
options.elem.on('mouseenter', function(){
if (that.config.autoplay === 'always') return;
clearInterval(that.timer);
}).on('mouseleave', function(){
if (that.config.autoplay === 'always') return;
that.autoplay();
});

View File

@ -1,17 +1,20 @@
/**
@Namecode 代码修饰器
@LicenseMIT
* code
* 代码区简易修饰
*/
layui.define('jquery', function(exports){
layui.define(['util'], function(exports){
"use strict";
var $ = layui.$;
var util = layui.util;
exports('code', function(options){
var elems = [];
var trim = function(str){
return $.trim(str).replace(/^\n|\n$/, '');
}
options = options || {};
options.elem = $(options.elem||'.layui-code');
options.lang = 'lang' in options ? options.lang : 'code';
@ -21,12 +24,12 @@ layui.define('jquery', function(exports){
});
layui.each(elems.reverse(), function(index, item){
var othis = $(item), html = othis.html();
var othis = $(item);
var html = trim(othis.html());
//转义HTML标签
// 转义 HTML 标签
if(othis.attr('lay-encode') || options.encode){
html = html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;')
html = util.escape(html);
}
othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>')
@ -56,5 +59,5 @@ layui.define('jquery', function(exports){
});
});
}).addcss('modules/code.css?v=1', 'skincodecss');
}).addcss('modules/code.css?v=2', 'skincodecss');

View File

@ -1,14 +1,15 @@
/**
@Title: colorpicker 颜色选择器组件
@LicenseMIT
* colorpicker
* 颜色选择组件
*/
layui.define('jquery', function(exports){
layui.define(['jquery', 'lay'], function(exports){
"use strict";
var $ = layui.jquery
,lay = layui.lay
,device = layui.device()
,clickOrMousedown = (device.mobile ? 'click' : 'mousedown')
//外部接口
,colorpicker = {
@ -217,7 +218,7 @@ layui.define('jquery', function(exports){
,elemColorBox = that.elemColorBox[0]
//颜色选择器对象
,elemPicker = that.elemPicker = $(['<div id="layui-colorpicker'+ that.index +'" data-index="'+ that.index +'" class="layui-anim layui-anim-upbit layui-colorpicker-main">'
,elemPicker = that.elemPicker = $(['<div id="layui-colorpicker'+ that.index +'" data-index="'+ that.index +'" class="layui-anim layui-anim-downbit layui-colorpicker-main">'
//颜色面板
,'<div class="layui-colorpicker-main-wrapper">'
,'<div class="layui-colorpicker-basis">'
@ -295,45 +296,12 @@ layui.define('jquery', function(exports){
//定位算法
Class.prototype.position = function(){
var that = this
,options = that.config
,elem = that.bindElem || that.elemColorBox[0]
,elemPicker = that.elemPicker[0]
,rect = elem.getBoundingClientRect() //绑定元素的坐标
,elemWidth = elemPicker.offsetWidth //控件的宽度
,elemHeight = elemPicker.offsetHeight //控件的高度
//滚动条高度
,scrollArea = function(type){
type = type ? 'scrollLeft' : 'scrollTop';
return document.body[type] | document.documentElement[type];
}
,winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
}, margin = 5, left = rect.left, top = rect.bottom;
left = left - (elemWidth - elem.offsetWidth)/2;
top = top + margin
//如果右侧超出边界
if(left + elemWidth + margin > winArea('width')){
left = winArea('width') - elemWidth - margin;
} else if(left < margin){ //如果左侧超出边界
left = margin;
}
//如果底部超出边界
if(top + elemHeight + margin > winArea()){
top = rect.top > elemHeight //顶部是否有足够区域显示完全
? rect.top - elemHeight
: winArea() - elemHeight;
top = top - margin*2;
}
if(options.position){
elemPicker.style.position = options.position;
}
elemPicker.style.left = left + (options.position === 'fixed' ? 0 : scrollArea(1)) + 'px';
elemPicker.style.top = top + (options.position === 'fixed' ? 0 : scrollArea()) + 'px';
,options = that.config;
lay.position(that.bindElem || that.elemColorBox[0], that.elemPicker[0], {
position: options.position
,align: 'center'
});
return that;
};
//颜色选择器赋值
@ -435,7 +403,7 @@ layui.define('jquery', function(exports){
}
//拖拽元素
,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-colorpicker-moving"></div'].join(''))
,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-colorpicker-moving"></div>'].join(''))
,createMoveElem = function(call){
$('#LAY-colorpicker-moving')[0] || $('body').append(elemMove);
elemMove.on('mousemove', call);
@ -457,11 +425,12 @@ layui.define('jquery', function(exports){
if(top > maxh)top = maxh;
var h = top/180*360;
_h = h;
change(h, _s, _b, _a);
change(h, _s, _b, _a);
e.preventDefault();
};
createMoveElem(move);
//layui.stope(e);
e.preventDefault();
});
@ -514,6 +483,7 @@ layui.define('jquery', function(exports){
_b = b;
_s = s;
change(_h, s, b, _a);
layui.stope(e);
e.preventDefault();
choose.trigger(e, 'mousedown');
});
@ -675,7 +645,7 @@ layui.define('jquery', function(exports){
if(!options.elem[0] || that.elemColorBox[0].eventHandler) return;
//绑定关闭控件事件
$doc.on('click', function(e){
$doc.on(clickOrMousedown, function(e){
//如果点击的元素是颜色框
if($(e.target).hasClass(ELEM)
|| $(e.target).parents('.'+ELEM)[0]

View File

@ -1,8 +1,6 @@
/**
@NameMODULE_DEMO_NAME 模块组件通用结构
@LicenseMIT
* MODULE_DEMO_NAME 模块组件通用结构
* MIT Licensed
*/
layui.define([''], function(exports){
@ -72,8 +70,9 @@ layui.define([''], function(exports){
Class.prototype.reload = function(options){
var that = this;
//防止数组深度合并
layui.each(options, function(key, item){
if(item.constructor === Array) delete that.config[key];
if(layui.type(item) === 'array') delete that.config[key];
});
that.config = $.extend(true, {}, that.config, options);

View File

@ -1,8 +1,6 @@
/**
@Namedropdown 下拉菜单组件
@LicenseMIT
* dropdown
* 下拉菜单组件
*/
layui.define(['jquery', 'laytpl', 'lay'], function(exports){
@ -258,7 +256,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
//阻止全局事件
that.elemView.find('.layui-menu').on(clickOrMousedown, function(e){
lay.stope(e);
layui.stope(e);
});
//触发菜单列表事件
@ -304,6 +302,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
position: options.position
,e: that.e
,clickType: options.trigger === 'contextmenu' ? 'right' : null
,align: options.align || null
});
};

View File

@ -1,8 +1,6 @@
/**
@Nameelement 常用元素操作
@LicenseMIT
* element 常用元素操作
* MIT Licensed
*/
layui.define('jquery', function(exports){
@ -37,11 +35,18 @@ layui.define('jquery', function(exports){
,titElem = tabElem.children(TITLE)
,barElem = titElem.children('.layui-tab-bar')
,contElem = tabElem.children('.layui-tab-content')
,li = '<li lay-id="'+ (options.id||'') +'"'
+(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +'>'+ (options.title||'unnaming') +'</li>';
,li = '<li'+ function(){
var layAttr = [];
layui.each(options, function(key, value){
if(/^(title|content)$/.test(key)) return;
layAttr.push('lay-'+ key +'="'+ value +'"');
});
if(layAttr.length > 0) layAttr.unshift(''); //向前插,预留空格
return layAttr.join(' ');
}() +'>'+ (options.title || 'unnaming') +'</li>';
barElem[0] ? barElem.before(li) : titElem.append(li);
contElem.append('<div class="layui-tab-item">'+ (options.content||'') +'</div>');
contElem.append('<div class="layui-tab-item">'+ (options.content || '') +'</div>');
call.hideTabMore(true);
call.tabAuto();
return this;
@ -83,18 +88,18 @@ layui.define('jquery', function(exports){
,elem = $('.'+ ELEM +'[lay-filter='+ filter +']')
,elemBar = elem.find('.'+ ELEM +'-bar')
,text = elemBar.find('.'+ ELEM +'-text');
elemBar.css('width', percent);
elemBar.css('width', percent).attr('lay-percent', percent);
text.text(percent);
return this;
};
var NAV_ELEM = '.layui-nav', NAV_ITEM = 'layui-nav-item', NAV_BAR = 'layui-nav-bar'
,NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_MORE = 'layui-nav-more'
,NAV_ANIM = 'layui-anim layui-anim-upbit'
,NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_CHILD_C = 'layui-nav-child-c'
,NAV_MORE = 'layui-nav-more', NAV_DOWN = 'layui-icon-down', NAV_ANIM = 'layui-anim layui-anim-upbit'
//基础事件体
,call = {
//Tab点击
//Tab 点击
tabClick: function(e, index, liElem, options){
options = options || {};
var othis = liElem || $(this)
@ -102,9 +107,12 @@ layui.define('jquery', function(exports){
,parents = options.headerElem ? othis.parent() : othis.parents('.layui-tab').eq(0)
,item = options.bodyElem ? $(options.bodyElem) : parents.children('.layui-tab-content').children('.layui-tab-item')
,elemA = othis.find('a')
,isJump = elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank' //是否存在跳转
,unselect = typeof othis.attr('lay-unselect') === 'string' //是否禁用选中
,filter = parents.attr('lay-filter');
if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank')){
//执行切换
if(!(isJump || unselect)){
othis.addClass(THIS).siblings().removeClass(THIS);
item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
}
@ -163,7 +171,7 @@ layui.define('jquery', function(exports){
title.find('li').each(function(){
var li = $(this);
if(!li.find('.'+CLOSE)[0]){
var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">&#x1006;</i>');
var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ CLOSE +'"></i>');
close.on('click', call.tabDelete);
li.append(close);
}
@ -223,7 +231,7 @@ layui.define('jquery', function(exports){
,filter = parents.attr('lay-filter')
,parent = othis.parent()
,child = othis.siblings('.'+NAV_CHILD)
,unselect = typeof parent.attr('lay-unselect') === 'string';
,unselect = typeof parent.attr('lay-unselect') === 'string'; //是否禁用选中
if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){
if(!child[0]){
@ -298,52 +306,85 @@ layui.define('jquery', function(exports){
//导航菜单
,nav: function(){
var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, follow = function(bar, nav, index){
var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, NAV_TITLE = 'layui-nav-title'
//滑块跟随
,follow = function(bar, nav, index){
var othis = $(this), child = othis.find('.'+NAV_CHILD);
if(nav.hasClass(NAV_TREE)){
bar.css({
top: othis.position().top
,height: othis.children('a').outerHeight()
,opacity: 1
});
//无子菜单时跟随
if(!child[0]){
var thisA = othis.children('.'+ NAV_TITLE);
bar.css({
top: othis.offset().top - nav.offset().top
,height: (thisA[0] ? thisA : othis).outerHeight()
,opacity: 1
});
}
} else {
child.addClass(NAV_ANIM);
bar.css({
left: othis.position().left + parseFloat(othis.css('marginLeft'))
,top: othis.position().top + othis.height() - bar.height()
//若居中对齐
if(child.hasClass(NAV_CHILD_C)) child.css({
left: -(child.outerWidth() - othis.width())/2
});
//滑块定位
if(child[0]){ //若有子菜单,则滑块消失
bar.css({
left: bar.position().left + bar.width()/2
,width: 0
,opacity: 0
});
} else { //bar 跟随
bar.css({
left: othis.position().left + parseFloat(othis.css('marginLeft'))
,top: othis.position().top + othis.height() - bar.height()
});
}
//渐显滑块并适配宽度
timer[index] = setTimeout(function(){
bar.css({
width: othis.width()
,opacity: 1
width: child[0] ? 0 : othis.width()
,opacity: child[0] ? 0 : 1
});
}, device.ie && device.ie < 10 ? 0 : TIME);
//显示子菜单
clearTimeout(timeEnd[index]);
if(child.css('display') === 'block'){
clearTimeout(timerMore[index]);
}
timerMore[index] = setTimeout(function(){
child.addClass(SHOW)
child.addClass(SHOW);
othis.find('.'+NAV_MORE).addClass(NAV_MORE+'d');
}, 300);
}
}
};
//遍历导航
$(NAV_ELEM + elemFilter).each(function(index){
var othis = $(this)
,bar = $('<span class="'+ NAV_BAR +'"></span>')
,itemElem = othis.find('.'+NAV_ITEM);
//Hover滑动效果
//hover 滑动效果
if(!othis.find('.'+NAV_BAR)[0]){
othis.append(bar);
itemElem.on('mouseenter', function(){
(othis.hasClass(NAV_TREE)
? itemElem.find('dd,>.'+ NAV_TITLE)
: itemElem).on('mouseenter', function(){
follow.call(this, bar, othis, index);
}).on('mouseleave', function(){
if(!othis.hasClass(NAV_TREE)){
}).on('mouseleave', function(){ //鼠标移出
//是否为垂直导航
if(othis.hasClass(NAV_TREE)){
bar.css({
height: 0
,opacity: 0
});
} else {
//隐藏子菜单
clearTimeout(timerMore[index]);
timerMore[index] = setTimeout(function(){
othis.find('.'+NAV_CHILD).removeClass(SHOW);
@ -354,13 +395,7 @@ layui.define('jquery', function(exports){
othis.on('mouseleave', function(){
clearTimeout(timer[index])
timeEnd[index] = setTimeout(function(){
if(othis.hasClass(NAV_TREE)){
bar.css({
height: 0
,top: bar.position().top + bar.height()/2
,opacity: 0
});
} else {
if(!othis.hasClass(NAV_TREE)){
bar.css({
width: 0
,left: bar.position().left + bar.width()/2
@ -379,7 +414,7 @@ layui.define('jquery', function(exports){
//输出小箭头
if(child[0] && !thisA.children('.'+NAV_MORE)[0]){
thisA.append('<span class="'+ NAV_MORE +'"></span>');
thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>');
}
thisA.off('click', call.clickThis).on('click', call.clickThis); //点击菜单
@ -459,7 +494,10 @@ layui.define('jquery', function(exports){
Element.prototype.render = Element.prototype.init;
var element = new Element(), dom = $(document);
element.render();
$(function(){
element.render();
});
var TITLE = '.layui-tab-title li';
dom.on('click', TITLE, call.tabClick); //Tab切换

View File

@ -1,8 +1,5 @@
/**
@Name flow 流加载组件
@LicenseMIT
* flow 流加载组件
*/
@ -117,7 +114,7 @@ layui.define('jquery', function(exports){
/* 始终只加载在当前屏范围内的图片 */
if(elemTop >= start && elemTop <= end){
if(!item.attr('src')){
if(item.attr('lay-src')){
var src = item.attr('lay-src');
layui.img(src, function(){
var next = that.lazyimg.elem.eq(index);
@ -126,6 +123,9 @@ layui.define('jquery', function(exports){
/* 当前图片加载就绪后,检测下一个图片是否在当前屏 */
next[0] && render(next);
index++;
}, function(){
var next = that.lazyimg.elem.eq(index);
item.removeAttr('lay-src');
});
}
}

View File

@ -1,8 +1,6 @@
/**
@Nameform 表单组件
@LicenseMIT
* form 表单组件
* MIT Licensed
*/
layui.define('layer', function(exports){
@ -32,7 +30,7 @@ layui.define('layer', function(exports){
,'邮箱格式不正确'
]
,url: [
/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
/^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/
,'链接格式不正确'
]
,number: function(value){
@ -47,6 +45,7 @@ layui.define('layer', function(exports){
,'请输入正确的身份证号'
]
}
,autocomplete: null //全局 autocomplete 状态。null 表示不干预
};
};
@ -63,6 +62,13 @@ layui.define('layer', function(exports){
$.extend(true, that.config.verify, settings);
return that;
};
//获取指定表单对象
Form.prototype.getFormElem = function(filter){
return $(ELEM + function(){
return filter ? ('[lay-filter="' + filter +'"]') : '';
}());
};
//表单事件
Form.prototype.on = function(events, callback){
@ -72,7 +78,7 @@ layui.define('layer', function(exports){
//赋值/取值
Form.prototype.val = function(filter, object){
var that = this
,formElem = $(ELEM + '[lay-filter="' + filter +'"]');
,formElem = that.getFormElem(filter);
//遍历
formElem.each(function(index, item){
@ -110,26 +116,28 @@ layui.define('layer', function(exports){
//取值
Form.prototype.getValue = function(filter, itemForm){
itemForm = itemForm || $(ELEM + '[lay-filter="' + filter +'"]').eq(0);
itemForm = itemForm || this.getFormElem(filter);
var nameIndex = {} //数组 name 索引
,field = {}
,fieldElem = itemForm.find('input,select,textarea') //获取所有表单域
layui.each(fieldElem, function(_, item){
item.name = (item.name || '').replace(/^\s*|\s*&/, '');
layui.each(fieldElem, function(_, item){
var othis = $(this)
,init_name; //初始 name
item.name = (item.name || '').replace(/^\s*|\s*&/, '');
if(!item.name) return;
//用于支持数组 name
if(/^.*\[\]$/.test(item.name)){
var key = item.name.match(/^(.*)\[\]$/g)[0];
nameIndex[key] = nameIndex[key] | 0;
item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
init_name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
}
if(/^checkbox|radio$/.test(item.type) && !item.checked) return;
field[item.name] = item.value;
if(/^checkbox|radio$/.test(item.type) && !item.checked) return; //复选框和单选框未选中,不记录字段
field[init_name || item.name] = item.value;
});
return field;
@ -138,17 +146,25 @@ layui.define('layer', function(exports){
//表单控件渲染
Form.prototype.render = function(type, filter){
var that = this
,options = that.config
,elemForm = $(ELEM + function(){
return filter ? ('[lay-filter="' + filter +'"]') : '';
}())
,items = {
//输入框
input: function(elem){
var inputs = elem || elemForm.find('input,textarea');
//初始化全局的 autocomplete
options.autocomplete && inputs.attr('autocomplete', options.autocomplete);
}
//下拉选择框
select: function(){
,select: function(elem){
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
,NONE = 'layui-select-none', initValue = '', thatInput
,selects = elemForm.find('select')
,selects = elem || elemForm.find('select')
//隐藏 select
,hide = function(e, clear){
if(!$(e.target).parent().hasClass(TITLE) || clear){
@ -165,10 +181,14 @@ layui.define('layer', function(exports){
,input = title.find('input')
,dl = reElem.find('dl')
,dds = dl.children('dd')
,dts = dl.children('dt') // select分组dt元素
,index = this.selectedIndex //当前选中的索引
,nearElem; //select 组件当前选中的附近元素,用于辅助快捷键功能
if(disabled) return;
// 搜索项
var laySearch = select.attr('lay-search');
//展开下拉
var showDown = function(){
@ -178,6 +198,7 @@ layui.define('layer', function(exports){
index = select[0].selectedIndex; //获取最新的 selectedIndex
reElem.addClass(CLASS+'ed');
dds.removeClass(HIDE);
dts.removeClass(HIDE);
nearElem = null;
//初始选中样式
@ -328,16 +349,32 @@ layui.define('layer', function(exports){
}
});
//检测值是否不属于 select 项
// 检测值是否不属于 select 项
var notOption = function(value, callback, origin){
var num = 0;
layui.each(dds, function(){
var othis = $(this)
,text = othis.text()
,not = text.indexOf(value) === -1;
var othis = $(this);
var text = othis.text();
// 是否区分大小写
if(laySearch !== 'exact'){
text = text.toLowerCase();
value = value.toLowerCase();
}
// 匹配
var not = text.indexOf(value) === -1;
if(value === '' || (origin === 'blur') ? value !== text : not) num++;
origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
});
// 处理select分组元素
origin === 'keyup' && layui.each(dts, function(){
var othis = $(this)
,thisDds = othis.nextUntil('dt').filter('dd') // 当前分组下的dd元素
,allHide = thisDds.length == thisDds.filter('.' + HIDE).length; // 当前分组下所有dd元素都隐藏了
othis[allHide ? 'addClass' : 'removeClass'](HIDE);
});
var none = num === dds.length;
return callback(none), none;
};
@ -413,7 +450,12 @@ layui.define('layer', function(exports){
hideDown(true);
return false;
});
dds.on('mousedown',(events)=>{
events.stopPropagation()
});
dds.on('mouseup',(events)=>{
events.stopPropagation()
});
reElem.find('dl>dt').on('click', function(e){
return false;
});
@ -440,8 +482,8 @@ layui.define('layer', function(exports){
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS
,(disabled ? ' layui-select-disabled' : '') +'">'
,'<div class="'+ TITLE +'">'
,('<input type="text" placeholder="'+ placeholder +'" '
+('value="'+ (value ? selected.html() : '') +'"') //默认值
,('<input type="text" placeholder="'+ $.trim(placeholder) +'" '
+('value="'+ $.trim(value ? selected.html() : '') +'"') //默认值
+((!disabled && isSearch) ? '' : ' readonly') //是否开启搜索
+' class="layui-input'
+(isSearch ? '' : ' layui-unselect')
@ -452,11 +494,11 @@ layui.define('layer', function(exports){
var arr = [];
layui.each(options, function(index, item){
if(index === 0 && !item.value){
arr.push('<dd lay-value="" class="layui-select-tips">'+ (item.innerHTML || TIPS) +'</dd>');
arr.push('<dd lay-value="" class="layui-select-tips">'+ $.trim(item.innerHTML || TIPS) +'</dd>');
} else if(item.tagName.toLowerCase() === 'optgroup'){
arr.push('<dt>'+ item.label +'</dt>');
} else {
arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ item.innerHTML +'</dd>');
arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ $.trim(item.innerHTML) +'</dd>');
}
});
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>');
@ -471,13 +513,13 @@ layui.define('layer', function(exports){
}
//复选框/开关
,checkbox: function(){
,checkbox: function(elem){
var CLASS = {
checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox']
,_switch: ['layui-form-switch', 'layui-form-onswitch', 'switch']
}
,checks = elemForm.find('input[type=checkbox]')
,checks = elem || elemForm.find('input[type=checkbox]')
,events = function(reElem, RE_CLASS){
var check = $(this);
@ -516,7 +558,7 @@ layui.define('layer', function(exports){
var hasRender = othis.next('.' + RE_CLASS[0])
,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0]
,(check.checked ? (' '+ RE_CLASS[1]) : '') //选中状态
,(disabled ? ' layui-checkbox-disbaled '+ DISABLED : '') //禁用状态
,(disabled ? ' layui-checkbox-disabled '+ DISABLED : '') //禁用状态
,'"'
,(skin ? ' lay-skin="'+ skin +'"' : '') //风格
,'>'
@ -543,10 +585,10 @@ layui.define('layer', function(exports){
}
//单选框
,radio: function(){
,radio: function(elem){
var CLASS = 'layui-form-radio', ICON = ['&#xe643;', '&#xe63f;']
,radios = elemForm.find('input[type=radio]')
,radios = elem || elemForm.find('input[type=radio]')
,events = function(reElem){
var radio = $(this), ANIM = 'layui-anim-scaleSpring';
@ -585,13 +627,13 @@ layui.define('layer', function(exports){
//替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS
,(radio.checked ? (' '+CLASS+'ed') : '') //选中状态
,(disabled ? ' layui-radio-disbaled '+DISABLED : '') +'">' //禁用状态
,(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">' //禁用状态
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'
,'<div>'+ function(){
var title = radio.title || '';
if(typeof othis.next().attr('lay-radio') === 'string'){
title = othis.next().html();
othis.next().remove();
//othis.next().remove();
}
return title
}() +'</div>'
@ -602,34 +644,59 @@ layui.define('layer', function(exports){
});
}
};
type ? (
items[type] ? items[type]() : hint.error('不支持的'+ type + '表单渲染')
) : layui.each(items, function(index, item){
item();
});
if (layui.type(type) === 'object') {
// jquery 对象
type.each(function (index, item) {
var elem = $(item);
if (!elem.closest(ELEM).length) {
// 如果不是存在layui-form中的直接跳过
return;
}
if (item.tagName === 'SELECT') {
items['select'](elem);
} else if (item.tagName === 'INPUT') {
var itemType = item.type;
if (itemType === 'checkbox' || itemType === 'radio') {
items[itemType](elem);
} else {
items['input'](elem);
}
}
});
} else {
type ? (
items[type] ? items[type]() : hint.error('不支持的 "'+ type + '" 表单渲染')
) : layui.each(items, function(index, item){
item();
});
}
return that;
};
//表单提交校验
var submit = function(){
var stop = null //验证不通过状态
,verify = form.config.verify //验证规则
,DANGER = 'layui-form-danger' //警示样式
,field = {} //字段集合
,button = $(this) //当前触发的按钮
,elem = button.parents(ELEM) //当前所在表单域
,verifyElem = elem.find('*[lay-verify]') //获取需要校验的元素
,formElem = button.parents('form')[0] //获取当前所在的 form 元素,如果存在的话
,filter = button.attr('lay-filter'); //获取过滤器
// elem 即要验证的区域表单选择器 - return true or false
Form.prototype.validate = function(elem){
var stop = null; //验证不通过状态
var verify = form.config.verify; //验证规则
var DANGER = 'layui-form-danger'; //警示样式
elem = $(elem);
// 节点不存在可视为 true
if(!elem[0]) return !0;
// 若节点不存在特定属性,则查找容器内有待验证的子节点
if(!elem.attr('lay-verify')){
elem = elem.find('*[lay-verify]');
}
//开始校验
layui.each(verifyElem, function(_, item){
var othis = $(this)
,vers = othis.attr('lay-verify').split('|')
,verType = othis.attr('lay-verType') //提示方式
,value = othis.val();
layui.each(elem, function(_, item){
var othis = $(this);
var verifyStr = othis.attr('lay-verify') || '';
var vers = verifyStr.split('|');
var verType = othis.attr('lay-verType'); //提示方式
var value = othis.val();
othis.removeClass(DANGER); //移除警示样式
//遍历元素绑定的验证规则
@ -640,7 +707,10 @@ layui.define('layer', function(exports){
//匹配验证规则
if(verify[thisVer]){
var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value);
var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value)
//是否属于美化替换后的表单元素
,isForm2Elem = item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type);
errorText = errorText || verify[thisVer][1];
if(thisVer === 'required'){
@ -653,7 +723,7 @@ layui.define('layer', function(exports){
if(verType === 'tips'){
layer.tips(errorText, function(){
if(typeof othis.attr('lay-ignore') !== 'string'){
if(item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type)){
if(isForm2Elem){
return othis.next();
}
}
@ -666,13 +736,27 @@ layui.define('layer', function(exports){
else if(/\bstring|number\b/.test(typeof errorText)){
layer.msg(errorText, {icon: 5, shift: 6});
}
setTimeout(function(){
(isForm2Elem ? othis.next().find('input') : item).focus();
}, 7);
//非移动设备自动定位焦点
if(!device.android && !device.ios){
/*
// 非移动设备自动定位焦点
if(!device.mobile){
setTimeout(function(){
item.focus();
(isForm2Elem ? othis.next().find('input') : item).focus();
}, 7);
} else { // 移动设备定位
$dom.scrollTop(function(){
try {
return (isForm2Elem ? othis.next() : othis).focus().offset().top - 15
} catch(e){
return 0;
}
}());
}
*/
othis.addClass(DANGER);
return stop = true;
@ -681,25 +765,55 @@ layui.define('layer', function(exports){
});
if(stop) return stop;
});
if(stop) return false;
return !stop;
}
// 提交表单并校验
var submit = Form.prototype.submit = function(filter, callback){
var field = {}; //字段集合
var button = $(this); //当前触发的按钮
// 表单域 lay-filter 属性值
var layFilter = typeof filter === 'string'
? filter
: button.attr('lay-filter');
// 当前所在表单域
var elem = this.getFormElem
? this.getFormElem(layFilter)
: button.parents(ELEM).eq(0);
// 获取需要校验的元素
var verifyElem = elem.find('*[lay-verify]');
//开始校验
if(!form.validate(verifyElem)) return false;
//获取当前表单值
field = form.getValue(null, elem);
//返回的参数
var params = {
elem: this.getFormElem ? (window.event && window.event.target) : this //触发事件的对象
,form: this.getFormElem ? elem[0] : button.parents('form')[0] //当前所在的 form 元素,如果存在的话
,field: field //当前表单数据
};
//回调
typeof callback === 'function' && callback(params);
//返回字段
return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', {
elem: this
,form: formElem
,field: field
});
//事件
return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params);
};
//自动完成渲染
var form = new Form()
,$dom = $(document), $win = $(window);
form.render();
$(function(){
form.render();
});
//表单reset重置渲染
$dom.on('reset', ELEM, function(){

View File

@ -1,6 +1,7 @@
/** lay 基础 DOM 操作 */
;!function(){
/** lay 基础 DOM 操作 | MIT Licensed */
;!function(window){ //gulp build: lay-header
"use strict";
var MOD_NAME = 'lay' //模块名
@ -32,12 +33,14 @@
//普通对象深度扩展
lay.extend = function(){
var ai = 1, args = arguments
var ai = 1
,length
,args = arguments
,clone = function(target, obj){
target = target || (obj.constructor === Array ? [] : {});
target = target || (layui.type(obj) === 'array' ? [] : {}); //目标对象
for(var i in obj){
//如果值为对象,则进入递归,继续深度合并
target[i] = (obj[i] && (obj[i].constructor === Object))
//如果值为普通对象,则进入递归,继续深度合并
target[i] = (obj[i] && obj[i].constructor === Object)
? clone(target[i], obj[i])
: obj[i];
}
@ -45,78 +48,59 @@
}
args[0] = typeof args[0] === 'object' ? args[0] : {};
length = args.length
for(; ai < args.length; ai++){
for(; ai < length; ai++){
if(typeof args[ai] === 'object'){
clone(args[0], args[ai])
clone(args[0], args[ai]);
}
}
return args[0];
};
//lay 模块版本
lay.v = '1.0.0';
lay.v = '1.0.8';
//ie版本
lay.ie = function(){
var agent = navigator.userAgent.toLowerCase();
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
(agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于ie11并没有msie的标识
(agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于 ie11 并没有 msie 的标识
) : false;
}();
//获取当前 JS 所在目录
lay.getPath = function(){
var jsPath = document.currentScript ? document.currentScript.src : function(){
var js = document.scripts
,last = js.length - 1
,src;
for(var i = last; i > 0; i--){
if(js[i].readyState === 'interactive'){
src = js[i].src;
break;
}
}
return src || js[last].src;
}();
return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
}
//中止冒泡
lay.stope = function(e){
e = e || window.event;
e.stopPropagation
? e.stopPropagation()
: e.cancelBubble = true;
/**
* 获取 layui 常见方法以便用于组件单独版
*/
lay.layui = layui || {};
lay.getPath = layui.cache.dir; //获取当前 JS 所在目录
lay.stope = layui.stope; //中止冒泡
lay.each = function(){ //遍历
layui.each.apply(layui, arguments);
return this;
};
//对象遍历
lay.each = function(obj, fn){
var key
,that = this;
if(typeof fn !== 'function') return that;
obj = obj || [];
if(obj.constructor === Object){
for(key in obj){
if(fn.call(obj[key], key, obj[key])) break;
}
} else {
for(key = 0; key < obj.length; key++){
if(fn.call(obj[key], key, obj[key])) break;
}
}
return that;
};
//数字前置补零
lay.digit = function(num, length, end){
lay.digit = function(num, length){
if(!(typeof num === 'string' || typeof num === 'number')) return '';
var str = '';
num = String(num);
length = length || 2;
for(var i = num.length; i < length; i++){
str += '0';
}
return num < Math.pow(10, length) ? str + (num|0) : num;
return num < Math.pow(10, length) ? str + num : num;
};
//创建元素
@ -127,39 +111,7 @@
});
return elem;
};
//获取节点的 style 属性值
lay.getStyle = function(node, name){
var style = node.currentStyle ? node.currentStyle : window.getComputedStyle(node, null);
return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
};
//载入 CSS 依赖
lay.link = function(href, fn, cssname){
var head = document.getElementsByTagName("head")[0], link = document.createElement('link');
if(typeof fn === 'string') cssname = fn;
var app = (cssname || href).replace(/\.|\//g, '');
var id = 'layuicss-'+ app, timeout = 0;
link.rel = 'stylesheet';
link.href = href;
link.id = id;
if(!document.getElementById(id)){
head.appendChild(link);
}
if(typeof fn !== 'function') return;
//轮询css是否加载完毕
(function poll() {
if(++timeout > 8 * 1000 / 100){
return window.console && console.error(app + '.css: Invalid');
};
parseInt(lay.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 100);
}());
};
//当前页面是否存在滚动条
lay.hasScrollbar = function(){
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
@ -198,11 +150,20 @@
,winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
}, margin = 5, left = rect.left, top = rect.bottom;
//相对元素居中
if(obj.align === 'center'){
left = left - (elemWidth - elem.offsetWidth)/2;
} else if(obj.align === 'right'){
left = left - elemWidth + elem.offsetWidth;
}
//判断右侧是否超出边界
if(left + elemWidth + margin > winArea('width')){
left = winArea('width') - elemWidth - margin; //如果超出右侧,则将面板向右靠齐
}
//左侧是否超出边界
if(left < margin) left = margin;
//判断底部和顶部是否超出边界
if(top + elemHeight + margin > winArea()){
@ -214,6 +175,8 @@
if(obj.clickType === 'right'){
top = winArea() - elemHeight - margin*2;
if(top < 0) top = 0; //不能溢出窗口顶部
} else {
top = margin; // 位置计算逻辑完备性处理
}
}
}
@ -295,7 +258,7 @@
,isObject = typeof selector === 'object';
this.each(function(i, item){
var nativeDOM = isObject ? [selector] : item.querySelectorAll(selector || null);
var nativeDOM = isObject ? item.contains(selector) : item.querySelectorAll(selector || null);
for(; index < nativeDOM.length; index++){
arr.push(nativeDOM[index]);
}
@ -393,16 +356,22 @@
});
};
//设置HTML内容
//设置或获取 HTML 内容
LAY.prototype.html = function(html){
return this.each(function(index, item){
var that = this;
return html === undefined ? function(){
if(that.length > 0) return that[0].innerHTML;
}() : this.each(function(index, item){
item.innerHTML = html;
});
};
//设置
//设置或获取
LAY.prototype.val = function(value){
return this.each(function(index, item){
var that = this;
return value === undefined ? function(){
if(that.length > 0) return that[0].value;
}() : this.each(function(index, item){
item.value = value;
});
};
@ -452,5 +421,4 @@
});
}
}();
}(window, window.document);

File diff suppressed because it is too large Load Diff

View File

@ -1,8 +1,5 @@
/**
@Namelayedit 富文本编辑器
@LicenseMIT
* layedit 富文本编辑器
*/
layui.define(['layer', 'form'], function(exports){
@ -28,7 +25,7 @@ layui.define(['layer', 'form'], function(exports){
,'|'
,'left', 'center', 'right'
,'|'
,'link', 'unlink', 'face', 'image'
,'link', 'unlink'
]
,hideTool: []
,height: 280 //默认高
@ -372,38 +369,6 @@ layui.define(['layer', 'form'], function(exports){
,unlink: function(range){
iframeDOM.execCommand('unlink');
}
//表情
,face: function(range){
face.call(this, function(img){
insertInline.call(iframeWin, 'img', {
src: img.src
,alt: img.alt
}, range);
});
}
//图片
,image: function(range){
var that = this;
layui.use('upload', function(upload){
var uploadImage = set.uploadImage || {};
upload.render({
url: uploadImage.url
,method: uploadImage.type
,elem: $(that).find('input')[0]
,done: function(res){
if(res.code == 0){
res.data = res.data || {};
insertInline.call(iframeWin, 'img', {
src: res.data.src
,alt: res.data.title
}, range);
} else {
layer.msg(res.msg||'上传失败');
}
}
});
});
}
//插入代码
,code: function(range){
code.call(body, function(pre){
@ -471,7 +436,6 @@ layui.define(['layer', 'form'], function(exports){
//触发内容区域
body.on('click', function(){
toolCheck.call(iframeWin, tools);
layer.close(face.index);
});
}
@ -523,48 +487,6 @@ layui.define(['layer', 'form'], function(exports){
link.index = index;
}
//表情面板
,face = function(callback){
//表情库
var faces = function(){
var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {};
layui.each(alt, function(index, item){
arr[item] = layui.cache.dir + 'images/face/'+ index + '.gif';
});
return arr;
}();
face.hide = face.hide || function(e){
if($(e.target).attr('layedit-event') !== 'face'){
layer.close(face.index);
}
}
return face.index = layer.tips(function(){
var content = [];
layui.each(faces, function(key, item){
content.push('<li title="'+ key +'"><img src="'+ item +'" alt="'+ key +'"></li>');
});
return '<ul class="layui-clear">' + content.join('') + '</ul>';
}(), this, {
tips: 1
,time: 0
,skin: 'layui-box layui-util-face'
,maxWidth: 500
,success: function(layero, index){
layero.css({
marginTop: -4
,marginLeft: -10
}).find('.layui-clear>li').on('click', function(){
callback && callback({
src: faces[this.title]
,alt: this.title
});
layer.close(index);
});
$(document).off('click', face.hide).on('click', face.hide);
}
});
}
//插入代码面板
,code = function(callback){
var body = this, index = layer.open({

View File

@ -1,8 +1,6 @@
/**
@Namelayer - Web 弹出层组件
@LicenseMIT
* layer - 通用 Web 弹出层组件
* MIT Licensed
*/
;!function(window, undefined){
@ -21,8 +19,9 @@ var isLayui = window.layui && layui.define, $, win, ready = {
}
}
return src || js[last].src;
}();
return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
}()
,GLOBAL = window.LAYUI_GLOBAL || {};
return GLOBAL.layer_dir || jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
}(),
config: {}, end: {}, minIndex: 0, minLeft: [],
@ -39,14 +38,18 @@ var isLayui = window.layui && layui.define, $, win, ready = {
//载入 CSS 依赖
link: function(href, fn, cssname){
//未设置路径则不主动加载css
if(!layer.path) return;
var head = document.getElementsByTagName("head")[0], link = document.createElement('link');
var head = document.getElementsByTagName("head")[0]
,link = document.createElement('link');
if(typeof fn === 'string') cssname = fn;
var app = (cssname || href).replace(/\.|\//g, '');
var id = 'layuicss-'+ app, timeout = 0;
var id = 'layuicss-'+ app
,STAUTS_NAME = 'creating'
,timeout = 0;
link.rel = 'stylesheet';
link.href = layer.path + href;
@ -55,22 +58,41 @@ var isLayui = window.layui && layui.define, $, win, ready = {
if(!document.getElementById(id)){
head.appendChild(link);
}
if(typeof fn !== 'function') return;
//轮询css是否加载完毕
(function poll() {
if(++timeout > 8 * 1000 / 100){
return window.console && console.error('layer.css: Invalid');
//轮询 css 是否加载完毕
(function poll(status) {
var delay = 100
,getLinkElem = document.getElementById(id); //获取动态插入的 link 元素
//如果轮询超过指定秒数,则视为请求文件失败或 css 文件不符合规范
if(++timeout > 10 * 1000 / delay){
return window.console && console.error(app +'.css: Invalid');
};
parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 100);
//css 加载就绪
if(parseInt(ready.getStyle(getLinkElem, 'width')) === 1989){
//如果参数来自于初始轮询(即未加载就绪时的),则移除 link 标签状态
if(status === STAUTS_NAME) getLinkElem.removeAttribute('lay-status');
//如果 link 标签的状态仍为「创建中」,则继续进入轮询,直到状态改变,则执行回调
getLinkElem.getAttribute('lay-status') === STAUTS_NAME ? setTimeout(poll, delay) : fn();
} else {
getLinkElem.setAttribute('lay-status', STAUTS_NAME);
setTimeout(function(){
poll(STAUTS_NAME);
}, delay);
}
//parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 1000);
}());
}
};
//默认内置方法。
var layer = {
v: '3.3.0',
v: '3.5.1',
ie: function(){ //ie版本
var agent = navigator.userAgent.toLowerCase();
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
@ -85,6 +107,7 @@ var layer = {
layer.path = ready.config.path || layer.path;
typeof options.extend === 'string' && (options.extend = [options.extend]);
//如果设置了路径,则加载样式
if(ready.config.path) layer.ready();
if(!options.extend) return this;
@ -180,10 +203,9 @@ var layer = {
var Class = function(setings){
var that = this, creat = function(){
layer.ready(function(){
that.creat();
});
that.creat();
};
that.yesStatus = true
that.index = ++layer.index;
that.config.maxWidth = $(win).width() - 15*2; //初始最大宽度:当前屏幕宽,左右留 15px 边距
that.config = $.extend({}, that.config, ready.config, setings);
@ -198,6 +220,9 @@ Class.pt = Class.prototype;
var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close'];
doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06'];
doms.SHADE = 'layui-layer-shade';
doms.MOVE = 'layui-layer-move';
//默认配置
Class.pt.config = {
type: 0,
@ -212,7 +237,8 @@ Class.pt.config = {
zIndex: 19891014,
maxWidth: 360,
anim: 0,
isOutAnim: true,
isOutAnim: true, //退出动画
minStack: true, //最小化堆叠
icon: -1,
moveType: 1,
resize: true,
@ -238,10 +264,10 @@ Class.pt.vessel = function(conType, callback){
config.zIndex = zIndex;
callback([
//遮罩
config.shade ? ('<div class="layui-layer-shade" id="layui-layer-shade'+ times +'" times="'+ times +'" style="'+ ('z-index:'+ (zIndex-1) +'; ') +'"></div>') : '',
config.shade ? ('<div class="'+ doms.SHADE +'" id="'+ doms.SHADE + times +'" times="'+ times +'" style="'+ ('z-index:'+ (zIndex-1) +'; ') +'"></div>') : '',
//主体
'<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + (config.fixed ? '' : ';position:absolute;') +'">'
'<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + ';position:'+ (config.fixed ? 'fixed;' : 'absolute;') +'">'
+ (conType && config.type != 2 ? '' : titleHTML)
+ lodingf() // 这行是中间加载
+ (config.type == 0 && config.icon !== -1 ? '<i class="layui-layer-ico layui-layer-ico'+ config.icon +'"></i>' : '')
@ -262,7 +288,7 @@ Class.pt.vessel = function(conType, callback){
}() : '')
+ (config.resize ? '<span class="layui-layer-resize"></span>' : '')
+ '</div>'
], titleHTML, $('<div class="layui-layer-move"></div>'));
], titleHTML, $('<div class="'+ doms.MOVE +'" id="'+ doms.MOVE +'"></div>'));
return that;
};
@ -328,21 +354,36 @@ Class.pt.creat = function(){
}
}();
}() : body.append(html[1]);
$('.layui-layer-move')[0] || body.append(ready.moveElem = moveElem);
$('#'+ doms.MOVE)[0] || body.append(ready.moveElem = moveElem);
that.layero = $('#'+ doms[0] + times);
that.shadeo = $('#'+ doms.SHADE + times);
config.scrollbar || doms.html.css('overflow', 'hidden').attr('layer-full', times);
}).auto(times);
//遮罩
$('#layui-layer-shade'+ that.index).css({
that.shadeo.css({
'background-color': config.shade[1] || '#000'
,'opacity': config.shade[0]||config.shade
,'opacity': config.shade[0] || config.shade
});
config.type == 2 && layer.ie == 6 && that.layero.find('iframe').attr('src', content[0]);
//坐标自适应浏览器窗口尺寸
config.type == 4 ? that.tips() : that.offset();
config.type == 4 ? that.tips() : function(){
that.offset()
//首次弹出时,若 css 尚未加载,则等待 css 加载完毕后,重新设定尺寸
parseInt(ready.getStyle(document.getElementById(doms.MOVE), 'z-index')) || function(){
that.layero.css('visibility', 'hidden');
layer.ready(function(){
that.offset();
that.layero.css('visibility', 'visible');
});
}();
}();
//如果是固定定位
if(config.fixed){
win.on('resize', function(){
that.offset();
@ -352,7 +393,7 @@ Class.pt.creat = function(){
}
config.time <= 0 || setTimeout(function(){
layer.close(that.index)
layer.close(that.index);
}, config.time);
that.move().callback();
@ -636,18 +677,28 @@ Class.pt.callback = function(){
if(config.success){
if(config.type == 2){
layero.find('iframe').on('load', function(){
config.success(layero, that.index);
config.success(layero, that.index, that);
});
} else {
config.success(layero, that.index);
config.success(layero, that.index, that);
}
}
layer.ie == 6 && that.IE6(layero);
// 节流函数
//按钮
// 按钮的事件在这里
layero.find('.'+ doms[6]).children('a').on('click', function(){
var index = $(this).index();
if(index === 0){
if(that.yesStatus){
that.yesStatus = false
setTimeout(()=>{
that.yesStatus = true
},1000)
}else{
return
}
if(config.yes){
config.yes(that.index, layero)
} else if(config['btn1']){
@ -672,26 +723,26 @@ Class.pt.callback = function(){
//点遮罩关闭
if(config.shadeClose){
$('#layui-layer-shade'+ that.index).on('click', function(){
that.shadeo.on('click', function(){
layer.close(that.index);
});
}
//最小化
layero.find('.layui-layer-min').on('click', function(){
var min = config.min && config.min(layero);
min === false || layer.min(that.index, config);
var min = config.min && config.min(layero, that.index);
min === false || layer.min(that.index, config);
});
//全屏/还原
layero.find('.layui-layer-max').on('click', function(){
if($(this).hasClass('layui-layer-maxmin')){
layer.restore(that.index);
config.restore && config.restore(layero);
config.restore && config.restore(layero, that.index);
} else {
layer.full(that.index, config);
setTimeout(function(){
config.full && config.full(layero);
config.full && config.full(layero, that.index);
}, 100);
}
});
@ -738,6 +789,7 @@ Class.pt.openLayer = function(){
};
};
//记录宽高坐标,用于还原
ready.record = function(layero){
var area = [
layero.width(),
@ -832,11 +884,20 @@ layer.style = function(index, options, limit){
//最小化
layer.min = function(index, options){
options = options || {};
var layero = $('#'+ doms[0] + index)
,shadeo = $('#'+ doms.SHADE + index)
,titHeight = layero.find(doms[1]).outerHeight() || 0
,left = layero.attr('minLeft') || (181*ready.minIndex)+'px'
,position = layero.css('position');
,position = layero.css('position')
,settings = {
width: 180
,height: titHeight
,position: 'fixed'
,overflow: 'hidden'
};
//记录宽高坐标,用于还原
ready.record(layero);
if(ready.minLeft[0]){
@ -844,31 +905,33 @@ layer.min = function(index, options){
ready.minLeft.shift();
}
layero.attr('position', position);
//是否堆叠在左下角
if(options.minStack){
settings.left = left;
settings.top = win.height() - titHeight;
layero.attr('minLeft') || ready.minIndex++; //初次执行,最小化操作索引自增
layero.attr('minLeft', left);
}
layer.style(index, {
width: 180
,height: titHeight
,left: left
,top: win.height() - titHeight
,position: 'fixed'
,overflow: 'hidden'
}, true);
layero.attr('position', position);
layer.style(index, settings, true);
layero.find('.layui-layer-min').hide();
layero.attr('type') === 'page' && layero.find(doms[4]).hide();
ready.rescollbar(index);
if(!layero.attr('minLeft')){
ready.minIndex++;
}
layero.attr('minLeft', left);
//隐藏遮罩
shadeo.hide();
};
//还原
layer.restore = function(index){
var layero = $('#'+ doms[0] + index), area = layero.attr('area').split(',');
var type = layero.attr('type');
var layero = $('#'+ doms[0] + index)
,shadeo = $('#'+ doms.SHADE + index)
,area = layero.attr('area').split(',')
,type = layero.attr('type');
//恢复原来尺寸
layer.style(index, {
width: parseFloat(area[0]),
height: parseFloat(area[1]),
@ -877,10 +940,14 @@ layer.restore = function(index){
position: layero.attr('position'),
overflow: 'visible'
}, true);
layero.find('.layui-layer-max').removeClass('layui-layer-maxmin');
layero.find('.layui-layer-min').show();
layero.attr('type') === 'page' && layero.find(doms[4]).show();
ready.rescollbar(index);
//恢复遮罩
shadeo.show();
};
//全屏
@ -910,72 +977,75 @@ layer.title = function(name, index){
};
//关闭layer总方法
layer.close = function(index){
layer.ready(function(){
var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
if(!layero[0]) return;
var WRAP = 'layui-layer-wrap', remove = function(){
if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.'+WRAP);
for(var i = 0; i < 2; i++){
wrap.unwrap();
}
wrap.css('display', wrap.data('display')).removeClass(WRAP);
} else {
//低版本IE 回收 iframe
if(type === ready.type[2]){
try {
var iframe = $('#'+doms[4]+index)[0];
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
layero.find('.'+doms[5])[0].removeChild(iframe);
} catch(e){}
}
layero[0].innerHTML = '';
layero.remove();
layer.close = function(index, callback){
var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
if(!layero[0]) return;
var WRAP = 'layui-layer-wrap', remove = function(){
if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.'+WRAP);
for(var i = 0; i < 2; i++){
wrap.unwrap();
}
typeof ready.end[index] === 'function' && ready.end[index]();
delete ready.end[index];
};
if(layero.data('isOutAnim')){
layero.addClass('layer-anim '+ closeAnim);
}
$('#layui-layer-moves, #layui-layer-shade' + index).remove();
layer.ie == 6 && ready.reselect();
ready.rescollbar(index);
if(layero.attr('minLeft')){
ready.minIndex--;
ready.minLeft.push(layero.attr('minLeft'));
}
if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){
remove()
wrap.css('display', wrap.data('display')).removeClass(WRAP);
} else {
setTimeout(function(){
remove();
}, 200);
//低版本IE 回收 iframe
if(type === ready.type[2]){
try {
var iframe = $('#'+doms[4]+index)[0];
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
layero.find('.'+doms[5])[0].removeChild(iframe);
} catch(e){}
}
layero[0].innerHTML = '';
layero.remove();
}
});
typeof ready.end[index] === 'function' && ready.end[index]();
delete ready.end[index];
typeof callback === 'function' && callback();
};
if(layero.data('isOutAnim')){
layero.addClass('layer-anim '+ closeAnim);
}
$('#layui-layer-moves, #'+ doms.SHADE + index).remove();
layer.ie == 6 && ready.reselect();
ready.rescollbar(index);
if(layero.attr('minLeft')){
ready.minIndex--;
ready.minLeft.push(layero.attr('minLeft'));
}
if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){
remove()
} else {
setTimeout(function(){
remove();
}, 200);
}
};
//关闭所有层
layer.closeAll = function(type){
layer.ready(function(){
$.each($('.'+doms[0]), function(){
var othis = $(this);
var is = type ? (othis.attr('type') === type) : 1;
is && layer.close(othis.attr('times'));
is = null;
});
layer.closeAll = function(type, callback){
if(typeof type === 'function'){
callback = type;
type = null;
};
var domsElem = $('.'+doms[0]);
$.each(domsElem, function(_index){
var othis = $(this);
var is = type ? (othis.attr('type') === type) : 1;
is && layer.close(othis.attr('times'), _index === domsElem.length - 1 ? callback : null);
is = null;
});
if(domsElem.length === 0) typeof callback === 'function' && callback();
};
/**
拓展模块layui开始合并在一起
拓展模块layui 开始合并在一起
*/
@ -1081,17 +1151,21 @@ layer.photos = function(options, loop, key){
var dict = {};
options = options || {};
if(!options.photos) return;
var type = options.photos.constructor === Object;
var photos = type ? options.photos : {}, data = photos.data || [];
var start = photos.start || 0;
dict.imgIndex = (start|0) + 1;
//若 photos 并非选择器或 jQuery 对象,则为普通 object
var isObject = !(typeof options.photos === 'string' || options.photos instanceof $)
,photos = isObject ? options.photos : {}
,data = photos.data || []
,start = photos.start || 0;
dict.imgIndex = (start|0) + 1;
options.img = options.img || 'img';
var success = options.success;
delete options.success;
if(!type){ //页面直接获取
//如果 options.photos 不是一个对象
if(!isObject){ //页面直接获取
var parent = $(options.photos), pushData = function(){
data = [];
parent.find(options.img).each(function(index){
@ -1103,7 +1177,7 @@ layer.photos = function(options, loop, key){
src: othis.attr('layer-src') || othis.attr('src'),
thumb: othis.attr('src')
});
})
});
};
pushData();
@ -1111,6 +1185,7 @@ layer.photos = function(options, loop, key){
if (data.length === 0) return;
loop || parent.on('click', options.img, function(){
pushData();
var othis = $(this), index = othis.attr('layer-index');
layer.photos($.extend(options, {
photos: {
@ -1120,8 +1195,7 @@ layer.photos = function(options, loop, key){
},
full: options.full
}), true);
pushData();
})
});
//不直接弹出
if(!loop) return;
@ -1177,20 +1251,22 @@ layer.photos = function(options, loop, key){
//一些动作
dict.event = function(){
/*
dict.bigimg.hover(function(){
dict.imgsee.show();
}, function(){
dict.imgsee.hide();
});
*/
dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){
event.preventDefault();
dict.imgprev();
dict.imgprev(true);
});
dict.bigimg.find('.layui-layer-imgnext').on('click', function(event){
event.preventDefault();
dict.imgnext();
dict.imgnext(true);
});
$(document).on('keyup', dict.keyup);
@ -1220,6 +1296,11 @@ layer.photos = function(options, loop, key){
loadImage(data[start].src, function(img){
layer.close(dict.loadi);
//切换图片时不出现动画
if(key) options.anim = -1;
//弹出图片层
dict.index = layer.open($.extend({
type: 1,
id: 'layui-layer-photos',
@ -1249,19 +1330,24 @@ layer.photos = function(options, loop, key){
moveType: 1,
scrollbar: false,
moveOut: true,
//anim: Math.random()*5|0,
anim: 5,
isOutAnim: false,
skin: 'layui-layer-photos' + skin('photos'),
content: '<div class="layui-layer-phimg">'
+'<img src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'
+'<div class="layui-layer-imgsee">'
+(data.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>' : '')
+'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="javascript:;">'+ (data[start].alt||'') +'</a><em>'+ dict.imgIndex +'/'+ data.length +'</em></span></div>'
+'</div>'
+function(){
if(data.length > 1){
return '<div class="layui-layer-imgsee">'
+'<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>'
+'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="javascript:;">'+ (data[start].alt || '') +'</a><em>'+ dict.imgIndex +' / '+ data.length +'</em></span></div>'
+'</div>'
}
return '';
}()
+'</div>',
success: function(layero, index){
dict.bigimg = layero.find('.layui-layer-phimg');
dict.imgsee = layero.find('.layui-layer-imguide,.layui-layer-imgbar');
dict.imgsee = layero.find('.layui-layer-imgbar');
dict.event(layero);
options.tab && options.tab(data[start], layero);
typeof success === 'function' && success(layero);
@ -1296,7 +1382,7 @@ ready.run = function(_$){
//加载方式
window.layui && layui.define ? (
layer.ready()
,layui.define('jquery', function(exports){ //layui加载
,layui.define('jquery', function(exports){ //layui 加载
layer.path = layui.cache.dir;
ready.run(layui.$);
@ -1305,13 +1391,16 @@ window.layui && layui.define ? (
exports('layer', layer);
})
) : (
(typeof define === 'function' && define.amd) ? define(['jquery'], function(){ //requirejs加载
(typeof define === 'function' && define.amd) ? define(['jquery'], function(){ //requirejs 加载
ready.run(window.jQuery);
return layer;
}) : function(){ //普通script标签加载
ready.run(window.jQuery);
}) : function(){ //普通 script 标签加载
layer.ready();
ready.run(window.jQuery);
}()
);
}(window);

View File

@ -1,8 +1,5 @@
/**
@Name : laypage 分页组件
@LicenseMIT
* laypage 分页组件
*/
layui.define(function(exports){
@ -31,35 +28,43 @@ layui.define(function(exports){
}
};
//分页视图
// 分页视图
Class.prototype.view = function(){
var that = this
,config = that.config
,groups = config.groups = 'groups' in config ? (config.groups|0) : 5; //连续页码个数
var that = this;
var config = that.config;
// 连续页码个数
var groups = config.groups = 'groups' in config
? (Number(config.groups) || 0)
: 5;
//排版
// 排版
config.layout = typeof config.layout === 'object'
? config.layout
: ['prev', 'page', 'next'];
config.count = config.count|0; //数据总数
config.curr = (config.curr|0) || 1; //当前页
config.count = Number(config.count) || 0; // 数据总数
config.curr = Number(config.curr) || 1; // 当前页
//每页条数的选择项
// 每页条数的选择项
config.limits = typeof config.limits === 'object'
? config.limits
: [10, 20, 30, 40, 50];
config.limit = (config.limit|0) || 10; //默认条数
// 默认条数
config.limit = Number(config.limit) || 10;
//总页数
config.pages = Math.ceil(config.count/config.limit) || 1;
//当前页不能超过总页数
// 当前页不能超过总页数
if(config.curr > config.pages){
config.curr = config.pages;
} else if(config.curr < 1) { // 当前分页不能小于 1
config.curr = 1;
}
//连续分页个数不能低于0且不能大于总页数
//连续分页个数不能低于 0 且不能大于总页数
if(groups < 0){
groups = 1;
} else if (groups > config.pages){
@ -200,7 +205,7 @@ layui.define(function(exports){
,input = elem[tag]('input')[0]
,select = elem[tag]('select')[0]
,skip = function(){
var curr = input.value.replace(/\s|\D/g, '')|0;
var curr = Number(input.value.replace(/\s|\D/g, ''));
if(curr){
config.curr = curr;
that.render();
@ -213,7 +218,7 @@ layui.define(function(exports){
for(var i = 0, len = childs.length; i < len; i++){
if(childs[i].nodeName.toLowerCase() === 'a'){
laypage.on(childs[i], 'click', function(){
var curr = this.getAttribute('data-page')|0;
var curr = Number(this.getAttribute('data-page'));
if(curr < 1 || curr > config.pages) return;
config.curr = curr;
that.render();

View File

@ -1,12 +1,8 @@
/**
@Name : laytpl 模板引擎
@LicenseMIT
* laytpl 模板引擎
*/
layui.define(function(exports){
"use strict";
var config = {
@ -27,8 +23,15 @@ layui.define(function(exports){
return exp((_||'') + config.open + types + config.close + (__||''));
},
escape: function(html){
return String(html||'').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;');
var exp = /[<"'>]|&(?=#[a-zA-Z0-9]+)/g;
if(html === undefined || html === null) return '';
html += '';
if(!exp.test(html)) return html;
return html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
.replace(/</g, '&lt;').replace(/>/g, '&gt;')
.replace(/'/g, '&#39;').replace(/"/g, '&quot;');
},
error: function(e, tplog){
var error = 'Laytpl Error: ';
@ -64,31 +67,33 @@ layui.define(function(exports){
return str
})
//匹配JS规则内容
//匹配 JS 语法
.replace(/(?="|')/g, '\\').replace(tool.query(), function(str){
str = str.replace(jss, '').replace(jsse, '');
return '";' + str.replace(/\\/g, '') + ';view+="';
return '";' + str.replace(/\\(.)/g, '$1') + ';view+="';
})
//匹配普通字段
//匹配普通输出语句
.replace(tool.query(1), function(str){
var start = '"+(';
var start = '"+laytpl.escape(';
if(str.replace(/\s/g, '') === config.open+config.close){
return '';
}
str = str.replace(exp(config.open+'|'+config.close), '');
if(/^=/.test(str)){
str = str.replace(/^=/, '');
start = '"+_escape_(';
} else if(/^-/.test(str)){
str = str.replace(/^-/, '');
start = '"+(';
}
return start + str.replace(/\\/g, '') + ')+"';
return start + str.replace(/\\(.)/g, '$1') + ')+"';
});
tpl = '"use strict";var view = "' + tpl + '";return view;';
try{
that.cache = tpl = new Function('d, _escape_', tpl);
return tpl(data, tool.escape);
that.cache = tpl = new Function('d, laytpl', tpl);
return tpl(data, tool);
} catch(e){
delete that.cache;
return tool.error(e, tplog);
@ -98,7 +103,7 @@ layui.define(function(exports){
Tpl.pt.render = function(data, callback){
var that = this, tpl;
if(!data) return tool.error('no data');
tpl = that.cache ? that.cache(data, tool.escape) : that.parse(that.tpl, data);
tpl = that.cache ? that.cache(data, tool) : that.parse(that.tpl, data);
if(!callback) return tpl;
callback(tpl);
};

View File

@ -1,7 +1,5 @@
/**
@Name用于打包聚合版该文件不会存在于构建后的目录
* 用于打包聚合版该文件不会存在于构建后的目录
*/
layui.define(function(exports){

View File

@ -1,8 +1,6 @@
/**
@Namelayui 移动模块入口 | 构建后则为移动模块集合
@LicenseMIT
* layui 移动模块入口
* 构建后则为移动模块集合
*/

View File

@ -1,8 +1,5 @@
/**
@Title: rate 评分评星组件
@LicenseMIT
* rate 评分评星组件
*/
layui.define('jquery',function(exports){

View File

@ -1,13 +1,10 @@
/**
@Title: slider 滑块组件
@LicenseMIT
* slider 滑块组件
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.jquery
var $ = layui.$
//外部接口
,slider = {
@ -33,9 +30,9 @@ layui.define('jquery', function(exports){
,options = that.config;
return {
setValue: function(value, index){ //设置值
setValue: function(value, index,s){ //设置值
options.value = value;
return that.slide('set', value, index || 0);
return that.slide('set', value, index || 0,s);
}
,config: options
}
@ -50,6 +47,7 @@ layui.define('jquery', function(exports){
that.index = ++slider.index;
that.config = $.extend({}, that.config, slider.config, options);
that.render();
that.anxia = false;
};
//默认配置
@ -114,7 +112,7 @@ layui.define('jquery', function(exports){
var theme = options.disabled ? '#c2c2c2' : options.theme;
//滑块
var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="layui-slider-tips"></div>' : '') +
var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="'+ SLIDER_TIPS +'"></div>' : '') +
'<div class="layui-slider-bar" style="background:'+ theme +'; '+ (options.type === 'vertical' ? 'height' : 'width') +':'+ scale +';'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
'<div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>' : '') +'</div>';
@ -177,6 +175,7 @@ layui.define('jquery', function(exports){
};
//划过滑块显示数值
var timer;
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
@ -185,18 +184,30 @@ layui.define('jquery', function(exports){
,value = $(this).parent().data('value')
,tipsTxt = options.setTips ? options.setTips(value) : value;
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
if(options.type === 'vertical'){
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"20px", "display":"inline-block"});
}else{
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "display":"inline-block"});
};
clearTimeout(timer);
timer = setTimeout(function(){
if(options.type === 'vertical'){
that.elemTemp.find('.' + SLIDER_TIPS).css({
"bottom": left + '%',
"margin-bottom": "20px",
"display": "inline-block"
});
} else {
that.elemTemp.find('.' + SLIDER_TIPS).css({
"left": left + '%',
"display": "inline-block"
});
};
}, 300);
}).on('mouseout', function(){
clearTimeout(timer);
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
});
};
//滑块滑动
Class.prototype.slide = function(setValue, value, i){
Class.prototype.slide = function(setValue, value, i,s){
var that = this
,options = that.config
,sliderAct = that.elemTemp
@ -207,7 +218,7 @@ layui.define('jquery', function(exports){
,sliderTxt = sliderAct.next('.' + SLIDER_INPUT)
,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val()
,step = 100 / ((options.max - options.min) / Math.ceil(options.step))
,change = function(offsetValue, index){
,change = function(offsetValue, index,s){
if(Math.ceil(offsetValue) * step > 100){
offsetValue = Math.ceil(offsetValue) * step
}else{
@ -249,7 +260,7 @@ layui.define('jquery', function(exports){
}
//回调
options.change && options.change(options.range ? arrValue : selfValue);
options.change && options.change(options.range ? arrValue : selfValue,selfValue,s);
}
,valueTo = function(value){
var oldLeft = value / sliderWidth() * 100 / step
@ -273,7 +284,7 @@ layui.define('jquery', function(exports){
};
//动态赋值
if(setValue === 'set') return change(value, i);
if(setValue === 'set') return change(value, i,s);
//滑块滑动
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
@ -294,7 +305,7 @@ layui.define('jquery', function(exports){
if(left < 0)left = 0;
if(left > sliderWidth())left = sliderWidth();
var reaLeft = left / sliderWidth() * 100 / step;
change(reaLeft, index);
change(reaLeft, index,2);
othis.addClass(ELEM_HOVER);
sliderAct.find('.' + SLIDER_TIPS).show();
e.preventDefault();
@ -326,11 +337,46 @@ layui.define('jquery', function(exports){
}else{
index = 0;
};
change(reaLeft, index);
// console.log(reaLeft,left,step)
change(reaLeft, index,true);
e.preventDefault();
}
});
// 拖动滑块
sliderAct.find('.' + SLIDER_BAR).on("mousemove",function (e){
if(!that.anxia){
return
}
return
var main = $('.' + SLIDER_WRAP_BTN);
if(!main.is(event.target) && main.has(event.target).length === 0 && main.length){
var left = options.type === 'vertical' ? (sliderWidth() - e.clientY + $(this).offset().top):(e.clientX - $(this).offset().left), index;
if(left < 0)left = 0;
if(left > sliderWidth())left = sliderWidth();
var reaLeft = left / sliderWidth() * 100 / step;
if(options.range){
if(options.type === 'vertical'){
index = Math.abs(left - parseInt($(sliderWrap[0]).css('bottom'))) > Math.abs(left - parseInt($(sliderWrap[1]).css('bottom'))) ? 1 : 0;
}else{
index = Math.abs(left - sliderWrap[0].offsetLeft) > Math.abs(left - sliderWrap[1].offsetLeft) ? 1 : 0;
}
}else{
index = 0;
};
console.log(reaLeft,left,step)
change(reaLeft, index);
e.preventDefault();
}
})
sliderAct.find('.' + SLIDER_BAR).on("mousedown",function (){
that.anxia = true
})
sliderAct.find('.' + SLIDER_BAR).on("mouseup",function (){
that.anxia = false
})
sliderAct.find('.' + SLIDER_BAR).on("click",function (e){
e.preventDefault();
})
//点击加减输入框
sliderTxt.children('.' + SLIDER_INPUT_BTN).children('i').each(function(index){
$(this).on('click', function(){

File diff suppressed because it is too large Load Diff

View File

@ -1,8 +1,5 @@
/**
@Nametransfer 穿梭框组件
@LicenseMIT
* transfer 穿梭框组件
*/
layui.define(['laytpl', 'form'], function(exports){
@ -71,7 +68,7 @@ layui.define(['laytpl', 'form'], function(exports){
obj = obj || {};
return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">'
,'<div class="layui-transfer-header">'
,'<input type="checkbox" name="'+ obj.checkAllName +'" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{ d.data.title['+ obj.index +'] || \'list'+ (obj.index + 1) +'\' }}">'
,'<input type="checkbox"' + (obj.disAll && obj.disAll.includes(obj.index) ? ' disabled' : '') + ' name="'+ obj.checkAllName +'" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{ d.data.title['+ obj.index +'] || \'list'+ (obj.index + 1) +'\' }}">'
,'</div>'
,'{{# if(d.data.showSearch){ }}'
,'<div class="layui-transfer-search">'
@ -84,10 +81,11 @@ layui.define(['laytpl', 'form'], function(exports){
}
//主模板
,TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{ d.index }}">'
,TPL_MAIN = function(option){ return ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{ d.index }}">'
,TPL_BOX({
index: 0
,checkAllName: 'layTransferLeftCheckAll'
,checkAllName: 'layTransferLeftCheckAll',
disAll: option.disAll
})
,'<div class="layui-transfer-active">'
,'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">'
@ -101,7 +99,7 @@ layui.define(['laytpl', 'form'], function(exports){
index: 1
,checkAllName: 'layTransferRightCheckAll'
})
,'</div>'].join('')
,'</div>'].join('')}
//构造器
,Class = function(options){
@ -139,7 +137,7 @@ layui.define(['laytpl', 'form'], function(exports){
,options = that.config;
//解析模板
var thisElem = that.elem = $(laytpl(TPL_MAIN).render({
var thisElem = that.elem = $(laytpl(TPL_MAIN(options)).render({
data: options
,index: that.index //索引
}));
@ -171,7 +169,11 @@ layui.define(['laytpl', 'form'], function(exports){
});
that.layData.css({
height: function(){
return options.height - that.layHeader.outerHeight() - that.laySearch.outerHeight() - 2
var height = options.height - that.layHeader.outerHeight();
if(options.showSearch){
height -= that.laySearch.outerHeight();
}
return height - 2;
}()
});
@ -321,7 +323,62 @@ layui.define(['laytpl', 'form'], function(exports){
});
return selectedData;
};
//执行穿梭
Class.prototype.transfer = function (_index, elem) {
var that = this
,options = that.config
,thisBoxElem = that.layBox.eq(_index)
,arr = []
if (!elem) {
//通过按钮触发找到选中的进行移动
thisBoxElem.each(function(_index){
var othis = $(this)
,thisDataElem = othis.find('.'+ ELEM_DATA);
thisDataElem.children('li').each(function(){
var thisList = $(this)
,thisElemCheckbox = thisList.find('input[type="checkbox"]')
,isHide = thisElemCheckbox.data('hide');
if(thisElemCheckbox[0].checked && !isHide){
thisElemCheckbox[0].checked = false;
thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
thisList.remove();
//记录当前穿梭的数据
arr.push(thisElemCheckbox[0].value);
}
that.setValue();
});
});
} else {
//双击单条记录移动
var thisList = elem
,thisElemCheckbox = thisList.find('input[type="checkbox"]')
thisElemCheckbox[0].checked = false;
thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
thisList.remove();
//记录当前穿梭的数据
arr.push(thisElemCheckbox[0].value);
that.setValue();
}
that.renderCheckBtn();
//穿梭时,如果另外一个框正在搜索,则触发匹配
var siblingInput = thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_SEARCH +' input')
siblingInput.val() === '' || siblingInput.trigger('keyup');
//穿梭时的回调
options.onchange && options.onchange(that.getData(arr), _index);
}
//事件
Class.prototype.events = function(){
var that = this
@ -342,48 +399,31 @@ layui.define(['laytpl', 'form'], function(exports){
this.checked = checked;
});
}
that.renderCheckBtn({stopNone: true});
setTimeout(function () {
that.renderCheckBtn({stopNone: true});
}, 0)
});
//按钮事件
// 双击穿梭
that.elem.on('dblclick', '.' + ELEM_DATA + '>li', function(event){
var elemThis = $(this)
,thisElemCheckbox = elemThis.children('input[type="checkbox"]')
,thisDataElem = elemThis.parent()
,thisBoxElem = thisDataElem.parent()
if(thisElemCheckbox[0].disabled) return;
that.transfer(thisBoxElem.data('index'), elemThis);
})
// 穿梭按钮事件
that.layBtn.on('click', function(){
var othis = $(this)
,_index = othis.data('index')
,thisBoxElem = that.layBox.eq(_index)
,arr = [];
if(othis.hasClass(DISABLED)) return;
that.layBox.eq(_index).each(function(_index){
var othis = $(this)
,thisDataElem = othis.find('.'+ ELEM_DATA);
thisDataElem.children('li').each(function(){
var thisList = $(this)
,thisElemCheckbox = thisList.find('input[type="checkbox"]')
,isHide = thisElemCheckbox.data('hide');
if(thisElemCheckbox[0].checked && !isHide){
thisElemCheckbox[0].checked = false;
thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
thisList.remove();
//记录当前穿梭的数据
arr.push(thisElemCheckbox[0].value);
}
that.setValue();
});
});
that.renderCheckBtn();
//穿梭时,如果另外一个框正在搜索,则触发匹配
var siblingInput = thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_SEARCH +' input')
siblingInput.val() === '' || siblingInput.trigger('keyup');
//穿梭时的回调
options.onchange && options.onchange(that.getData(arr), _index);
that.transfer(_index);
});
//搜索

View File

@ -1,8 +1,5 @@
/**
@Nametree 树组件
@LicenseMIT
* tree 树组件
*/
layui.define('form', function(exports){
@ -101,7 +98,7 @@ layui.define('form', function(exports){
var that = this;
layui.each(options, function(key, item){
if(item.constructor === Array) delete that.config[key];
if(layui.type(item) === 'array') delete that.config[key];
});
that.config = $.extend(true, {}, that.config, options);
@ -198,9 +195,9 @@ layui.define('form', function(exports){
//节点
,function(){
if(options.isJump && item.href){
return '<a href="'+ item.href +'" target="_blank" class="'+ ELEM_TEXT +'">'+ (item.title || item.label || options.text.defaultNodeName) +'</a>';
return '<a href="'+ item.href +'" target="_blank" class="'+ ELEM_TEXT +'"' +` style="${item.fontColor && 'color: ' + item.fontColor}"` + '>'+ (item.title || item.label || options.text.defaultNodeName) +'</a>';
}else{
return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') +'">'+ (item.title || item.label || options.text.defaultNodeName) +'</span>';
return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') + '"' +` style="${item.fontColor && 'color: ' + item.fontColor}"` + '>'+ (item.title || item.label || options.text.defaultNodeName) +'</span>';
}
}()
,'</div>'

View File

@ -1,8 +1,6 @@
/**
@Title: upload 文件上传组件
@LicenseMIT
* upload
* 上传组件
*/
layui.define('layer' , function(exports){
@ -45,7 +43,7 @@ layui.define('layer' , function(exports){
}
//字符常量
,MOD_NAME = 'upload', ELEM = '.layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,MOD_NAME = 'upload', ELEM = 'layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag'
@ -64,6 +62,7 @@ layui.define('layer' , function(exports){
,auto: true //是否选完文件后自动上传
,bindAction: '' //手动上传触发的元素
,url: '' //上传地址
,force: '' //强制规定返回的数据格式,目前只支持是否强制 json
,field: 'file' //文件字段名
,acceptMime: '' //筛选出的文件类型,默认为所有文件
,method: 'post' //请求上传的 http 类型
@ -181,14 +180,14 @@ layui.define('layer' , function(exports){
//高级浏览器处理方式,支持跨域
,ajaxSend = function(){
var successful = 0, aborted = 0
var successful = 0, failed = 0
,items = files || that.files || that.chooseFiles || elemFile.files
,allDone = function(){ //多文件全部上传完毕的回调
if(options.multiple && successful + aborted === that.fileLength){
if(options.multiple && successful + failed === that.fileLength){
typeof options.allDone === 'function' && options.allDone({
total: that.fileLength
,successful: successful
,aborted: aborted
,failed: failed
});
}
};
@ -211,6 +210,7 @@ layui.define('layer' , function(exports){
,contentType: false
,processData: false
,dataType: 'json'
,async: false
,headers: options.headers || {}
//成功回调
,success: function(res){
@ -219,9 +219,9 @@ layui.define('layer' , function(exports){
allDone();
}
//异常回调
,error: function(){
aborted++;
that.msg('请求上传接口出现异常');
,error: function(e){
failed++;
that.msg('Request URL is abnormal: '+ (e.statusText || 'error'));
error(index);
allDone();
}
@ -231,10 +231,10 @@ layui.define('layer' , function(exports){
opts.xhr = function(){
var xhr = $.ajaxSettings.xhr();
//上传进度
xhr.upload.addEventListener("progress", function (e) {
if(e.lengthComputable) {
var percent = Math.floor((e.loaded/e.total)* 100); //百分比
options.progress(percent, options.item[0], e);
xhr.upload.addEventListener("progress", function (obj) {
if(obj.lengthComputable){
var percent = Math.floor((obj.loaded/obj.total)* 100); //百分比
options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, index);
}
});
return xhr;
@ -244,7 +244,7 @@ layui.define('layer' , function(exports){
});
}
//低版本IE处理方式不支持跨域
//低版本 IE 处理方式,不支持跨域
,iframeSend = function(){
var iframe = $('#'+ ELEM_IFRAME);
@ -257,7 +257,7 @@ layui.define('layer' , function(exports){
try {
res = iframeBody.text();
} catch(e) {
that.msg('获取上传后的响应信息出现异常');
that.msg('Cross-domain requests are not supported');
clearInterval(Class.timer);
error();
}
@ -273,14 +273,18 @@ layui.define('layer' , function(exports){
,done = function(index, res){
that.elemFile.next('.'+ ELEM_CHOOSE).remove();
elemFile.value = '';
if(typeof res !== 'object'){
try {
res = JSON.parse(res);
} catch(e){
res = {};
return that.msg('请对上传接口返回有效JSON');
if(options.force === 'json'){
if(typeof res !== 'object'){
try {
res = JSON.parse(res);
} catch(e){
res = {};
return that.msg('Please return JSON data format');
}
}
}
typeof options.done === 'function' && options.done(res, index || 0, function(files){
that.upload(files);
});
@ -335,16 +339,8 @@ layui.define('layer' , function(exports){
//提交上传
,send = function(){
//选择文件的回调
if(type === 'choose' || options.auto){
options.choose && options.choose(args);
if(type === 'choose'){
return;
}
}
//上传前的回调
options.before && options.before(args);
//上传前的回调 - 如果回调函数明确返回false则停止上传(#pulls55)
if(options.before && (options.before(args) === false)) return;
//IE兼容处理
if(device.ie){
@ -353,6 +349,14 @@ layui.define('layer' , function(exports){
ajaxSend();
}
//文件类型名称
,typeName = ({
file: '文件'
,images: '图片'
,video: '视频'
,audio: '音频'
})[options.accept] || '文件';
//校验文件格式
value = value.length === 0
@ -360,39 +364,53 @@ layui.define('layer' , function(exports){
: value;
if(value.length === 0) return;
//根据文件类型校验
switch(options.accept){
case 'file': //一般文件
if(exts && !RegExp('\\w\\.('+ exts +')$', 'i').test(escape(value))){
that.msg('选择的文件中包含不支持的格式');
return elemFile.value = '';
}
layui.each(value, function(i, item){
if(exts && !RegExp('.\\.('+ exts +')$', 'i').test(escape(item))){
return check = true;
}
});
break;
case 'video': //视频文件
if(!RegExp('\\w\\.('+ (exts || 'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(value))){
that.msg('选择的视频中包含不支持的格式');
return elemFile.value = '';
}
layui.each(value, function(i, item){
if(!RegExp('.\\.('+ (exts || 'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(item))){
return check = true;
}
});
break;
case 'audio': //音频文件
if(!RegExp('\\w\\.('+ (exts || 'mp3|wav|mid') +')$', 'i').test(escape(value))){
that.msg('选择的音频中包含不支持的格式');
return elemFile.value = '';
}
layui.each(value, function(i, item){
if(!RegExp('.\\.('+ (exts || 'mp3|wav|mid') +')$', 'i').test(escape(item))){
return check = true;
}
});
break;
default: //图片文件
layui.each(value, function(i, item){
if(!RegExp('\\w\\.('+ (exts || 'jpg|png|gif|bmp|jpeg$') +')', 'i').test(escape(item))){
check = true;
if(!RegExp('.\\.('+ (exts || 'jpg|png|gif|bmp|jpeg') +')$', 'i').test(escape(item))){
return check = true;
}
});
if(check){
that.msg('选择的图片中包含不支持的格式');
return elemFile.value = '';
}
break;
}
//校验失败提示
if(check){
that.msg('选择的'+ typeName +'中包含不支持的格式');
return elemFile.value = '';
}
//选择文件的回调
if(type === 'choose' || options.auto){
options.choose && options.choose(args);
if(type === 'choose'){
return;
}
}
//检验文件数量
that.fileLength = function(){
var length = 0
@ -402,8 +420,12 @@ layui.define('layer' , function(exports){
});
return length;
}();
if(options.number && that.fileLength > options.number){
return that.msg('同时最多只能上传的数量为:'+ options.number);
return that.msg(
'同时最多只能上传: '+ options.number + ' 个文件'
+'<br>您当前已经选择了: '+ that.fileLength +' 个文件'
);
}
//检验文件大小
@ -418,8 +440,9 @@ layui.define('layer' , function(exports){
limitSize = size;
}
});
if(limitSize) return that.msg('文件不能超过'+ limitSize);
if(limitSize) return that.msg('文件大小不能超过 '+ limitSize);
}
send();
};
@ -458,6 +481,7 @@ layui.define('layer' , function(exports){
//设置选择的文本
,setChooseText = function(files, filename){
var elemFile = that.elemFile
,item = options.item ? options.item : options.elem
,value = files.length > 1
? files.length + '个文件'
: ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || '');
@ -502,12 +526,8 @@ layui.define('layer' , function(exports){
othis.removeAttr('lay-over');
setChooseFile(files);
if(options.auto){
that.upload(files);
} else {
setChooseText(files);
}
options.auto ? that.upload() : setChooseText(files); //是否自动触发上传
});
}

View File

@ -1,14 +1,12 @@
/**
@Nameutil 工具集组件
@LicenseMIT
*/
* util 工具组件
*/
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$
,hint = layui.hint()
//外部接口
,util = {
@ -141,8 +139,14 @@ layui.define('jquery', function(exports){
//转化为日期格式字符
,toDateString: function(time, format){
//若 null 或空字符,则返回空字符
if(time === null || time === '') return '';
var that = this
,date = new Date(time || new Date())
,date = new Date(function(){
if(!time) return;
return isNaN(time) ? time : (typeof time === 'string' ? parseInt(time) : time)
}() || new Date())
,ymd = [
that.digit(date.getFullYear(), 4)
,that.digit(date.getMonth() + 1)
@ -153,9 +157,10 @@ layui.define('jquery', function(exports){
,that.digit(date.getMinutes())
,that.digit(date.getSeconds())
];
if(!date.getDate()) return hint.error('Invalid Msec for "util.toDateString(Msec)"'), '';
format = format || 'yyyy-MM-dd HH:mm:ss';
return format.replace(/yyyy/g, ymd[0])
.replace(/MM/g, ymd[1])
.replace(/dd/g, ymd[2])
@ -164,17 +169,55 @@ layui.define('jquery', function(exports){
.replace(/ss/g, hms[2]);
}
//防 xss 攻击
//转义 html
,escape: function(html){
return String(html || '').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
var exp = /[<"'>]|&(?=#[a-zA-Z0-9]+)/g;
if(html === undefined || html === null) return '';
html += '';
if(!exp.test(html)) return html;
return html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
.replace(/</g, '&lt;').replace(/>/g, '&gt;')
.replace(/'/g, '&#39;').replace(/"/g, '&quot;');
}
,unescape: function(str){
return String(str || '').replace(/\&amp;/g, '&')
//还原转义的 html
,unescape: function(html){
if(html === undefined || html === null) html = '';
html += '';
return html.replace(/\&amp;/g, '&')
.replace(/\&lt;/g, '<').replace(/\&gt;/g, '>')
.replace(/\&#39;/, '\'').replace(/\&quot;/, '"');
.replace(/\&#39;/g, '\'').replace(/\&quot;/g, '"');
}
//让指定的元素保持在可视区域
,toVisibleArea: function(options){
options = $.extend({
margin: 160 //触发动作的边界值
,duration: 200 //动画持续毫秒数
,type: 'y' //触发方向x 水平、y 垂直
}, options);
if(!options.scrollElem[0] || !options.thisElem[0]) return;
var scrollElem = options.scrollElem //滚动元素
,thisElem = options.thisElem //目标元素
,vertical = options.type === 'y' //是否垂直方向
,SCROLL_NAME = vertical ? 'scrollTop' : 'scrollLeft' //滚动方法
,OFFSET_NAME = vertical ? 'top' : 'left' //坐标方式
,scrollValue = scrollElem[SCROLL_NAME]() //当前滚动距离
,size = scrollElem[vertical ? 'height' : 'width']() //滚动元素的尺寸
,scrollOffet = scrollElem.offset()[OFFSET_NAME] //滚动元素所处位置
,thisOffset = thisElem.offset()[OFFSET_NAME] - scrollOffet //目标元素当前的所在位置
,obj = {};
//边界满足条件
if(thisOffset > size - options.margin || thisOffset < options.margin){
obj[SCROLL_NAME] = thisOffset - size/2 + scrollValue
scrollElem.animate(obj, options.duration);
}
}
//批量事件
@ -202,12 +245,14 @@ layui.define('jquery', function(exports){
return obj;
}
};
util.on = util.event;
// DOM 尺寸变化该创意来自http://benalman.com/projects/jquery-resize-plugin/
/*
!function(a,b,c){"$:nomunge";function l(){f=b[g](function(){d.each(function(){var b=a(this),c=b.width(),d=b.height(),e=a.data(this,i);(c!==e.w||d!==e.h)&&b.trigger(h,[e.w=c,e.h=d])}),l()},e[j])}var f,d=a([]),e=a.resize=a.extend(a.resize,{}),g="setTimeout",h="resize",i=h+"-special-event",j="delay",k="throttleWindow";e[j]=250,e[k]=!0,a.event.special[h]={setup:function(){if(!e[k]&&this[g])return!1;var b=a(this);d=d.add(b),a.data(this,i,{w:b.width(),h:b.height()}),1===d.length&&l()},teardown:function(){if(!e[k]&&this[g])return!1;var b=a(this);d=d.not(b),b.removeData(i),d.length||clearTimeout(f)},add:function(b){function f(b,e,f){var g=a(this),h=a.data(this,i)||{};h.w=e!==c?e:g.width(),h.h=f!==c?f:g.height(),d.apply(this,arguments)}if(!e[k]&&this[g])return!1;var d;return a.isFunction(b)?(d=b,f):(d=b.handler,b.handler=f,void 0)}}}($,window);
*/
//暴露接口
// 输出接口
exports('util', util);
});

View File

@ -1,2 +0,0 @@
# 说明
自动化测试用例,由 @xuexb 贡献

View File

@ -1,193 +0,0 @@
/**
* @file code - 测试
* @author xuexb <fe.xiaowu@gmail.com>
*/
/* global layui */
/* eslint-disable max-nested-callbacks, fecs-indent */
var laycode = layui.code;
var $ = layui.$;
/**
* 创建dom元素, 并返回 jquery 对象
*
* @inner
*
* @param {string} html 标签
*
* @return {jQuery}
*/
var createNode = function (html) {
return $(html).addClass('test-node').appendTo('body');
};
describe('code', function () {
// 输出测试节点
beforeEach(function () {
createNode('<div id="test-div"></div>');
});
// 删除节点
afterEach(function () {
$('.test-node').remove();
});
it('css loaded', function () {
expect($('#layuicss-skincodecss').length).to.equal(1, 'css link 节点必须存在');
});
it('default params', function () {
expect(function () {
laycode();
}).to.not.throw();
createNode('<pre class="layui-code"><div class="layui-code-div">123</div></pre>');
laycode();
expect($('.layui-code').hasClass('layui-code-view')).to.equal(true, '元素的样式名必须包含 layui-code-view');
expect($('.layui-code').find('.layui-code-div').length).to.equal(1, '默认没有 encode');
expect($('.layui-code').find('.layui-code-h3 a').length).to.equal(1, '默认有版权元素');
});
it('options.elem', function () {
createNode('<pre class="layui-test"><div>123</div></pre>');
laycode();
expect($('.layui-test').hasClass('layui-code-view')).to.be.false;
laycode({
elem: '.layui-test'
});
expect($('.layui-test').hasClass('layui-code-view')).to.be.true;
});
it('options.title', function () {
createNode('<pre class="layui-code"><div>123</div></pre>');
laycode({
title: 'layui',
// 主要是版权和标题在一个元素内
about: false
});
expect($('.layui-code-h3').text()).to.equal('layui', '判断标题元素');
});
it('options.height', function () {
createNode('<pre class="layui-code"><div>123</div></pre>');
laycode({
height: 100
});
expect($('.layui-code-ol').css('maxHeight')).to.equal('100px', '判断ol元素的最大高');
});
it('options.encode', function () {
createNode('<pre class="layui-code"><div class="layui-code-div">123\'"</div></pre>');
laycode({
encode: true
});
expect($('.layui-code').find('.layui-code-div').length).to.equal(0, 'encode 后元素被转义');
});
it('options.skin', function () {
createNode('<pre class="layui-code"><div class="layui-code-div">123</div></pre>');
laycode({
skin: 'notepad'
});
expect($('.layui-code-notepad').length).to.equal(1, '自定义风格存在');
});
it('options.about', function () {
createNode('<pre class="layui-code"><div class="layui-code-div">123</div></pre>');
laycode({
about: false
});
expect($('.layui-code').find('.layui-code-h3 a').length).to.equal(0, '不输出版权元素');
});
it('attr lay-title', function () {
createNode('<pre class="layui-code" lay-title="layui"><div>123</div></pre>');
laycode({
// 主要是版权和标题在一个元素内
about: false
});
expect($('.layui-code-h3').text()).to.equal('layui', '判断标题元素');
});
it('attr lay-height', function () {
createNode('<pre class="layui-code" lay-height="100px"><div>123</div></pre>');
laycode();
expect($('.layui-code-ol').css('maxHeight')).to.equal('100px', '判断ol元素的最大高');
});
it('attr lay-encode', function () {
createNode('<pre class="layui-code" lay-encode="true"><div class="layui-code-div">123</div></pre>');
laycode();
expect($('.layui-code').find('.layui-code-div').length).to.equal(0, 'encode 后元素被转义');
});
it('attr lay-skin', function () {
createNode('<pre class="layui-code" lay-skin="notepad"><div class="layui-code-div">123</div></pre>');
laycode();
expect($('.layui-code-notepad').length).to.equal(1, '自定义风格存在');
});
it('multiple nested', function () {
createNode([
'<pre class="layui-code">',
'<div class="layui-code-div">123</div>',
'<pre class="layui-code"><div class="layui-code-div">123</div></pre>',
'</pre>'
].join(''));
laycode();
expect($('.layui-code-view').length).to.equal(2, '必须输出2个代码块');
expect($('.layui-code-h3').length).to.equal(2, '必须输出2个标题元素');
});
it('multiple init', function () {
createNode('<pre class="layui-code"><div class="layui-code-div">123</div></pre>');
laycode();
expect($('.layui-code-view').length).to.equal(1);
expect($('.layui-code-h3').length).to.equal(1);
laycode();
expect($('.layui-code-view').length).to.equal(1, '同标签多次调用时 view 层只有一个');
expect($('.layui-code-h3').length).to.equal(2, '多次调用输出多个标题元素');
});
it('multiple line', function () {
var html = [];
for (var i = 0; i < 300; i++) {
html.push('<div class="layui-code-div">layui</div>');
}
createNode('<pre class="layui-code">' + html.join('\n') + '</pre>');
laycode();
expect($('.layui-code-div').length).to.equal(300);
});
});
/* eslint-enable max-nested-callbacks, fecs-indent */

File diff suppressed because it is too large Load Diff

View File

@ -1,230 +0,0 @@
/**
* @file laytpl - 测试
* @author xuexb <fe.xiaowu@gmail.com>
*/
/* global layui */
/* eslint-disable max-nested-callbacks, fecs-indent */
var laytpl = layui.laytpl;
describe('laytpl', function () {
it('param is error', function () {
[
[], {},
null,
1,
true
].forEach(function (key) {
expect(laytpl(key)).to.have.string('Laytpl Error');
});
});
it('async render callback', function (done) {
expect(laytpl('').render()).to.have.string('Laytpl Error');
laytpl('{{ d.name }}是一位公猿').render({
name: '贤心'
}, function (result) {
expect(result).to.equal('贤心是一位公猿');
done();
});
});
it('sync result', function () {
var result = laytpl('{{ d.name }}是一位公猿').render({
name: '贤心'
});
expect(result).to.equal('贤心是一位公猿');
});
it('cached', function () {
var compile = laytpl('{{ d.name }}');
expect(compile.render({
name: 1
})).to.equal('1');
expect(compile.render({
name: 2
})).to.equal('2');
});
it('unescape result', function () {
var result = laytpl('{{ d.name }}<div></div>').render({
name: '<em>laytpl</em>'
});
expect(result).to.equal('<em>laytpl</em><div></div>');
});
it('escape result', function () {
var result = laytpl('{{= d.name }}<div></div>').render({
name: '<em>laytpl</em>'
});
expect(result).to.equal('&lt;em&gt;laytpl&lt;/em&gt;<div></div>');
});
describe('typeof result', function () {
it('string', function () {
expect(laytpl('{{ d.name }}').render({
name: 1
})).to.be.a('string');
expect(laytpl([
'{{# ',
' if (true) {',
' return "1";',
' }',
'}}'
].join('')).render({})).to.be.a('string');
});
// 表达式返回boolean
it('boolean', function () {
expect(laytpl([
'{{# ',
' if (true) {',
' return true;',
' }',
'}}'
].join('')).render({})).to.be.a('boolean');
});
it('number', function () {
expect(laytpl([
'{{# ',
' if (true) {',
' return 1;',
' }',
'}}'
].join('')).render({})).to.be.a('number');
});
});
describe('method config', function () {
// reset
afterEach(function () {
laytpl.config({
open: '{{',
close: '}}'
});
});
it('typeof', function () {
expect(laytpl.config).to.be.a('function');
});
it('param is empty', function () {
expect(laytpl.config()).to.be.undefined;
});
it('set open', function () {
laytpl.config({
open: '<%'
});
var result = laytpl([
'<%# var name = "laytpl"; }}',
'你好, <% name }}, <% d.date }}'
].join('')).render({
date: '2017'
});
expect(result).to.equal('你好, laytpl, 2017');
});
it('set open and close', function () {
laytpl.config({
open: '<%',
close: '%>'
});
var result = laytpl([
'<%# var name = "laytpl"; %>',
'你好, <% name %>, <% d.date %>'
].join('')).render({
date: '2017'
});
expect(result).to.equal('你好, laytpl, 2017');
});
});
describe('js expression', function () {
it('var', function () {
var result = laytpl('{{# var type = 1; }}{{ type }}{{ d.name }}').render({
name: 2
});
expect(result).to.equal('12');
});
it('function', function () {
var result = laytpl('{{# var fn = function () {return "ok"}; }}{{ fn() }}').render({});
expect(result).to.equal('ok');
});
it('for', function () {
var result = laytpl([
'{{# ',
' var fn = function () {',
' var num = 0;',
' for (var i = 0; i < 10;i++) {',
' num += 1;',
' }',
' return num',
' };',
'}}',
'{{# ',
' var name = "laytpl";',
'}}',
'你好, {{ name }}, {{ d.name }}, {{ fn() }}'
].join('')).render({
name: 'ok'
});
expect(result).to.equal('你好, laytpl, ok, 10');
});
it('if else', function () {
var result;
result = laytpl([
'{{# ',
' if (true) {',
' return true;',
' }',
' else {',
' return false',
' }',
'}}'
].join('')).render({});
expect(result).to.be.true;
result = laytpl([
'{{# ',
' if (!true) {',
' return true;',
' }',
' else {',
' return false',
' }',
'}}'
].join('')).render({});
expect(result).to.be.false;
});
});
describe('parse error', function () {
it('error var', function () {
var result = laytpl('{{ data.xxoo }}').render({});
expect(result).to.have.string('data');
expect(result).to.have.string('ReferenceError');
expect(result).to.have.string('Laytpl Error');
});
it('error expression', function () {
var result = laytpl('{{# var xxoo = ; }}').render({});
expect(result).to.have.string('Laytpl Error');
expect(result).to.have.string('SyntaxError');
});
});
});
/* eslint-enable max-nested-callbacks, fecs-indent */

View File

@ -1,601 +0,0 @@
/**
* @file layui - 测试
* @author xuexb <fe.xiaowu@gmail.com>
*/
/* global layui */
/* eslint-disable max-nested-callbacks, fecs-indent */
var $ = layui.$;
/**
* 是否基于`phantomjs`测试, 因为有些特殊的case在ie中是不可用的, 比如: `window.event = {}`
*
* @type {boolean}
*/
var IS_PHANTOMJS = layui.device('phantomjs').phantomjs;
describe('layui', function () {
it('version', function () {
expect(layui.v).to.be.a('string');
expect(layui.v).to.not.be.empty;
});
it('layui.config', function () {
expect(layui.config()).to.deep.equal(layui);
expect(layui.config({
testName: 'layui'
})).to.deep.equal(layui);
expect(layui.cache.testName).to.equal('layui');
});
describe('layui.router', function () {
var defaultData = {
path: [],
search: {},
hash: ''
};
it('default params', function () {
expect(layui.router).to.be.a('function');
expect(layui.router()).to.be.a('object').and.deep.equal(defaultData);
});
it('error router', function () {
[
null,
'',
'#123',
'123',
'##'
].forEach(function (key) {
expect(layui.router(key)).to.deep.equal(defaultData);
});
});
it('router querystring', function () {
expect(layui.router('#/a=1/b=2/c=')).to.deep.equal($.extend({}, defaultData, {
href: '/a=1/b=2/c=',
search: {
a: '1',
b: '2',
c: ''
}
}));
expect(layui.router('#/a=测试/b=2').search).to.deep.equal({
a: '测试',
b: '2'
});
// todo
// urlencode
// urldecode
});
it('router hash', function () {
expect(layui.router('#/name#layui')).to.deep.equal($.extend({}, defaultData, {
hash: '#layui',
path: ['name'],
href: '/name#layui'
}));
expect(layui.router('#/name#layui').hash).to.equal('#layui');
expect(layui.router('#/name#layui=1').hash).to.equal('#layui=1');
expect(layui.router('#/name##layui').hash).to.equal('##layui');
expect(layui.router('#/name=1#layui').hash).to.equal('#layui');
expect(layui.router('#/name=1/b=2#layui').hash).to.equal('#layui');
});
it('router path', function () {
expect(layui.router('#/a/b/c=2#hash')).to.deep.equal({
path: ['a', 'b'],
search: {
c: '2'
},
hash: '#hash',
href: '/a/b/c=2#hash'
});
});
});
describe('layui.each', function () {
it('check params', function () {
expect(layui.each).to.be.a('function');
expect(layui.each()).to.deep.equal(layui);
expect(layui.each({})).to.deep.equal(layui);
expect(layui.each([])).to.deep.equal(layui);
expect(layui.each({}, function () {})).to.deep.equal(layui);
expect(layui.each([], function () {})).to.deep.equal(layui);
});
it('null params', function (done) {
var index = 0;
layui.each(null, function (index) {
index += 1;
});
setTimeout(function () {
expect(index).to.equal(0);
done();
});
});
it('object each', function (done) {
layui.each({
name: 'layui'
}, function (key, value) {
expect(this + '').to.deep.equal(value).and.equal('layui');
expect(key).to.equal('name');
done();
});
});
it('array each', function (done) {
layui.each([
'layui'
], function (index, value) {
expect(this + '').to.deep.equal(value).and.equal('layui');
expect(index).to.equal(0);
done();
});
});
it('break array each', function () {
var arr = new Array(100).join(',').split(',');
var flag = -1;
layui.each(arr, function (index) {
flag = index;
if (index > 5) {
return true;
}
});
expect(flag).to.equal(6);
flag = -1;
layui.each(arr, function (index) {
flag = index;
if (index > 5) {
return false;
}
});
expect(flag).to.equal(99);
});
it('break object each', function () {
var obj = {
name: 'layui',
version: '2.x'
};
var flag = null;
layui.each(obj, function (key) {
flag = key;
return true;
});
expect(flag).to.equal('name');
flag = null;
layui.each(obj, function (key) {
flag = key;
return false;
});
expect(flag).to.equal('version');
});
});
describe('layui.img', function () {
var base64 = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
it('success callback', function (done) {
layui.img(base64, function (img) {
expect(img).to.not.undefined;
expect(typeof(img)).to.equal('object', '是img对象');
expect(img.nodeType).to.equal(1, 'img标签节点');
// 在ie11中不通过, 原因目前不明
// expect(img.width).to.equal(1);
// expect(img.height).to.equal(1);
done();
});
});
it('error callback', function (done) {
layui.img('/api/mock?statusCode=404', function () {}, function (e) {
expect(e).to.not.undefined;
done();
});
});
// 先删除, 因为没有哪个图片是决定不变的
// it('http 200', function (done) {
// layui.img('https://www.baidu.com/img/bd_logo1.png', function (img) {
// expect(img).to.not.undefined;
// done();
// });
// });
// 由于没有超时配置, 在部分设备中, dns解析可能超时
// it('http 404', function (done) {
// layui.img('http://www.404.xx/logo.404.gif', function () {}, function (e) {
// expect(e).to.not.undefined;
// done();
// });
// });
it('load complete', function (done) {
layui.img(base64, function () {
layui.img(base64, function (img) {
expect(img).to.not.undefined;
done();
});
});
});
});
it('layui.hint', function () {
expect(layui.hint).to.be.a('function');
expect(layui.hint()).to.be.a('object');
expect(layui.hint().error).to.be.a('function');
});
describe('layui.stope', function () {
it('stopPropagation', function (done) {
layui.stope({
stopPropagation: function (e) {
expect(e).to.be.undefined;
done();
}
});
});
it('cancelBubble', function () {
var event = {};
layui.stope(event);
expect(event.cancelBubble).to.be.true;
});
// ie中不支持, 只针对phantomjs测试
if (IS_PHANTOMJS) {
it('window.event', function () {
var old = window.event;
var event = window.event = {};
layui.stope();
expect(event.cancelBubble).to.be.true;
window.event = old;
});
}
});
describe('layui.onevent', function () {
it('check params and return value', function () {
expect(layui.onevent).to.be.a('function');
expect(layui.onevent()).to.deep.equal(layui);
expect(layui.onevent([], [], [])).to.deep.equal(layui);
expect(layui.onevent({}, {}, {})).to.deep.equal(layui);
expect(layui.onevent('test-' + Date.now(), 'click', function () {})).to.not.deep.equal(layui);
});
it('bind event', function (done) {
var id = 'test-bind-event';
var data = {
name: 'layui'
};
layui.onevent(id, 'click', function (param) {
expect(this).to.deep.equal(layui);
expect(param).to.deep.equal(data);
done();
});
layui.event(id, 'click', data);
});
it('coverage of the same name event', function () {
var id = 'test-same-event';
var index = 0;
layui.onevent(id, 'click', function () {
index = 1;
});
layui.onevent(id, 'click', function () {
index = 2;
});
layui.event(id, 'click');
expect(index).to.equal(2);
});
});
describe('layui.event', function () {
it('trigger event', function (done) {
layui.onevent('test-trigger', 'click(*)', function (data) {
expect(data).to.be.true;
done();
});
layui.event('test-trigger', 'click(*)', true);
});
it.skip('trigger multiple', function () {
var index = 0;
var id = 'test-trigger-multiple';
layui.onevent(id, 'nav', function () {
index += 1;
});
layui.event(id, 'nav');
layui.event(id, 'nav');
layui.event(id, 'nav');
expect(index).to.equal(3);
});
it('return value', function () {
expect(layui.event('id', 'event')).to.be.null;
// 只有在返回 false 时, 结果才是 false
layui.onevent('test-return-value-1', 'click', function (data) {
return data;
});
expect(layui.event('test-return-value-1', 'click', false)).to.be.false;
expect(layui.event('test-return-value-1', 'click', true)).to.be.null;
expect(layui.event('test-return-value-1', 'click')).to.be.null;
});
});
describe('layui.sort', function () {
var numberData = [
{
name: 1
},
{
name: 3
},
{
name: 2
}
];
it('check params and return value', function () {
expect(layui.sort()).to.deep.equal([], '空参数时默认为空数组');
expect(layui.sort({})).to.deep.equal({}, '只传空对象默认返回');
expect(layui.sort({
name: 'layui'
})).to.deep.equal({
name: 'layui'
}, '只传一个对象参数时返回');
expect(layui.sort([{
name: 'layui'
}], 'name')).to.deep.equal([{
name: 'layui'
}]);
expect(layui.sort([{
name: 'layui'
}], 'name', true)).to.deep.equal([{
name: 'layui'
}]);
});
// 测试是否污染原数据
it('clone object', function () {
var clone = layui.sort(numberData, 'name');
// 往clone对象添加
clone.push('layui');
expect(clone).to.have.lengthOf(4);
expect(numberData).to.have.lengthOf(3);
});
it('format value number', function () {
var result = layui.sort([
{
key: '1'
},
{
key: '-1'
},
{
key: 2
},
{
key: 3
}
], 'key');
expect(result).to.deep.equal([
{
key: '-1'
},
{
key: '1'
},
{
key: 2
},
{
key: 3
}
]);
});
it('asc order', function () {
var result = layui.sort(numberData, 'name');
expect(result).to.deep.equal([
{
name: 1
},
{
name: 2
},
{
name: 3
}
]);
});
it('desc order', function () {
var result = layui.sort(numberData, 'name', true);
expect(result).to.deep.equal([
{
name: 3
},
{
name: 2
},
{
name: 1
}
]);
});
it('error data', function () {
var data = [
// null,
{
name: 5
},
{},
[],
'test',
{
name: '3'
}
];
expect(layui.sort(data, 'name')).to.deep.equal([
{},
[],
'test',
{
name: '3'
},
{
name: 5
}
]);
});
});
it('layui.device', function () {
expect(layui.device).to.be.a('function');
expect(layui.device()).to.be.a('object');
expect(layui.device().ie).to.be.not.undefined;
expect(layui.device().ios).to.be.not.undefined;
expect(layui.device().android).to.be.not.undefined;
expect(layui.device().weixin).to.be.a('boolean');
expect(layui.device('weixin').weixin).to.be.false;
expect(layui.device('.*')['.*']).to.be.not.empty;
expect(layui.device('layui.com')['layui.com']).to.be.false;
});
describe('layui.getStyle', function () {
it('real test', function () {
var elem = $('<div />').css({
position: 'fixed',
zIndex: 10
}).appendTo('body').get(0);
expect(layui.getStyle(elem, 'position')).to.equal('fixed');
expect(layui.getStyle(elem, 'z-index')).to.equal('10');
});
it('mock currentStyle', function (done) {
var node = {
currentStyle: {
getPropertyValue: function (name) {
expect(name).to.equal('layui');
done();
}
}
};
layui.getStyle(node, 'layui');
});
});
it('layui.extend', function () {
expect(layui.extend).to.be.a('function');
expect(layui.extend()).to.deep.equal(layui);
expect(layui.extend({
v: 'v',
util: 'util'
})).to.deep.equal(layui);
var id = 'test-extend-' + Date.now();
var data = {};
data[id] = id;
expect(layui.modules[id]).to.be.undefined;
layui.extend(data);
expect(layui.modules[id]).to.be.not.undefined;
expect(layui.modules[id]).to.equal(id);
delete layui.modules[id];
});
describe('layui.data', function () {
if (IS_PHANTOMJS) {
it('not support JSON', function () {
var old = window.JSON;
window.JSON = null;
expect(layui.data()).to.be.undefined;
window.JSON = {};
expect(layui.data()).to.be.undefined;
window.JSON = old;
});
}
// 在支持情况下才测试
if (window.localStorage) {
it('delete table data', function() {
var id = 'test-delete-data';
localStorage[id] = true;
expect(localStorage[id]).to.equal('true');
expect(layui.data(id, null)).to.be.true;
expect(localStorage[id]).to.be.undefined;
});
it('get table data', function () {
var table = 'test-get-table-data';
expect(layui.data(table)).to.deep.equal({});
layui.data(table, {
key: 'name',
value: 'layui'
});
expect(layui.data(table)).to.deep.equal({
name: 'layui'
});
// 删除数据
layui.data(table, null);
});
it('get data', function () {
var id = 'test-get-data';
// 直接获取肯定为空
expect(layui.data(null, id)).to.be.undefined;
// 写入数据
expect(layui.data(null, {
key: id,
value: true
})).to.be.true;
expect(layui.data(null, id)).to.be.true;
// 清除数据
layui.data(null, {
key: id,
remove: true
});
});
it('remove data', function () {
var id = 'test-remove-data';
layui.data(null, {
key: id,
value: true
});
expect(layui.data(null, id)).to.be.true;
layui.data(null, {
key: id,
remove: true
});
expect(layui.data(null, id)).to.be.undefined;
});
}
});
});
/* eslint-enable max-nested-callbacks, fecs-indent */