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
<!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 开发模式的可行性」**

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

75
examples/form.html
View File

@ -11,14 +11,12 @@
<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">
<div class="layui-form-item">
<div class="layui-input-inline">
@ -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>
@ -262,11 +269,11 @@
<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,17 +344,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]">
@ -368,20 +390,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>

21
examples/table-test.html
View File

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

3
gulpfile.js
View File

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

2
package.json
View File

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

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

2
src/layui.js
View File

@ -15,7 +15,7 @@
}
,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;
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();
});

63
src/modules/form.js
View File

@ -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()
@ -343,9 +346,18 @@ 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);
});
@ -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,6 +725,11 @@ 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(){
@ -720,12 +738,13 @@ layui.define('layer', function(exports){
} 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;

28
src/modules/laydate.js
View File

@ -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 = '&#xe65a;';
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 = '&#xe603;';
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 = '&#xe602;';
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 = '&#xe65b;';
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
})
//滚动条定位

24
src/modules/laypage.js
View File

@ -30,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;
@ -54,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 且不能大于总页数
@ -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();

21
src/modules/slider.js
View File

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

29
src/modules/table.js
View File

@ -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: {
@ -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')
@ -1791,13 +1791,28 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
});
// 行工具条操作事件
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;
});
//同步滚动条

4
src/modules/transfer.js
View File

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