Compare commits
144 Commits
bagdata
...
bagdata-sc
Author | SHA1 | Date | |
---|---|---|---|
8ea9d9e4da | |||
b6c6d19d96 | |||
f4fe3db2b8 | |||
c3ac588bdb | |||
526d1cbec1 | |||
5e10d720e6 | |||
4f40e560bb | |||
bc8d400b01 | |||
6a0e0fd6b1 | |||
096ee2fc96 | |||
2458e523ba | |||
cae4bc1af0 | |||
2ae835ecfe | |||
ee757f7f07 | |||
|
f1140fa78f | ||
|
ab940e5df3 | ||
|
9dc31fa032 | ||
|
5822042a80 | ||
|
8cf6798137 | ||
|
42738cebf2 | ||
|
16e02f99ea | ||
|
146adba3fe | ||
|
37443a5c45 | ||
|
084a37a8ee | ||
|
cb10f2a36f | ||
|
33f79e5ab8 | ||
|
08e4bf4191 | ||
|
eb8c9ce5c2 | ||
|
a608becd31 | ||
|
4ba95a164c | ||
|
96f5c38971 | ||
|
691cb5811f | ||
|
8e5a5dae02 | ||
|
3b8f6a0477 | ||
|
8e66f49320 | ||
|
37b4c404ea | ||
|
094cfc03b1 | ||
|
2a3f19eff8 | ||
|
b400a9befb | ||
|
c49197bb9f | ||
|
26df2dc43b | ||
|
7e98d87e98 | ||
|
f88626e73a | ||
|
29ba7f7cdd | ||
|
7076f801f7 | ||
|
8477948c00 | ||
|
9d689b3b89 | ||
|
8033abc420 | ||
|
e13e7a61ac | ||
|
a69102637b | ||
|
e0619625fe | ||
|
da7b024a52 | ||
|
42e7a85f0b | ||
|
a1214cb4e4 | ||
|
92b3ed8651 | ||
|
332c8447ad | ||
|
d5ed4a4c42 | ||
|
ad3f441e5b | ||
|
9bcfa554a6 | ||
|
b83f7d376a | ||
|
afccd752c9 | ||
|
6b2b6a8fa4 | ||
|
ac990cbd53 | ||
|
62ace24d30 | ||
|
22572ff39d | ||
|
d175d0d8eb | ||
|
ba5f7891d1 | ||
|
89bc721fe9 | ||
|
37508c6fb1 | ||
|
b66e1dfa7a | ||
|
afe4f0f73e | ||
|
3202e33ece | ||
|
af4ab7f93a | ||
|
ff70a461fb | ||
|
3751f0495c | ||
|
bcce0d2104 | ||
|
2fa3777be9 | ||
|
0b57b81707 | ||
|
b79f66c529 | ||
|
b56e83a0c4 | ||
|
0431f92e92 | ||
|
95359a3565 | ||
|
411da3947f | ||
|
abb387250c | ||
|
d744fea2a3 | ||
|
815df5a260 | ||
|
2d211cdf2f | ||
|
a03792c9fb | ||
|
a061579f29 | ||
|
3812997373 | ||
|
29617041d1 | ||
|
f034c5b0dc | ||
|
89238b79cd | ||
|
db743c81c8 | ||
|
e09f2c05a1 | ||
|
902aea37d9 | ||
|
fa9c940c62 | ||
|
2c9625db4f | ||
|
0fed81d962 | ||
|
ce805ee6b3 | ||
|
0e849e62f4 | ||
|
8abbe9722d | ||
|
0acae08728 | ||
|
abdb8c9224 | ||
|
dd98c61b0d | ||
|
36eec76819 | ||
|
5764af26d5 | ||
|
6f7e776d2d | ||
|
20a12794dd | ||
|
0dafb93a43 | ||
|
0e85e2cdc7 | ||
|
ccc5de7775 | ||
|
40a0c5b25e | ||
|
cd55717ee2 | ||
|
b16bc5a58a | ||
|
6a610cbe78 | ||
|
7376bbe00d | ||
|
7ddc0a39d6 | ||
|
b5f6f89cfe | ||
|
5667a18d40 | ||
|
665f21b028 | ||
|
823a622c77 | ||
|
fc09eef635 | ||
|
fdba3194fa | ||
|
d49b898c17 | ||
|
5221ee5377 | ||
|
e9b5cc5f30 | ||
|
c3f3ec8612 | ||
|
aeebdc4223 | ||
|
726cdd9ba5 | ||
|
0a433bf2e4 | ||
|
d4784ca84e | ||
|
9d4cf6ef19 | ||
|
05568a2c4c | ||
|
92653b85b4 | ||
|
9ec6022eb9 | ||
|
fbca6414ac | ||
|
58ac8bef13 | ||
|
757beaeb44 | ||
|
a03e45eaf3 | ||
|
5e25fffe8f | ||
|
41a47c6300 | ||
|
0f6ee885f1 | ||
|
4d400a369d |
11
.gitignore
vendored
11
.gitignore
vendored
@ -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
|
18
.travis.yml
18
.travis.yml
@ -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
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"svn.ignoreMissingSvnWarning": true
|
||||
}
|
23
CHANGELOG.md
23
CHANGELOG.md
@ -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
14
DISCLAIMER.md
Normal 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. 本团队有权随时对本声明条款及附件内容进行单方面的变更,并以消息推送、网页公告等方式予以公布,公布后立即自动生效,无需另行单独通知;若您在本声明内容公告变更后继续使用的,表示您已充分阅读、理解并接受修改后的声明内容。
|
2
LICENSE
2
LICENSE
@ -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
|
||||
|
133
README.md
133
README.md
@ -1,82 +1,57 @@
|
||||
<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>
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>开始使用 Layui</title>
|
||||
<link href="./layui/css/layui.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- HTML -->
|
||||
|
||||
<!-- 你的HTML代码 -->
|
||||
|
||||
<script src="../layui/layui.js"></script>
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script>
|
||||
//一般直接写在一个js文件中
|
||||
// 使用组件
|
||||
layui.use(['layer', 'form'], function(){
|
||||
var layer = layui.layer
|
||||
,form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
|
||||
// 欢迎语
|
||||
layer.msg('Hello World');
|
||||
});
|
||||
</script>
|
||||
@ -84,14 +59,48 @@ layui.use(['layer', 'form'], function(){
|
||||
</html>
|
||||
```
|
||||
|
||||
## [阅读文档](http://www.layui.com/)
|
||||
从现在开始,尽情地拥抱 layui 吧!但愿她能成为你长远的开发伴侣,化作你方寸屏幕前的亿万字节!
|
||||
## 使用文档
|
||||
[**最新文档**](https://layui.github.io)
|
||||
|
||||
## 贡献者
|
||||
> 大概是因为 layui 让开发者变得更懒,所以贡献者才这么少?
|
||||
> 好的,姑且就这样认为吧。
|
||||
## 项目参与
|
||||
[项目参与者](https://github.com/layui/layui/graphs/contributors)
|
||||
|
||||
[![Giteye chart](https://chart.giteye.net/gitee/sentsin/layui/PMFQFJCX.png)](https://giteye.net/chart/PMFQFJCX)
|
||||
## 破旧立新 🌱
|
||||
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>
|
||||
|
||||
## 相关
|
||||
[官网](http://www.layui.com/)、[更新日志](http://www.layui.com/doc/base/changelog.html)
|
||||
---
|
||||
|
||||
鉴于 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) {
|
||||
}
|
||||
})
|
||||
```
|
||||
|
22
bower.json
22
bower.json
@ -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
2
dist/css/layui.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/modules/code.css
vendored
2
dist/css/modules/code.css
vendored
@ -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}
|
2
dist/css/modules/laydate/default/laydate.css
vendored
2
dist/css/modules/laydate/default/laydate.css
vendored
File diff suppressed because one or more lines are too long
BIN
dist/css/modules/layer/default/icon.png
vendored
BIN
dist/css/modules/layer/default/icon.png
vendored
Binary file not shown.
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 12 KiB |
2
dist/css/modules/layer/default/layer.css
vendored
2
dist/css/modules/layer/default/layer.css
vendored
File diff suppressed because one or more lines are too long
8673
dist/layui.js
vendored
8673
dist/layui.js
vendored
File diff suppressed because it is too large
Load Diff
@ -1,6 +0,0 @@
|
||||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,11
|
||||
[InternetShortcut]
|
||||
URL=https://gitee.com/sentsin/layui/
|
||||
IDList=
|
||||
HotKey=0
|
@ -1,6 +0,0 @@
|
||||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,11
|
||||
[InternetShortcut]
|
||||
URL=https://github.com/sentsin/layui/
|
||||
IDList=
|
||||
HotKey=0
|
@ -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)
|
@ -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
|
@ -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
|
@ -28,8 +28,14 @@ resize: none;">
|
||||
|
||||
|
||||
<div id="demo1"></div>
|
||||
|
||||
<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
128
examples/base.html
Normal 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>
|
@ -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>
|
||||
|
@ -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
|
||||
});
|
||||
});
|
||||
|
@ -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'
|
||||
});
|
||||
|
||||
|
@ -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
208
examples/element.nav.html
Normal 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
120
examples/element.tab.html
Normal 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>
|
@ -5,8 +5,6 @@
|
||||
layui.define(function(exports){
|
||||
console.log('mod2.js')
|
||||
|
||||
layer.alert(1)
|
||||
|
||||
exports('mod2', {
|
||||
name: 'mod2'
|
||||
})
|
||||
|
@ -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);
|
||||
|
@ -11,13 +11,31 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 10px;}
|
||||
body{padding: 16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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-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-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>
|
||||
@ -28,7 +46,16 @@ body{padding: 10px;}
|
||||
<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">
|
||||
<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">
|
||||
@ -64,11 +91,13 @@ body{padding: 10px;}
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">行内表单</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="quiz" lay-verify="required" lay-verType="tips">
|
||||
<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>
|
||||
<option value="2">
|
||||
你最喜欢的老师
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -104,8 +133,9 @@ body{padding: 10px;}
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">搜索选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<div class="layui-input-block">
|
||||
<select name="interest-search" lay-filter="interest-search" lay-search>
|
||||
<option value="">请搜索</option>
|
||||
<option value="写作">写作</option>
|
||||
@ -125,6 +155,51 @@ body{padding: 10px;}
|
||||
</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 class="layui-form-item" pane>
|
||||
<label class="layui-form-label">复选框</label>
|
||||
@ -194,11 +269,12 @@ body{padding: 10px;}
|
||||
|
||||
<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({
|
||||
@ -214,6 +290,30 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
]
|
||||
});
|
||||
|
||||
/*
|
||||
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);
|
||||
|
||||
// 验证均通过后执行提交
|
||||
setTimeout(function(){
|
||||
alert(JSON.stringify(data.field));
|
||||
})
|
||||
|
||||
});
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
//日期
|
||||
laydate.render({
|
||||
elem: '#date'
|
||||
@ -221,9 +321,10 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
|
||||
//初始赋值
|
||||
var thisValue = form.val('first', {
|
||||
'title': '测试'
|
||||
,'phone': 11111111111
|
||||
'title': '测试测试测试'
|
||||
//,'phone': 11111111111
|
||||
,'email': 'xu@sentsin.com'
|
||||
,'date': '2021-05-30'
|
||||
,'password': 123123
|
||||
//,'quiz': 2
|
||||
,'interest': 3
|
||||
@ -233,11 +334,10 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
,'desc': 'form 是我们非常看重的一块'
|
||||
,xxxxxxxxx: 123
|
||||
});
|
||||
console.log(thisValue);
|
||||
|
||||
|
||||
//事件监听
|
||||
form.on('select', function(data){
|
||||
//事件
|
||||
form.on('select(quiz111)', function(data){
|
||||
console.log('select: ', this, data);
|
||||
});
|
||||
|
||||
@ -249,8 +349,6 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
console.log('select.interest: ', this, data);
|
||||
});
|
||||
|
||||
|
||||
|
||||
form.on('checkbox', function(data){
|
||||
console.log(this.checked, data.elem.checked);
|
||||
});
|
||||
@ -263,17 +361,34 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
//监听提交
|
||||
// 提交事件
|
||||
form.on('submit(*)', function(data){
|
||||
console.log(data)
|
||||
alert(JSON.stringify(data.field));
|
||||
return false;
|
||||
});
|
||||
|
||||
// 普通事件
|
||||
util.on('lay-on', {
|
||||
"get-vercode": function(othis){
|
||||
var isvalid = form.validate('.demo-phone');
|
||||
|
||||
// 验证通过
|
||||
if(isvalid){
|
||||
layer.msg('手机号验证通过,执行发送验证码的操作');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<h3>原始表单调试:</h3>
|
||||
<hr>
|
||||
|
||||
<form id="test1" action="" target="_blank">
|
||||
<input type="radio" value="girl" disabled>
|
||||
<input type="checkbox" name="love[a]">
|
||||
@ -292,20 +407,5 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
<button type="submit">原始表单,测试提交</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use('jquery', function(){
|
||||
var $ = layui.jquery;
|
||||
var submit = function(){
|
||||
return false;
|
||||
};
|
||||
$('#test').on('submit', function(){
|
||||
return false
|
||||
});
|
||||
$('#test1').on('submit', function(obj){
|
||||
//console.log(obj.field)
|
||||
//return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -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"
|
||||
}]
|
||||
}
|
@ -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": "人生恰似一场修行"
|
||||
|
@ -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);
|
||||
}
|
||||
@ -175,7 +215,8 @@ layui.use('laydate', function(laydate){
|
||||
,type: 'month'
|
||||
,range: true
|
||||
,trigger: 'click'
|
||||
//,max: -30
|
||||
,min:'2022-03-01'
|
||||
,max:'2022-05-31'
|
||||
,done: function(value, date, endDate){
|
||||
console.log(value, date, endDate);
|
||||
}
|
||||
|
@ -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">
|
||||
|
||||
|
@ -11,6 +11,9 @@
|
||||
|
||||
<style>
|
||||
body{padding: 100px;}
|
||||
|
||||
#photos li{float: left; margin: 0 1px 1px;}
|
||||
#photos img{max-height: 38px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -28,23 +31,90 @@ body{padding: 100px;}
|
||||
</div>
|
||||
|
||||
<div id="test11111" style="display: none; padding: 20px;">
|
||||
123
|
||||
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) : '';
|
||||
|
@ -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
226
examples/laytpl.html
Normal 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>
|
@ -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
107
examples/table-static.html
Normal 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
437
examples/table-test.html
Normal 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>
|
@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -10,23 +8,26 @@
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
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>
|
||||
<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>
|
||||
</script>
|
||||
|
||||
<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}
|
||||
@ -391,57 +220,6 @@ 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;
|
||||
|
||||
// 直接赋值数据
|
||||
@ -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
|
||||
});
|
||||
|
||||
|
@ -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
50
examples/text.md.html
Normal 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>
|
@ -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>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn test333" lay-data="{size:10,url:'a'}" id="test3"><i class="layui-icon"></i>上传文件</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary test333" lay-data="{size:20,url:'b'}" id="test33"><i class="layui-icon"></i>换个样式</button>
|
||||
|
||||
<button type="button" class="layui-btn" id="test4"><i class="layui-icon"></i>上传视频</button>
|
||||
<button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传音频</button>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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"></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){
|
||||
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>
|
||||
|
287
gulpfile.js
287
gulpfile.js
@ -1,176 +1,167 @@
|
||||
|
||||
/**
|
||||
layui Build
|
||||
* Building Layui
|
||||
*/
|
||||
|
||||
var pkg = require('./package.json');
|
||||
var inds = pkg.independents;
|
||||
|
||||
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'
|
||||
}
|
||||
})
|
||||
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');
|
||||
|
||||
// 基础配置
|
||||
const config = {
|
||||
//注释
|
||||
,note = [
|
||||
'/** <%= pkg.realname %> v<%= pkg.version %> | Released under the <%= pkg.license %> license */\n <%= js %>'
|
||||
comment: [
|
||||
'/** <%= pkg.version %> | <%= pkg.license %> Licensed */<%= 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));
|
||||
}
|
||||
,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'])
|
||||
// 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, notes))
|
||||
.pipe(gulp.dest(dir + '/src'));
|
||||
.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('./');
|
||||
};
|
||||
|
||||
|
||||
|
@ -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.js、zepto.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;
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
};
|
@ -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);
|
||||
};
|
@ -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);
|
||||
};
|
66
package.json
66
package.json
@ -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"
|
||||
]
|
||||
}
|
||||
|
@ -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,32 +1138,23 @@ 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 选项卡 **/
|
||||
@ -1163,7 +1163,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.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;}
|
||||
@ -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,
|
||||
|
@ -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;}
|
||||
|
@ -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 |
@ -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{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: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-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;}
|
||||
|
337
src/layui.js
337
src/layui.js
@ -1,15 +1,13 @@
|
||||
/*!
|
||||
|
||||
@Name: layui
|
||||
@Description:Classic modular front-end UI framework
|
||||
@License:MIT
|
||||
|
||||
/**
|
||||
* 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,9 +15,12 @@
|
||||
}
|
||||
|
||||
,Layui = function(){
|
||||
this.v = '2.6.3'; //版本号
|
||||
this.v = '2.7.1'; // layui 版本号
|
||||
}
|
||||
|
||||
//识别预先可能定义的指定全局对象
|
||||
,GLOBAL = win.LAYUI_GLOBAL || {}
|
||||
|
||||
//获取 layui 所在目录
|
||||
,getPath = function(){
|
||||
var jsPath = doc.currentScript ? doc.currentScript.src : function(){
|
||||
@ -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;
|
||||
@ -159,10 +159,10 @@
|
||||
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';
|
||||
@ -261,6 +278,31 @@
|
||||
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,50 +552,134 @@
|
||||
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;
|
||||
|
||||
//如果是数字,按大小排序,如果是非数字,按字典序排序
|
||||
clone.sort(function(o1, o2){
|
||||
var isNum = /^-?\d+$/
|
||||
,v1 = o1[key]
|
||||
,v2 = o2[key];
|
||||
|
||||
if(isNum.test(v1)) v1 = parseFloat(v1);
|
||||
if(isNum.test(v2)) v2 = parseFloat(v2);
|
||||
|
||||
if(v1 && !v2){
|
||||
return 1;
|
||||
} else if(!v1 && v2){
|
||||
return -1;
|
||||
// 若未传入 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) {
|
||||
@ -560,6 +687,102 @@
|
||||
} 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;
|
||||
};
|
||||
// 不复制 将数组中的成员对象按照某个 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(); // 倒序
|
||||
@ -574,6 +797,9 @@
|
||||
}
|
||||
};
|
||||
|
||||
//字符常理
|
||||
var EV_REMOVE = 'LAYUI-EVENT-REMOVE';
|
||||
|
||||
//自定义模块事件
|
||||
Layui.prototype.onevent = function(modName, events, callback){
|
||||
if(typeof modName !== 'string'
|
||||
@ -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
|
||||
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name:用于加载所有内置模块
|
||||
@License:MIT
|
||||
|
||||
/*!
|
||||
* 用于加载所有内置模块
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define(function(){
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name:carousel 轮播模块
|
||||
@License:MIT
|
||||
|
||||
* 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();
|
||||
});
|
||||
|
||||
|
@ -1,17 +1,20 @@
|
||||
/**
|
||||
|
||||
@Name:code 代码修饰器
|
||||
@License:MIT
|
||||
|
||||
* 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 标签
|
||||
if(othis.attr('lay-encode') || options.encode){
|
||||
html = html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
|
||||
.replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"')
|
||||
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');
|
||||
|
||||
|
@ -1,14 +1,15 @@
|
||||
/**
|
||||
|
||||
@Title: colorpicker 颜色选择器组件
|
||||
@License:MIT
|
||||
|
||||
* 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);
|
||||
@ -462,6 +430,7 @@ layui.define('jquery', function(exports){
|
||||
};
|
||||
|
||||
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]
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name:MODULE_DEMO_NAME 模块组件通用结构
|
||||
@License:MIT
|
||||
|
||||
* 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);
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name:dropdown 下拉菜单组件
|
||||
@License:MIT
|
||||
|
||||
* 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
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name:element 常用元素操作
|
||||
@License:MIT
|
||||
|
||||
* element 常用元素操作
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
@ -37,8 +35,15 @@ 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>');
|
||||
@ -83,14 +88,14 @@ 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 = {
|
||||
@ -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 +'">ဆ</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 othis = $(this), child = othis.find('.'+NAV_CHILD);
|
||||
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)){
|
||||
//无子菜单时跟随
|
||||
if(!child[0]){
|
||||
var thisA = othis.children('.'+ NAV_TITLE);
|
||||
bar.css({
|
||||
top: othis.position().top
|
||||
,height: othis.children('a').outerHeight()
|
||||
top: othis.offset().top - nav.offset().top
|
||||
,height: (thisA[0] ? thisA : othis).outerHeight()
|
||||
,opacity: 1
|
||||
});
|
||||
}
|
||||
} else {
|
||||
child.addClass(NAV_ANIM);
|
||||
|
||||
//若居中对齐
|
||||
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);
|
||||
|
||||
$(function(){
|
||||
element.render();
|
||||
});
|
||||
|
||||
var TITLE = '.layui-tab-title li';
|
||||
dom.on('click', TITLE, call.tabClick); //Tab切换
|
||||
|
@ -1,8 +1,5 @@
|
||||
/**
|
||||
|
||||
@Name flow 流加载组件
|
||||
@License:MIT
|
||||
|
||||
* 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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name:form 表单组件
|
||||
@License:MIT
|
||||
|
||||
* 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 表示不干预
|
||||
};
|
||||
};
|
||||
|
||||
@ -64,6 +63,13 @@ layui.define('layer', function(exports){
|
||||
return that;
|
||||
};
|
||||
|
||||
//获取指定表单对象
|
||||
Form.prototype.getFormElem = function(filter){
|
||||
return $(ELEM + function(){
|
||||
return filter ? ('[lay-filter="' + filter +'"]') : '';
|
||||
}());
|
||||
};
|
||||
|
||||
//表单事件
|
||||
Form.prototype.on = function(events, callback){
|
||||
return layui.onevent.call(this, MOD_NAME, 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*&/, '');
|
||||
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,16 +146,24 @@ 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){
|
||||
@ -165,11 +181,15 @@ 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(){
|
||||
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()
|
||||
@ -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;
|
||||
|
||||
//初始选中样式
|
||||
@ -332,12 +353,28 @@ layui.define('layer', function(exports){
|
||||
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,12 +513,12 @@ 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,9 +585,9 @@ layui.define('layer', function(exports){
|
||||
}
|
||||
|
||||
//单选框
|
||||
,radio: function(){
|
||||
,radio: function(elem){
|
||||
var CLASS = 'layui-form-radio', ICON = ['', '']
|
||||
,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,33 +644,58 @@ layui.define('layer', function(exports){
|
||||
});
|
||||
}
|
||||
};
|
||||
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 + '表单渲染')
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -667,12 +737,26 @@ layui.define('layer', function(exports){
|
||||
layer.msg(errorText, {icon: 5, shift: 6});
|
||||
}
|
||||
|
||||
//非移动设备自动定位焦点
|
||||
if(!device.android && !device.ios){
|
||||
setTimeout(function(){
|
||||
item.focus();
|
||||
(isForm2Elem ? othis.next().find('input') : item).focus();
|
||||
}, 7);
|
||||
|
||||
/*
|
||||
// 非移动设备自动定位焦点
|
||||
if(!device.mobile){
|
||||
setTimeout(function(){
|
||||
(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;
|
||||
@ -682,24 +766,54 @@ 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);
|
||||
|
||||
//返回字段
|
||||
return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', {
|
||||
elem: this
|
||||
,form: formElem
|
||||
,field: field
|
||||
});
|
||||
//返回的参数
|
||||
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('+ layFilter +')', params);
|
||||
};
|
||||
|
||||
//自动完成渲染
|
||||
var form = new Form()
|
||||
,$dom = $(document), $win = $(window);
|
||||
|
||||
$(function(){
|
||||
form.render();
|
||||
});
|
||||
|
||||
//表单reset重置渲染
|
||||
$dom.on('reset', ELEM, function(){
|
||||
|
@ -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,17 +48,18 @@
|
||||
}
|
||||
|
||||
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(){
|
||||
@ -65,58 +69,38 @@
|
||||
) : 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;
|
||||
};
|
||||
|
||||
//创建元素
|
||||
@ -128,38 +112,6 @@
|
||||
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);
|
||||
@ -199,10 +151,19 @@
|
||||
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
@ -1,8 +1,5 @@
|
||||
/**
|
||||
|
||||
@Name:layedit 富文本编辑器
|
||||
@License:MIT
|
||||
|
||||
* 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({
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name:layer - Web 弹出层组件
|
||||
@License:MIT
|
||||
|
||||
* 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;
|
||||
@ -59,18 +62,37 @@ var isLayui = window.layui && layui.define, $, win, ready = {
|
||||
if(typeof fn !== 'function') return;
|
||||
|
||||
//轮询 css 是否加载完毕
|
||||
(function poll() {
|
||||
if(++timeout > 8 * 1000 / 100){
|
||||
return window.console && console.error('layer.css: Invalid');
|
||||
(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.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,13 +354,16 @@ 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
|
||||
});
|
||||
@ -342,7 +371,19 @@ Class.pt.creat = function(){
|
||||
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,14 +723,14 @@ 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);
|
||||
var min = config.min && config.min(layero, that.index);
|
||||
min === false || layer.min(that.index, config);
|
||||
});
|
||||
|
||||
@ -687,11 +738,11 @@ Class.pt.callback = function(){
|
||||
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,8 +977,7 @@ layer.title = function(name, index){
|
||||
};
|
||||
|
||||
//关闭layer总方法
|
||||
layer.close = function(index){
|
||||
layer.ready(function(){
|
||||
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(){
|
||||
@ -937,13 +1003,14 @@ layer.close = function(index){
|
||||
}
|
||||
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, #layui-layer-shade' + index).remove();
|
||||
$('#layui-layer-moves, #'+ doms.SHADE + index).remove();
|
||||
layer.ie == 6 && ready.reselect();
|
||||
ready.rescollbar(index);
|
||||
if(layero.attr('minLeft')){
|
||||
@ -958,19 +1025,22 @@ layer.close = function(index){
|
||||
remove();
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//关闭所有层
|
||||
layer.closeAll = function(type){
|
||||
layer.ready(function(){
|
||||
$.each($('.'+doms[0]), function(){
|
||||
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'));
|
||||
is && layer.close(othis.attr('times'), _index === domsElem.length - 1 ? callback : null);
|
||||
is = null;
|
||||
});
|
||||
});
|
||||
if(domsElem.length === 0) typeof callback === 'function' && callback();
|
||||
};
|
||||
|
||||
/**
|
||||
@ -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>' : '')
|
||||
+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);
|
||||
@ -1309,9 +1395,12 @@ window.layui && layui.define ? (
|
||||
ready.run(window.jQuery);
|
||||
return layer;
|
||||
}) : function(){ //普通 script 标签加载
|
||||
ready.run(window.jQuery);
|
||||
layer.ready();
|
||||
ready.run(window.jQuery);
|
||||
}()
|
||||
);
|
||||
|
||||
}(window);
|
||||
|
||||
|
||||
|
||||
|
@ -1,8 +1,5 @@
|
||||
/**
|
||||
|
||||
@Name : laypage 分页组件
|
||||
@License:MIT
|
||||
|
||||
* laypage 分页组件
|
||||
*/
|
||||
|
||||
layui.define(function(exports){
|
||||
@ -33,23 +30,29 @@ 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;
|
||||
@ -57,6 +60,8 @@ layui.define(function(exports){
|
||||
// 当前页不能超过总页数
|
||||
if(config.curr > config.pages){
|
||||
config.curr = config.pages;
|
||||
} else if(config.curr < 1) { // 当前分页不能小于 1
|
||||
config.curr = 1;
|
||||
}
|
||||
|
||||
//连续分页个数不能低于 0 且不能大于总页数
|
||||
@ -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();
|
||||
|
@ -1,12 +1,8 @@
|
||||
/**
|
||||
|
||||
@Name : laytpl 模板引擎
|
||||
@License:MIT
|
||||
|
||||
* 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, '&')
|
||||
.replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"');
|
||||
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, '&')
|
||||
.replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/'/g, ''').replace(/"/g, '"');
|
||||
},
|
||||
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);
|
||||
};
|
||||
|
@ -1,7 +1,5 @@
|
||||
/**
|
||||
|
||||
@Name:用于打包聚合版,该文件不会存在于构建后的目录
|
||||
|
||||
* 用于打包聚合版,该文件不会存在于构建后的目录
|
||||
*/
|
||||
|
||||
layui.define(function(exports){
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name:layui 移动模块入口 | 构建后则为移动模块集合
|
||||
@License:MIT
|
||||
|
||||
* layui 移动模块入口
|
||||
* 构建后则为移动模块集合
|
||||
*/
|
||||
|
||||
|
||||
|
@ -1,8 +1,5 @@
|
||||
/**
|
||||
|
||||
@Title: rate 评分评星组件
|
||||
@License:MIT
|
||||
|
||||
* rate 评分评星组件
|
||||
*/
|
||||
|
||||
layui.define('jquery',function(exports){
|
||||
|
@ -1,13 +1,10 @@
|
||||
/**
|
||||
|
||||
@Title: slider 滑块组件
|
||||
@License:MIT
|
||||
|
||||
* 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);
|
||||
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function(){
|
||||
if(options.type === 'vertical'){
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"20px", "display":"inline-block"});
|
||||
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"});
|
||||
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
@ -1,8 +1,5 @@
|
||||
/**
|
||||
|
||||
@Name:transfer 穿梭框组件
|
||||
@License:MIT
|
||||
|
||||
* 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;
|
||||
}()
|
||||
});
|
||||
|
||||
@ -322,6 +324,61 @@ 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
|
||||
@ -343,47 +400,30 @@ layui.define(['laytpl', 'form'], function(exports){
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
//搜索
|
||||
|
@ -1,8 +1,5 @@
|
||||
/**
|
||||
|
||||
@Name:tree 树组件
|
||||
@License:MIT
|
||||
|
||||
* 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>'
|
||||
|
@ -1,8 +1,6 @@
|
||||
/**
|
||||
|
||||
@Title: upload 文件上传组件
|
||||
@License:MIT
|
||||
|
||||
* 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;
|
||||
@ -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(options.force === 'json'){
|
||||
if(typeof res !== 'object'){
|
||||
try {
|
||||
res = JSON.parse(res);
|
||||
} catch(e){
|
||||
res = {};
|
||||
return that.msg('请对上传接口返回有效JSON');
|
||||
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){
|
||||
@ -354,6 +350,14 @@ layui.define('layer' , function(exports){
|
||||
ajaxSend();
|
||||
}
|
||||
|
||||
//文件类型名称
|
||||
,typeName = ({
|
||||
file: '文件'
|
||||
,images: '图片'
|
||||
,video: '视频'
|
||||
,audio: '音频'
|
||||
})[options.accept] || '文件';
|
||||
|
||||
//校验文件格式
|
||||
value = value.length === 0
|
||||
? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '')
|
||||
@ -361,36 +365,50 @@ layui.define('layer' , function(exports){
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
//校验失败提示
|
||||
if(check){
|
||||
that.msg('选择的图片中包含不支持的格式');
|
||||
that.msg('选择的'+ typeName +'中包含不支持的格式');
|
||||
return elemFile.value = '';
|
||||
}
|
||||
break;
|
||||
|
||||
//选择文件的回调
|
||||
if(type === 'choose' || options.auto){
|
||||
options.choose && options.choose(args);
|
||||
if(type === 'choose'){
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//检验文件数量
|
||||
@ -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)||[]) || '');
|
||||
@ -503,11 +527,7 @@ 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); //是否自动触发上传
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -1,14 +1,12 @@
|
||||
/**
|
||||
|
||||
@Name:util 工具集组件
|
||||
@License:MIT
|
||||
|
||||
* 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)
|
||||
@ -154,8 +158,9 @@ layui.define('jquery', function(exports){
|
||||
,that.digit(date.getSeconds())
|
||||
];
|
||||
|
||||
format = format || 'yyyy-MM-dd HH:mm:ss';
|
||||
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, '&')
|
||||
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, '&')
|
||||
.replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/'/g, ''').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
,unescape: function(str){
|
||||
return String(str || '').replace(/\&/g, '&')
|
||||
//还原转义的 html
|
||||
,unescape: function(html){
|
||||
if(html === undefined || html === null) html = '';
|
||||
html += '';
|
||||
|
||||
return html.replace(/\&/g, '&')
|
||||
.replace(/\</g, '<').replace(/\>/g, '>')
|
||||
.replace(/\'/, '\'').replace(/\"/, '"');
|
||||
.replace(/\'/g, '\'').replace(/\"/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);
|
||||
}
|
||||
}
|
||||
|
||||
//批量事件
|
||||
@ -203,11 +246,13 @@ layui.define('jquery', function(exports){
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
@ -1,2 +0,0 @@
|
||||
# 说明
|
||||
自动化测试用例,由 @xuexb 贡献
|
@ -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
@ -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('<em>laytpl</em><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 */
|
601
test/layui.js
601
test/layui.js
@ -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 */
|
Loading…
Reference in New Issue
Block a user