update
This commit is contained in:
贤心
parent
8e66f49320
commit
3b8f6a0477
26
README.md
26
README.md
@ -25,12 +25,12 @@
|
||||
|
||||
---
|
||||
|
||||
Layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。Layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
|
||||
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约，而内在丰盈，利于实现网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，他们无需涉足各类构建工具，只需面向浏览器本身，即可轻松掌握页面所需的元素与交互，进而信手拈来。
|
||||
|
||||
|
||||
## 快速上手
|
||||
## ✍ 快速上手
|
||||
|
||||
获得 Layui 后，将其完整地部署到你的静态资源项目目录，你只需要引入下述两个文件：
|
||||
使用 Layui 只需在页面中引入核心文件即可：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -42,8 +42,7 @@ Layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范
|
||||
<link href="./layui/css/layui.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 你的 HTML 代码 -->
|
||||
<!-- HTML -->
|
||||
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script>
|
||||
@ -60,16 +59,17 @@ Layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范
|
||||
</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日下线。详见：
|
||||
> 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 开发模式的可行性」**
|
||||
@ -54,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>
|
||||
|
||||
@ -76,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'
|
||||
@ -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({
|
||||
elem: '#test2'
|
||||
@ -106,10 +110,11 @@ layui.use('carousel', function(){
|
||||
//,full: true
|
||||
});
|
||||
|
||||
// 图片轮播
|
||||
carousel.render({
|
||||
elem: '#test4'
|
||||
,width: '778px'
|
||||
,height: '440px'
|
||||
,width: '720px'
|
||||
,height: '360px'
|
||||
,interval: 5000
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>表单模块 - layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
@ -11,15 +11,13 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 10px;}
|
||||
body{padding: 16px;}
|
||||
</style>
|
||||
</head>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<form class="layui-form" method="get">
|
||||
<form class="layui-form" method="get">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
@ -34,11 +32,11 @@
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" lay-submit lay-filter="top">立即提交</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<form class="layui-form layui-form-pane1" action="" lay-filter="first">
|
||||
<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">
|
||||
@ -48,7 +46,16 @@
|
||||
<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">
|
||||
@ -151,15 +158,15 @@
|
||||
<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>
|
||||
<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>
|
||||
<option value="aa1">aA1</option>
|
||||
<option value="aa2">aA2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组b">
|
||||
<option value="b1">b1</option>
|
||||
@ -170,8 +177,8 @@
|
||||
<option value="bb2">bb2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组bbb">
|
||||
<option value="bbb1">bbb1</option>
|
||||
<option value="bbb2">bbb2</option>
|
||||
<option value="bbb1">bBb1</option>
|
||||
<option value="bbb2">bBB2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组c">
|
||||
<option value="c1">c1</option>
|
||||
@ -252,21 +259,21 @@
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<br><br><br>
|
||||
<br><br><br>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<!-- <script src="../build/lay/dest/layui.all.js"></script> -->
|
||||
<script src="../src/layui.js"></script>
|
||||
<!-- <script src="../build/lay/dest/layui.all.js"></script> -->
|
||||
|
||||
<script>
|
||||
<script>
|
||||
|
||||
layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
var form = layui.form
|
||||
,layer = layui.layer
|
||||
,layedit = layui.layedit
|
||||
,laydate = layui.laydate;
|
||||
layui.use(['form', 'util', 'laydate'], function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var laydate = layui.laydate;
|
||||
|
||||
//自定义验证规则
|
||||
form.verify({
|
||||
@ -298,7 +305,7 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
//初始赋值
|
||||
var thisValue = form.val('first', {
|
||||
'title': '测试测试测试'
|
||||
,'phone': 11111111111
|
||||
//,'phone': 11111111111
|
||||
,'email': 'xu@sentsin.com'
|
||||
,'date': '2021-05-30'
|
||||
,'password': 123123
|
||||
@ -312,7 +319,7 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
});
|
||||
|
||||
|
||||
//事件监听
|
||||
//事件
|
||||
form.on('select(quiz111)', function(data){
|
||||
console.log('select: ', this, data);
|
||||
});
|
||||
@ -325,8 +332,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);
|
||||
});
|
||||
@ -339,18 +344,35 @@ 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');
|
||||
|
||||
</script>
|
||||
// 验证通过
|
||||
if(isvalid){
|
||||
layer.msg('手机号验证通过，执行发送验证码的操作');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
<form id="test1" action="" target="_blank">
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<h3>原始表单调试：</h3>
|
||||
<hr>
|
||||
|
||||
<form id="test1" action="" target="_blank">
|
||||
<input type="radio" value="girl" disabled>
|
||||
<input type="checkbox" name="love[a]">
|
||||
<input type="checkbox" name="love[b]">
|
||||
@ -366,22 +388,7 @@ layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
<option value="你的工号">你的工号</option>
|
||||
</select>
|
||||
<button type="submit">原始表单，测试提交</button>
|
||||
</form>
|
||||
</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>
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
<script type="text/html" id="barDemo">
|
||||
<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>
|
||||
{{# } }}
|
||||
<input type="checkbox" name="demoTableSwitch" lay-skin="switch" {{ d.demoTableSwitch }}>
|
||||
@ -105,6 +105,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
//,autoSort: false //是否自动排序。如果否，则由服务端排序
|
||||
//,loading: false
|
||||
,totalRow: true
|
||||
,page: true
|
||||
,limit: 30
|
||||
,toolbar: '#toolbarDemo'
|
||||
,defaultToolbar: ['filter', 'exports', 'print', {
|
||||
@ -164,16 +165,16 @@ layui.use(['table', 'dropdown'], function(){
|
||||
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
|
||||
,data: [{
|
||||
id: 'reload',
|
||||
title: '重载 - 默认（参数重置）'
|
||||
title: '重载'
|
||||
},{
|
||||
id: 'reload-deep',
|
||||
title: '重载 - 深度（参数叠加）'
|
||||
title: '重载 - 参数叠加'
|
||||
},{
|
||||
id: 'reloadData',
|
||||
title: '数据重载 - 默认（参数重置）'
|
||||
title: '仅重载数据'
|
||||
},{
|
||||
id: 'reloadData-deep',
|
||||
title: '数据重载 - 深度（参数叠加）'
|
||||
title: '仅重载数据 - 参数叠加'
|
||||
}]
|
||||
// 菜单被点击的事件
|
||||
,click: function(obj){
|
||||
@ -186,7 +187,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
//,test: '新的 test2'
|
||||
//,token: '新的 token2'
|
||||
}
|
||||
,defaultToolbar: ['print']
|
||||
,height: 'full-130' // 重载高度
|
||||
/*
|
||||
,cols: [[ // 重置表头
|
||||
{type: 'checkbox', fixed: 'left'}
|
||||
@ -197,7 +198,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
,{field:'joinTime', title:'加入时间', width:120}
|
||||
]]
|
||||
*/
|
||||
//,height: 500
|
||||
|
||||
});
|
||||
break;
|
||||
case 'reload-deep':
|
||||
@ -207,9 +208,9 @@ layui.use(['table', 'dropdown'], function(){
|
||||
abc: 123
|
||||
,test: '新的 test1'
|
||||
}
|
||||
,defaultToolbar: ['print']
|
||||
//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
|
||||
,page: {curr: 5, limit: 20}
|
||||
,cols: ins1.config.cols
|
||||
//,cols: ins1.config.cols
|
||||
}, true);
|
||||
break;
|
||||
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;
|
||||
//console.log(obj)
|
||||
if(obj.event === 'del'){
|
||||
|
||||
@ -52,7 +52,8 @@ const js = () => {
|
||||
return gulp.src(src).pipe(uglify({
|
||||
output: {
|
||||
ascii_only: true //escape Unicode characters in strings and regexps
|
||||
}
|
||||
},
|
||||
ie: true
|
||||
})).pipe(concat('layui.js', {newLine: ''}))
|
||||
.pipe(header.apply(null, config.comment))
|
||||
.pipe(gulp.dest(dest));
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "layui",
|
||||
"realname": "layui",
|
||||
"version": "2.7.0-rc1",
|
||||
"version": "2.7.0-rc.6",
|
||||
"description": "Classic modular Front-End UI library",
|
||||
"main": "dist/layui.js",
|
||||
"license": "MIT",
|
||||
|
||||
@ -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-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 #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;}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
,Layui = function(){
|
||||
this.v = '2.7.0-rc1'; // layui 版本号
|
||||
this.v = '2.7.0-rc.1'; // layui 版本号
|
||||
}
|
||||
|
||||
//识别预先可能定义的指定全局对象
|
||||
|
||||
@ -276,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);
|
||||
};
|
||||
|
||||
//事件处理
|
||||
@ -292,10 +296,10 @@ layui.define('jquery', function(exports){
|
||||
|
||||
//移入移出容器
|
||||
options.elem.on('mouseenter', function(){
|
||||
if (that.config.autoplay === 'always') return;
|
||||
if (options.autoplay === 'always') return;
|
||||
clearInterval(that.timer);
|
||||
}).on('mouseleave', function(){
|
||||
if (that.config.autoplay === 'always') return;
|
||||
if (options.autoplay === 'always') return;
|
||||
that.autoplay();
|
||||
});
|
||||
|
||||
|
||||
@ -180,6 +180,9 @@ layui.define('layer', function(exports){
|
||||
|
||||
if(disabled) return;
|
||||
|
||||
// 搜索项
|
||||
var laySearch = select.attr('lay-search');
|
||||
|
||||
//展开下拉
|
||||
var showDown = function(){
|
||||
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()
|
||||
@ -339,13 +342,22 @@ layui.define('layer', function(exports){
|
||||
}
|
||||
});
|
||||
|
||||
//检测值是否不属于 select 项
|
||||
// 检测值是否不属于 select 项
|
||||
var notOption = function(value, callback, origin){
|
||||
var num = 0;
|
||||
layui.each(dds, function(){
|
||||
var othis = $(this)
|
||||
,text = othis.text()
|
||||
,not = text.indexOf(value) === -1;
|
||||
var othis = $(this);
|
||||
var text = othis.text();
|
||||
|
||||
// 是否区分大小写
|
||||
if(laySearch !== 'exact'){
|
||||
text = text.toLowerCase();
|
||||
value = value.toLowerCase();
|
||||
}
|
||||
|
||||
// 匹配
|
||||
var not = text.indexOf(value) === -1;
|
||||
|
||||
if(value === '' || (origin === 'blur') ? value !== text : not) num++;
|
||||
origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
|
||||
});
|
||||
@ -649,28 +661,29 @@ layui.define('layer', function(exports){
|
||||
return that;
|
||||
};
|
||||
|
||||
// verifyElem: 要验证的节点或者范围 返回：验证通过返回true，否则返回false
|
||||
Form.prototype.validate = function(verifyElem){
|
||||
var stop = null //验证不通过状态
|
||||
,verify = form.config.verify //验证规则
|
||||
,DANGER = 'layui-form-danger' //警示样式
|
||||
// elem 即要验证的区域表单选择器 - return true or false
|
||||
Form.prototype.validate = function(elem){
|
||||
var stop = null; //验证不通过状态
|
||||
var verify = form.config.verify; //验证规则
|
||||
var DANGER = 'layui-form-danger'; //警示样式
|
||||
|
||||
if (layui.type(verifyElem) !== 'object') { // 不符合要求的格式直接判通过
|
||||
hint.error('validate: 参数错误');
|
||||
return true;
|
||||
}
|
||||
if (!verifyElem.attr('lay-verify')) {
|
||||
// 验证某个容器内的节点
|
||||
verifyElem = verifyElem.find('*[lay-verify]');
|
||||
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)
|
||||
,verifyStr = othis.attr('lay-verify') || ''
|
||||
,vers = verifyStr.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); //移除警示样式
|
||||
|
||||
@ -712,20 +725,26 @@ layui.define('layer', function(exports){
|
||||
layer.msg(errorText, {icon: 5, shift: 6});
|
||||
}
|
||||
|
||||
//非移动设备自动定位焦点
|
||||
setTimeout(function(){
|
||||
(isForm2Elem ? othis.next().find('input') : item).focus();
|
||||
}, 7);
|
||||
|
||||
/*
|
||||
// 非移动设备自动定位焦点
|
||||
if(!device.mobile){
|
||||
setTimeout(function(){
|
||||
(isForm2Elem ? othis.next().find('input') : item).focus();
|
||||
}, 7);
|
||||
} else { //移动设备定位
|
||||
} else { // 移动设备定位
|
||||
$dom.scrollTop(function(){
|
||||
try {
|
||||
return (isForm2Elem ? othis.next() : othis).offset().top - 15
|
||||
return (isForm2Elem ? othis.next() : othis).focus().offset().top - 15
|
||||
} catch(e){
|
||||
return 0;
|
||||
}
|
||||
}());
|
||||
}
|
||||
*/
|
||||
|
||||
othis.addClass(DANGER);
|
||||
return stop = true;
|
||||
|
||||
@ -341,7 +341,7 @@
|
||||
//主面板
|
||||
,elem = that.elem = lay.elem('div', {
|
||||
id: that.elemID
|
||||
,'class': [
|
||||
,"class": [
|
||||
'layui-laydate'
|
||||
,options.range ? ' layui-laydate-range' : ''
|
||||
,isStatic ? (' '+ ELEM_STATIC) : ''
|
||||
@ -357,7 +357,7 @@
|
||||
|
||||
//底部区域
|
||||
,divFooter = that.footer = lay.elem('div', {
|
||||
'class': ELEM_FOOTER
|
||||
"class": ELEM_FOOTER
|
||||
});
|
||||
|
||||
if(options.zIndex) elem.style.zIndex = options.zIndex;
|
||||
@ -370,38 +370,38 @@
|
||||
|
||||
//头部区域
|
||||
var divHeader = lay.elem('div', {
|
||||
'class': 'layui-laydate-header'
|
||||
"class": 'layui-laydate-header'
|
||||
})
|
||||
|
||||
//左右切换
|
||||
,headerChild = [function(){ //上一年
|
||||
var elem = lay.elem('i', {
|
||||
'class': 'layui-icon laydate-icon laydate-prev-y'
|
||||
"class": 'layui-icon laydate-icon laydate-prev-y'
|
||||
});
|
||||
elem.innerHTML = '';
|
||||
return elem;
|
||||
}(), function(){ //上一月
|
||||
var elem = lay.elem('i', {
|
||||
'class': 'layui-icon laydate-icon laydate-prev-m'
|
||||
"class": 'layui-icon laydate-icon laydate-prev-m'
|
||||
});
|
||||
elem.innerHTML = '';
|
||||
return elem;
|
||||
}(), function(){ //年月选择
|
||||
var elem = lay.elem('div', {
|
||||
'class': 'laydate-set-ym'
|
||||
"class": 'laydate-set-ym'
|
||||
}), spanY = lay.elem('span'), spanM = lay.elem('span');
|
||||
elem.appendChild(spanY);
|
||||
elem.appendChild(spanM);
|
||||
return elem;
|
||||
}(), function(){ //下一月
|
||||
var elem = lay.elem('i', {
|
||||
'class': 'layui-icon laydate-icon laydate-next-m'
|
||||
"class": 'layui-icon laydate-icon laydate-next-m'
|
||||
});
|
||||
elem.innerHTML = '';
|
||||
return elem;
|
||||
}(), function(){ //下一年
|
||||
var elem = lay.elem('i', {
|
||||
'class': 'layui-icon laydate-icon laydate-next-y'
|
||||
"class": 'layui-icon laydate-icon laydate-next-y'
|
||||
});
|
||||
elem.innerHTML = '';
|
||||
return elem;
|
||||
@ -409,7 +409,7 @@
|
||||
|
||||
//日历内容区域
|
||||
,divContent = lay.elem('div', {
|
||||
'class': 'layui-laydate-content'
|
||||
"class": 'layui-laydate-content'
|
||||
})
|
||||
,table = lay.elem('table')
|
||||
,thead = lay.elem('thead'), theadTr = lay.elem('tr');
|
||||
@ -436,7 +436,7 @@
|
||||
divContent.appendChild(table);
|
||||
|
||||
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);
|
||||
@ -549,7 +549,7 @@
|
||||
var that = this
|
||||
,options = that.config
|
||||
,div = lay.elem('div', {
|
||||
'class': ELEM_HINT
|
||||
"class": ELEM_HINT
|
||||
});
|
||||
|
||||
if(!that.elem) return;
|
||||
@ -865,7 +865,7 @@
|
||||
lay.each(tds, function(index_, item){
|
||||
var YMD = [dateTime.year, dateTime.month], st = 0;
|
||||
item = lay(item);
|
||||
item.removeAttr('class');
|
||||
item.removeAttr("class");
|
||||
if(index_ < startWeek){
|
||||
st = prevMaxDate - startWeek + index_;
|
||||
item.addClass('laydate-day-prev');
|
||||
@ -948,7 +948,7 @@
|
||||
,isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' //独立范围选择器
|
||||
|
||||
,ul = lay.elem('ul', {
|
||||
'class': ELEM_LIST + ' ' + ({
|
||||
"class": ELEM_LIST + ' ' + ({
|
||||
year: 'laydate-year-list'
|
||||
,month: 'laydate-month-list'
|
||||
,time: 'laydate-time-list'
|
||||
@ -1131,7 +1131,7 @@
|
||||
});
|
||||
} else { //时间选择面板 - 选择事件
|
||||
var span = lay.elem('span', {
|
||||
'class': ELEM_TIME_TEXT
|
||||
"class": ELEM_TIME_TEXT
|
||||
})
|
||||
|
||||
//滚动条定位
|
||||
|
||||
@ -28,35 +28,43 @@ layui.define(function(exports){
|
||||
}
|
||||
};
|
||||
|
||||
//分页视图
|
||||
// 分页视图
|
||||
Class.prototype.view = function(){
|
||||
var that = this
|
||||
,config = that.config
|
||||
,groups = config.groups = 'groups' in config ? (config.groups|0) : 5; //连续页码个数
|
||||
var that = this;
|
||||
var config = that.config;
|
||||
|
||||
//排版
|
||||
// 连续页码个数
|
||||
var groups = config.groups = 'groups' in config
|
||||
? (Number(config.groups) || 0)
|
||||
: 5;
|
||||
|
||||
// 排版
|
||||
config.layout = typeof config.layout === 'object'
|
||||
? config.layout
|
||||
: ['prev', 'page', 'next'];
|
||||
|
||||
config.count = config.count|0; //数据总数
|
||||
config.curr = (config.curr|0) || 1; //当前页
|
||||
config.count = Number(config.count) || 0; // 数据总数
|
||||
config.curr = Number(config.curr) || 1; // 当前页
|
||||
|
||||
//每页条数的选择项
|
||||
// 每页条数的选择项
|
||||
config.limits = typeof config.limits === 'object'
|
||||
? config.limits
|
||||
: [10, 20, 30, 40, 50];
|
||||
config.limit = (config.limit|0) || 10; //默认条数
|
||||
|
||||
// 默认条数
|
||||
config.limit = Number(config.limit) || 10;
|
||||
|
||||
//总页数
|
||||
config.pages = Math.ceil(config.count/config.limit) || 1;
|
||||
|
||||
//当前页不能超过总页数
|
||||
// 当前页不能超过总页数
|
||||
if(config.curr > config.pages){
|
||||
config.curr = config.pages;
|
||||
} else if(config.curr < 1) { // 当前分页不能小于 1
|
||||
config.curr = 1;
|
||||
}
|
||||
|
||||
//连续分页个数不能低于0且不能大于总页数
|
||||
//连续分页个数不能低于 0 且不能大于总页数
|
||||
if(groups < 0){
|
||||
groups = 1;
|
||||
} else if (groups > config.pages){
|
||||
@ -197,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();
|
||||
@ -210,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();
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
"use strict";
|
||||
var $ = layui.jquery
|
||||
var $ = layui.$
|
||||
|
||||
//外部接口
|
||||
,slider = {
|
||||
@ -111,7 +111,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>';
|
||||
|
||||
@ -174,6 +174,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)
|
||||
@ -182,12 +183,24 @@ 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"});
|
||||
}else{
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "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"
|
||||
});
|
||||
};
|
||||
}, 300);
|
||||
}).on('mouseout', function(){
|
||||
clearTimeout(timer);
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
|
||||
});
|
||||
};
|
||||
|
||||
@ -254,7 +254,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
,loading: true //请求数据时，是否显示 loading
|
||||
,escape: true // 是否开启 HTML 编码功能，即转义 html 原文
|
||||
,cellMinWidth: 60 //所有单元格默认最小宽度
|
||||
,editTrigger: 'click' //单元格编辑的触发方式
|
||||
,editTrigger: 'click' //单元格编辑的事件触发方式
|
||||
,defaultToolbar: ['filter', 'exports', 'print'] //工具栏右侧图标
|
||||
,autoSort: true //是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
|
||||
,text: {
|
||||
@ -1647,7 +1647,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
}));
|
||||
});
|
||||
|
||||
//行事件
|
||||
// 行事件
|
||||
that.layBody.on('mouseenter', 'tr', function(){ //鼠标移入行
|
||||
var othis = $(this)
|
||||
,index = othis.index();
|
||||
@ -1674,7 +1674,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
);
|
||||
};
|
||||
|
||||
//单元格编辑
|
||||
// 单元格编辑
|
||||
that.layBody.on('change', '.'+ELEM_EDIT, function(){
|
||||
var othis = $(this)
|
||||
,value = this.value
|
||||
@ -1711,7 +1711,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
othis.remove();
|
||||
});
|
||||
|
||||
//单元格单击事件
|
||||
// 单元格事件
|
||||
that.layBody.on(options.editTrigger, 'td', function(e){
|
||||
var othis = $(this)
|
||||
,field = othis.data('field')
|
||||
@ -1790,14 +1790,29 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
layui.stope(e);
|
||||
});
|
||||
|
||||
//行工具条操作事件
|
||||
that.layBody.on('click', '*[lay-event]', function(){
|
||||
var othis = $(this)
|
||||
,index = othis.parents('tr').eq(0).data('index');
|
||||
layui.event.call(this, MOD_NAME, 'tool('+ filter +')', commonMember.call(this, {
|
||||
// 行工具条操作事件
|
||||
var toolFn = function(type){
|
||||
var othis = $(this);
|
||||
var index = othis.parents('tr').eq(0).data('index');
|
||||
|
||||
layui.event.call(
|
||||
this,
|
||||
MOD_NAME,
|
||||
(type || 'tool') + '('+ filter +')',
|
||||
commonMember.call(this, {
|
||||
event: othis.attr('lay-event')
|
||||
}));
|
||||
})
|
||||
);
|
||||
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){
|
||||
var config = thisTable.config[id] || {}
|
||||
,arrs = [], index = 0;
|
||||
@ -1962,7 +1977,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
eachArrs();
|
||||
};
|
||||
|
||||
//表格选中状态
|
||||
// 表格选中状态
|
||||
table.checkStatus = function(id){
|
||||
var nums = 0
|
||||
,invalidNum = 0
|
||||
@ -1985,7 +2000,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
};
|
||||
};
|
||||
|
||||
//获取表格当前页的所有行数据
|
||||
// 获取表格当前页的所有行数据
|
||||
table.getData = function(id){
|
||||
var arr = []
|
||||
,data = table.cache[id] || [];
|
||||
@ -1998,7 +2013,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
return arr;
|
||||
};
|
||||
|
||||
//表格导出
|
||||
// 表格导出
|
||||
table.exportFile = function(id, data, type){
|
||||
data = data || table.clearCacheKey(table.cache[id]);
|
||||
type = type || 'csv';
|
||||
@ -2075,7 +2090,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
document.body.removeChild(alink);
|
||||
};
|
||||
|
||||
//重置表格尺寸结构
|
||||
// 重置表格尺寸结构
|
||||
table.resize = function(id){
|
||||
//如果指定表格唯一 id，则只执行该 id 对应的表格实例
|
||||
if(id){
|
||||
@ -2121,13 +2136,13 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
return table.reload.apply(null, args);
|
||||
};
|
||||
|
||||
//核心入口
|
||||
// 核心入口
|
||||
table.render = function(options){
|
||||
var inst = new Class(options);
|
||||
return thisTable.call(inst);
|
||||
};
|
||||
|
||||
//清除临时Key
|
||||
// 清除临时 Key
|
||||
table.clearCacheKey = function(data){
|
||||
data = $.extend({}, data);
|
||||
delete data[table.config.checkName];
|
||||
@ -2135,7 +2150,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
return data;
|
||||
};
|
||||
|
||||
//自动完成渲染
|
||||
// 自动完成渲染
|
||||
$(function(){
|
||||
table.init();
|
||||
});
|
||||
|
||||
@ -404,7 +404,7 @@ layui.define(['laytpl', 'form'], function(exports){
|
||||
}, 0)
|
||||
});
|
||||
|
||||
//双击记录
|
||||
// 双击穿梭
|
||||
that.elem.on('dblclick', '.' + ELEM_DATA + '>li', function(event){
|
||||
var elemThis = $(this)
|
||||
,thisElemCheckbox = elemThis.children('input[type="checkbox"]')
|
||||
@ -416,7 +416,7 @@ layui.define(['laytpl', 'form'], function(exports){
|
||||
that.transfer(thisBoxElem.data('index'), elemThis);
|
||||
})
|
||||
|
||||
//按钮事件
|
||||
// 穿梭按钮事件
|
||||
that.layBtn.on('click', function(){
|
||||
var othis = $(this)
|
||||
,_index = othis.data('index')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user