theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
贤心 2022-06-23 00:03:41 +08:00
parent 8e66f49320
commit 3b8f6a0477
15 changed files with 545 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -25,12 +25,12 @@
--- ---
Layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。Layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。 Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约，而内在丰盈，利于实现网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，他们无需涉足各类构建工具，只需面向浏览器本身，即可轻松掌握页面所需的元素与交互，进而信手拈来。
## 快速上手 ## ✍ 快速上手
获得 Layui 后，将其完整地部署到你的静态资源项目目录，你只需要引入下述两个文件： 使用 Layui 只需在页面中引入核心文件即可：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -42,8 +42,7 @@ Layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范
<link href="./layui/css/layui.css" rel="stylesheet"> <link href="./layui/css/layui.css" rel="stylesheet">
</head> </head>
<body> <body>
<!-- HTML -->
<!-- 你的 HTML 代码 -->
<script src="./layui/layui.js"></script> <script src="./layui/layui.js"></script>
<script> <script>
@ -60,16 +59,17 @@ Layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范
</html> </html>
``` ```
## 阅读文档 ## 📄 使用文档
[**最新文档**](https://layui.github.io/) [**最新文档**](https://layui.github.io)
愿 layui 能成为你得心应手的 Web 界面解决方案，化作你方寸屏幕前的亿万字节！
## 贡献者 ## 🍀 项目参与
[贡献者列表](https://github.com/layui/layui/graphs/contributors) [项目参与者](https://github.com/layui/layui/graphs/contributors)
## 破旧立新 ## 🌱 破旧立新
layui 原官网已于2021年10月13日下线。详见： 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> > 1. <a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png" target="_blank">layui 原官网下线公告</a> 2. <a href="https://www.zhihu.com/question/488668647/answer/2159962082" target="_blank">layui 原官网为什么要下线？</a>
鉴于 Layui 相对庞大的受众群体，从此 Github 和 Gitee 平台将支撑起 Layui 的后续，**它将继续陪伴着仍然需要它的人**。 ---
鉴于 Layui 相对庞大的受众群体，从此 Github 和 Gitee 平台将支撑起 Layui 的后续。<br>
**Layui 将继续陪伴着所有为之热爱的人们，共同去探索和论证「Layui 开发模式的可行性」**

27
examples/carousel.html
View File

@ -54,13 +54,11 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
<div class="layui-carousel" id="test4"> <div class="layui-carousel" id="test4">
<div carousel-item> <div carousel-item>
<div><img src="http://s2.mogucdn.com/mlcdn/c45406/170714_2f9k4a3lgdfb80cie2g7aaba8l4ag_778x440.jpg_900x9999.v1c7E.70.webp"></div> <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170710_3a6jf5f0j24bgcc3i3f36el2a2ckj_778x440.jpg_900x9999.v1c7E.70.webp"></div> <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170714_5e8867724c4bfae8ka6l3a5274h0h_778x440.jpg_900x9999.v1c7E.70.webp"></div> <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
<div><img src="http://s3.mogucdn.com/mlcdn/c45406/170609_83i077ikhb3023kch5gah5b2il9k3_778x440.jpg_900x9999.v1c7E.70.webp"></div> <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170714_8d301bj507l9la1cjccbabg433beh_778x440.jpg_900x9999.v1c7E.70.webp"></div> <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></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> </div>
</div> </div>
@ -76,6 +74,10 @@ layui.use('carousel', function(){
,index: 2 ,index: 2
//,full: true //,full: true
,arrow: 'always' ,arrow: 'always'
,autoplay: 'always'
,change: function(obj){
console.log(obj)
}
//,interval: 5000 //,interval: 5000
//,autoplay: false //,autoplay: false
//,indicator: 'outside' //,indicator: 'outside'
@ -83,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({ carousel.render({
elem: '#test2' elem: '#test2'
@ -106,10 +110,11 @@ layui.use('carousel', function(){
//,full: true //,full: true
}); });
// 图片轮播
carousel.render({ carousel.render({
elem: '#test4' elem: '#test4'
,width: '778px' ,width: '720px'
,height: '440px' ,height: '360px'
,interval: 5000 ,interval: 5000
}); });
}); });

695
examples/form.html
View File

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

21
examples/table-test.html
View File

@ -38,7 +38,7 @@
<script type="text/html" id="barDemo"> <script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
{{# if(d.email.trim()){ }} {{# if(layui.$.trim(d.email)){ }}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# } }} {{# } }}
<input type="checkbox" name="demoTableSwitch" lay-skin="switch" {{ d.demoTableSwitch }}> <input type="checkbox" name="demoTableSwitch" lay-skin="switch" {{ d.demoTableSwitch }}>
@ -105,6 +105,7 @@ layui.use(['table', 'dropdown'], function(){
//,autoSort: false //是否自动排序。如果否，则由服务端排序 //,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false //,loading: false
,totalRow: true ,totalRow: true
,page: true
,limit: 30 ,limit: 30
,toolbar: '#toolbarDemo' ,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', { ,defaultToolbar: ['filter', 'exports', 'print', {
@ -164,16 +165,16 @@ layui.use(['table', 'dropdown'], function(){
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例 elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
,data: [{ ,data: [{
id: 'reload', id: 'reload',
title: '重载 - 默认（参数重置）' title: '重载'
},{ },{
id: 'reload-deep', id: 'reload-deep',
title: '重载 - 深度（参数叠加）' title: '重载 - 参数叠加'
},{ },{
id: 'reloadData', id: 'reloadData',
title: '数据重载 - 默认（参数重置）' title: '仅重载数据'
},{ },{
id: 'reloadData-deep', id: 'reloadData-deep',
title: '数据重载 - 深度（参数叠加）' title: '仅重载数据 - 参数叠加'
}] }]
// 菜单被点击的事件 // 菜单被点击的事件
,click: function(obj){ ,click: function(obj){
@ -186,7 +187,7 @@ layui.use(['table', 'dropdown'], function(){
//,test: '新的 test2' //,test: '新的 test2'
//,token: '新的 token2' //,token: '新的 token2'
} }
,defaultToolbar: ['print'] ,height: 'full-130' // 重载高度
/* /*
,cols: [[ // 重置表头 ,cols: [[ // 重置表头
{type: 'checkbox', fixed: 'left'} {type: 'checkbox', fixed: 'left'}
@ -197,7 +198,7 @@ layui.use(['table', 'dropdown'], function(){
,{field:'joinTime', title:'加入时间', width:120} ,{field:'joinTime', title:'加入时间', width:120}
]] ]]
*/ */
//,height: 500
}); });
break; break;
case 'reload-deep': case 'reload-deep':
@ -207,9 +208,9 @@ layui.use(['table', 'dropdown'], function(){
abc: 123 abc: 123
,test: '新的 test1' ,test: '新的 test1'
} }
,defaultToolbar: ['print'] //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
,page: {curr: 5, limit: 20} ,page: {curr: 5, limit: 20}
,cols: ins1.config.cols //,cols: ins1.config.cols
}, true); }, true);
break; break;
case 'reloadData': case 'reloadData':
@ -354,7 +355,7 @@ layui.use(['table', 'dropdown'], function(){
}); });
//触发行工具事件 //触发行工具事件
table.on('tool(test)', function(obj){ table.on('tool(test)', function(obj){ // 双击 toolDouble
var data = obj.data; var data = obj.data;
//console.log(obj) //console.log(obj)
if(obj.event === 'del'){ if(obj.event === 'del'){

3
gulpfile.js
View File

@ -52,7 +52,8 @@ const js = () => {
return gulp.src(src).pipe(uglify({ return gulp.src(src).pipe(uglify({
output: { output: {
ascii_only: true //escape Unicode characters in strings and regexps ascii_only: true //escape Unicode characters in strings and regexps
} },
ie: true
})).pipe(concat('layui.js', {newLine: ''})) })).pipe(concat('layui.js', {newLine: ''}))
.pipe(header.apply(null, config.comment)) .pipe(header.apply(null, config.comment))
.pipe(gulp.dest(dest)); .pipe(gulp.dest(dest));

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "layui", "name": "layui",
"realname": "layui", "realname": "layui",
"version": "2.7.0-rc1", "version": "2.7.0-rc.6",
"description": "Classic modular Front-End UI library", "description": "Classic modular Front-End UI library",
"main": "dist/layui.js", "main": "dist/layui.js",
"license": "MIT", "license": "MIT",

11
src/css/layui.css
View File

@ -673,12 +673,15 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-item .layui-input-inline{float: left; width: 190px; margin-right: 10px;} .layui-form-item .layui-input-inline{float: left; width: 190px; margin-right: 10px;}
.layui-form-text .layui-input-inline{width: auto;} .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-mid{position: relative; float: left; display: block; padding: 9px 0 !important; line-height: 20px; margin-right: 10px;}
,.layui-form-danger+.layui-form-select .layui-input{border-color: #FF5722 !important;}
/* 警告条 */
.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-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 .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 #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{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;}

2
src/layui.js
View File

@ -15,7 +15,7 @@
} }
,Layui = function(){ ,Layui = function(){
this.v = '2.7.0-rc1'; // layui 版本号 this.v = '2.7.0-rc.1'; // layui 版本号
} }
//识别预先可能定义的指定全局对象 //识别预先可能定义的指定全局对象

12
src/modules/carousel.js
View File

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

69
src/modules/form.js
View File

@ -179,6 +179,9 @@ layui.define('layer', function(exports){
,nearElem; //select 组件当前选中的附近元素，用于辅助快捷键功能 ,nearElem; //select 组件当前选中的附近元素，用于辅助快捷键功能
if(disabled) return; if(disabled) return;
// 搜索项
var laySearch = select.attr('lay-search');
//展开下拉 //展开下拉
var showDown = function(){ var showDown = function(){
@ -339,13 +342,22 @@ layui.define('layer', function(exports){
} }
}); });
//检测值是否不属于 select 项 // 检测值是否不属于 select 项
var notOption = function(value, callback, origin){ var notOption = function(value, callback, origin){
var num = 0; var num = 0;
layui.each(dds, function(){ layui.each(dds, function(){
var othis = $(this) var othis = $(this);
,text = othis.text() var text = othis.text();
,not = text.indexOf(value) === -1;
// 是否区分大小写
if(laySearch !== 'exact'){
text = text.toLowerCase();
value = value.toLowerCase();
}
// 匹配
var not = text.indexOf(value) === -1;
if(value === '' || (origin === 'blur') ? value !== text : not) num++; if(value === '' || (origin === 'blur') ? value !== text : not) num++;
origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE); origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
}); });
@ -649,28 +661,29 @@ layui.define('layer', function(exports){
return that; return that;
}; };
// verifyElem: 要验证的节点或者范围 返回：验证通过返回true，否则返回false // elem 即要验证的区域表单选择器 - return true or false
Form.prototype.validate = function(verifyElem){ Form.prototype.validate = function(elem){
var stop = null //验证不通过状态 var stop = null; //验证不通过状态
,verify = form.config.verify //验证规则 var verify = form.config.verify; //验证规则
,DANGER = 'layui-form-danger' //警示样式 var DANGER = 'layui-form-danger'; //警示样式
if (layui.type(verifyElem) !== 'object') { // 不符合要求的格式直接判通过 elem = $(elem);
hint.error('validate: 参数错误');
return true; // 节点不存在可视为 true
} if(!elem[0]) return !0;
if (!verifyElem.attr('lay-verify')) {
// 验证某个容器内的节点 // 若节点不存在特定属性，则查找容器内有待验证的子节点
verifyElem = verifyElem.find('*[lay-verify]'); if(!elem.attr('lay-verify')){
elem = elem.find('*[lay-verify]');
} }
//开始校验 //开始校验
layui.each(verifyElem, function(_, item){ layui.each(elem, function(_, item){
var othis = $(this) var othis = $(this);
,verifyStr = othis.attr('lay-verify') || '' var verifyStr = othis.attr('lay-verify') || '';
,vers = verifyStr.split('|') var vers = verifyStr.split('|');
,verType = othis.attr('lay-verType') //提示方式 var verType = othis.attr('lay-verType'); //提示方式
,value = othis.val(); var value = othis.val();
othis.removeClass(DANGER); //移除警示样式 othis.removeClass(DANGER); //移除警示样式
@ -711,21 +724,27 @@ layui.define('layer', function(exports){
else if(/\bstring|number\b/.test(typeof errorText)){ else if(/\bstring|number\b/.test(typeof errorText)){
layer.msg(errorText, {icon: 5, shift: 6}); layer.msg(errorText, {icon: 5, shift: 6});
} }
setTimeout(function(){
(isForm2Elem ? othis.next().find('input') : item).focus();
}, 7);
//非移动设备自动定位焦点 /*
// 非移动设备自动定位焦点
if(!device.mobile){ if(!device.mobile){
setTimeout(function(){ setTimeout(function(){
(isForm2Elem ? othis.next().find('input') : item).focus(); (isForm2Elem ? othis.next().find('input') : item).focus();
}, 7); }, 7);
} else { //移动设备定位 } else { // 移动设备定位
$dom.scrollTop(function(){ $dom.scrollTop(function(){
try { try {
return (isForm2Elem ? othis.next() : othis).offset().top - 15 return (isForm2Elem ? othis.next() : othis).focus().offset().top - 15
} catch(e){ } catch(e){
return 0; return 0;
} }
}()); }());
} }
*/
othis.addClass(DANGER); othis.addClass(DANGER);
return stop = true; return stop = true;

28
src/modules/laydate.js
View File

@ -341,7 +341,7 @@
//主面板 //主面板
,elem = that.elem = lay.elem('div', { ,elem = that.elem = lay.elem('div', {
id: that.elemID id: that.elemID
,'class': [ ,"class": [
'layui-laydate' 'layui-laydate'
,options.range ? ' layui-laydate-range' : '' ,options.range ? ' layui-laydate-range' : ''
,isStatic ? (' '+ ELEM_STATIC) : '' ,isStatic ? (' '+ ELEM_STATIC) : ''
@ -357,7 +357,7 @@
//底部区域 //底部区域
,divFooter = that.footer = lay.elem('div', { ,divFooter = that.footer = lay.elem('div', {
'class': ELEM_FOOTER "class": ELEM_FOOTER
}); });
if(options.zIndex) elem.style.zIndex = options.zIndex; if(options.zIndex) elem.style.zIndex = options.zIndex;
@ -370,38 +370,38 @@
//头部区域 //头部区域
var divHeader = lay.elem('div', { var divHeader = lay.elem('div', {
'class': 'layui-laydate-header' "class": 'layui-laydate-header'
}) })
//左右切换 //左右切换
,headerChild = [function(){ //上一年 ,headerChild = [function(){ //上一年
var elem = lay.elem('i', { var elem = lay.elem('i', {
'class': 'layui-icon laydate-icon laydate-prev-y' "class": 'layui-icon laydate-icon laydate-prev-y'
}); });
elem.innerHTML = '&#xe65a;'; elem.innerHTML = '&#xe65a;';
return elem; return elem;
}(), function(){ //上一月 }(), function(){ //上一月
var elem = lay.elem('i', { var elem = lay.elem('i', {
'class': 'layui-icon laydate-icon laydate-prev-m' "class": 'layui-icon laydate-icon laydate-prev-m'
}); });
elem.innerHTML = '&#xe603;'; elem.innerHTML = '&#xe603;';
return elem; return elem;
}(), function(){ //年月选择 }(), function(){ //年月选择
var elem = lay.elem('div', { var elem = lay.elem('div', {
'class': 'laydate-set-ym' "class": 'laydate-set-ym'
}), spanY = lay.elem('span'), spanM = lay.elem('span'); }), spanY = lay.elem('span'), spanM = lay.elem('span');
elem.appendChild(spanY); elem.appendChild(spanY);
elem.appendChild(spanM); elem.appendChild(spanM);
return elem; return elem;
}(), function(){ //下一月 }(), function(){ //下一月
var elem = lay.elem('i', { var elem = lay.elem('i', {
'class': 'layui-icon laydate-icon laydate-next-m' "class": 'layui-icon laydate-icon laydate-next-m'
}); });
elem.innerHTML = '&#xe602;'; elem.innerHTML = '&#xe602;';
return elem; return elem;
}(), function(){ //下一年 }(), function(){ //下一年
var elem = lay.elem('i', { var elem = lay.elem('i', {
'class': 'layui-icon laydate-icon laydate-next-y' "class": 'layui-icon laydate-icon laydate-next-y'
}); });
elem.innerHTML = '&#xe65b;'; elem.innerHTML = '&#xe65b;';
return elem; return elem;
@ -409,7 +409,7 @@
//日历内容区域 //日历内容区域
,divContent = lay.elem('div', { ,divContent = lay.elem('div', {
'class': 'layui-laydate-content' "class": 'layui-laydate-content'
}) })
,table = lay.elem('table') ,table = lay.elem('table')
,thead = lay.elem('thead'), theadTr = lay.elem('tr'); ,thead = lay.elem('thead'), theadTr = lay.elem('tr');
@ -436,7 +436,7 @@
divContent.appendChild(table); divContent.appendChild(table);
elemMain[i] = lay.elem('div', { elemMain[i] = lay.elem('div', {
'class': 'layui-laydate-main laydate-main-list-'+ i "class": 'layui-laydate-main laydate-main-list-'+ i
}); });
elemMain[i].appendChild(divHeader); elemMain[i].appendChild(divHeader);
@ -549,7 +549,7 @@
var that = this var that = this
,options = that.config ,options = that.config
,div = lay.elem('div', { ,div = lay.elem('div', {
'class': ELEM_HINT "class": ELEM_HINT
}); });
if(!that.elem) return; if(!that.elem) return;
@ -865,7 +865,7 @@
lay.each(tds, function(index_, item){ lay.each(tds, function(index_, item){
var YMD = [dateTime.year, dateTime.month], st = 0; var YMD = [dateTime.year, dateTime.month], st = 0;
item = lay(item); item = lay(item);
item.removeAttr('class'); item.removeAttr("class");
if(index_ < startWeek){ if(index_ < startWeek){
st = prevMaxDate - startWeek + index_; st = prevMaxDate - startWeek + index_;
item.addClass('laydate-day-prev'); item.addClass('laydate-day-prev');
@ -948,7 +948,7 @@
,isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' //独立范围选择器 ,isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' //独立范围选择器
,ul = lay.elem('ul', { ,ul = lay.elem('ul', {
'class': ELEM_LIST + ' ' + ({ "class": ELEM_LIST + ' ' + ({
year: 'laydate-year-list' year: 'laydate-year-list'
,month: 'laydate-month-list' ,month: 'laydate-month-list'
,time: 'laydate-time-list' ,time: 'laydate-time-list'
@ -1131,7 +1131,7 @@
}); });
} else { //时间选择面板 - 选择事件 } else { //时间选择面板 - 选择事件
var span = lay.elem('span', { var span = lay.elem('span', {
'class': ELEM_TIME_TEXT "class": ELEM_TIME_TEXT
}) })
//滚动条定位 //滚动条定位

34
src/modules/laypage.js
View File

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

27
src/modules/slider.js
View File

@ -4,7 +4,7 @@
layui.define('jquery', function(exports){ layui.define('jquery', function(exports){
"use strict"; "use strict";
var $ = layui.jquery var $ = layui.$
//外部接口 //外部接口
,slider = { ,slider = {
@ -111,7 +111,7 @@ layui.define('jquery', function(exports){
var theme = options.disabled ? '#c2c2c2' : options.theme; 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-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>'; '<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>';
@ -174,6 +174,7 @@ layui.define('jquery', function(exports){
}; };
//划过滑块显示数值 //划过滑块显示数值
var timer;
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){ that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP) ,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
@ -182,12 +183,24 @@ layui.define('jquery', function(exports){
,value = $(this).parent().data('value') ,value = $(this).parent().data('value')
,tipsTxt = options.setTips ? options.setTips(value) : value; ,tipsTxt = options.setTips ? options.setTips(value) : value;
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt); that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
if(options.type === 'vertical'){
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"20px", "display":"inline-block"}); clearTimeout(timer);
}else{ timer = setTimeout(function(){
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "display":"inline-block"}); if(options.type === 'vertical'){
}; that.elemTemp.find('.' + SLIDER_TIPS).css({
"bottom": left + '%',
"margin-bottom": "20px",
"display": "inline-block"
});
} else {
that.elemTemp.find('.' + SLIDER_TIPS).css({
"left": left + '%',
"display": "inline-block"
});
};
}, 300);
}).on('mouseout', function(){ }).on('mouseout', function(){
clearTimeout(timer);
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none"); that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
}); });
}; };

53
src/modules/table.js
View File

@ -254,7 +254,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,loading: true //请求数据时，是否显示 loading ,loading: true //请求数据时，是否显示 loading
,escape: true // 是否开启 HTML 编码功能，即转义 html 原文 ,escape: true // 是否开启 HTML 编码功能，即转义 html 原文
,cellMinWidth: 60 //所有单元格默认最小宽度 ,cellMinWidth: 60 //所有单元格默认最小宽度
,editTrigger: 'click' //单元格编辑的触发方式 ,editTrigger: 'click' //单元格编辑的事件触发方式
,defaultToolbar: ['filter', 'exports', 'print'] //工具栏右侧图标 ,defaultToolbar: ['filter', 'exports', 'print'] //工具栏右侧图标
,autoSort: true //是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序） ,autoSort: true //是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
,text: { ,text: {
@ -1647,7 +1647,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
})); }));
}); });
//行事件 // 行事件
that.layBody.on('mouseenter', 'tr', function(){ //鼠标移入行 that.layBody.on('mouseenter', 'tr', function(){ //鼠标移入行
var othis = $(this) var othis = $(this)
,index = othis.index(); ,index = othis.index();
@ -1674,7 +1674,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
); );
}; };
//单元格编辑 // 单元格编辑
that.layBody.on('change', '.'+ELEM_EDIT, function(){ that.layBody.on('change', '.'+ELEM_EDIT, function(){
var othis = $(this) var othis = $(this)
,value = this.value ,value = this.value
@ -1711,7 +1711,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
othis.remove(); othis.remove();
}); });
//单元格单击事件 // 单元格事件
that.layBody.on(options.editTrigger, 'td', function(e){ that.layBody.on(options.editTrigger, 'td', function(e){
var othis = $(this) var othis = $(this)
,field = othis.data('field') ,field = othis.data('field')
@ -1790,14 +1790,29 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
layui.stope(e); layui.stope(e);
}); });
//行工具条操作事件 // 行工具条操作事件
that.layBody.on('click', '*[lay-event]', function(){ var toolFn = function(type){
var othis = $(this) var othis = $(this);
,index = othis.parents('tr').eq(0).data('index'); var index = othis.parents('tr').eq(0).data('index');
layui.event.call(this, MOD_NAME, 'tool('+ filter +')', commonMember.call(this, {
event: othis.attr('lay-event') layui.event.call(
})); this,
MOD_NAME,
(type || 'tool') + '('+ filter +')',
commonMember.call(this, {
event: othis.attr('lay-event')
})
);
that.setThisRowChecked(index); that.setThisRowChecked(index);
};
// 行工具条单击事件
that.layBody.on('click', '*[lay-event]', function(){
toolFn.call(this);
return false;
}).on('dblclick', '*[lay-event]', function(){ //行工具条双击事件
toolFn.call(this, 'toolDouble');
return false;
}); });
//同步滚动条 //同步滚动条
@ -1934,7 +1949,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
} }
}; };
//遍历表头 // 遍历表头
table.eachCols = function(id, callback, cols){ table.eachCols = function(id, callback, cols){
var config = thisTable.config[id] || {} var config = thisTable.config[id] || {}
,arrs = [], index = 0; ,arrs = [], index = 0;
@ -1962,7 +1977,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
eachArrs(); eachArrs();
}; };
//表格选中状态 // 表格选中状态
table.checkStatus = function(id){ table.checkStatus = function(id){
var nums = 0 var nums = 0
,invalidNum = 0 ,invalidNum = 0
@ -1985,7 +2000,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}; };
}; };
//获取表格当前页的所有行数据 // 获取表格当前页的所有行数据
table.getData = function(id){ table.getData = function(id){
var arr = [] var arr = []
,data = table.cache[id] || []; ,data = table.cache[id] || [];
@ -1998,7 +2013,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
return arr; return arr;
}; };
//表格导出 // 表格导出
table.exportFile = function(id, data, type){ table.exportFile = function(id, data, type){
data = data || table.clearCacheKey(table.cache[id]); data = data || table.clearCacheKey(table.cache[id]);
type = type || 'csv'; type = type || 'csv';
@ -2075,7 +2090,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
document.body.removeChild(alink); document.body.removeChild(alink);
}; };
//重置表格尺寸结构 // 重置表格尺寸结构
table.resize = function(id){ table.resize = function(id){
//如果指定表格唯一 id，则只执行该 id 对应的表格实例 //如果指定表格唯一 id，则只执行该 id 对应的表格实例
if(id){ if(id){
@ -2121,13 +2136,13 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
return table.reload.apply(null, args); return table.reload.apply(null, args);
}; };
//核心入口 // 核心入口
table.render = function(options){ table.render = function(options){
var inst = new Class(options); var inst = new Class(options);
return thisTable.call(inst); return thisTable.call(inst);
}; };
//清除临时Key // 清除临时 Key
table.clearCacheKey = function(data){ table.clearCacheKey = function(data){
data = $.extend({}, data); data = $.extend({}, data);
delete data[table.config.checkName]; delete data[table.config.checkName];
@ -2135,7 +2150,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
return data; return data;
}; };
//自动完成渲染 // 自动完成渲染
$(function(){ $(function(){
table.init(); table.init();
}); });

4
src/modules/transfer.js
View File

@ -404,7 +404,7 @@ layui.define(['laytpl', 'form'], function(exports){
}, 0) }, 0)
}); });
//双击记录 // 双击穿梭
that.elem.on('dblclick', '.' + ELEM_DATA + '>li', function(event){ that.elem.on('dblclick', '.' + ELEM_DATA + '>li', function(event){
var elemThis = $(this) var elemThis = $(this)
,thisElemCheckbox = elemThis.children('input[type="checkbox"]') ,thisElemCheckbox = elemThis.children('input[type="checkbox"]')
@ -416,7 +416,7 @@ layui.define(['laytpl', 'form'], function(exports){
that.transfer(thisBoxElem.data('index'), elemThis); that.transfer(thisBoxElem.data('index'), elemThis);
}) })
//按钮事件 // 穿梭按钮事件
that.layBtn.on('click', function(){ that.layBtn.on('click', function(){
var othis = $(this) var othis = $(this)
,_index = othis.data('index') ,_index = othis.data('index')