封装了几个lauyui常用的几个方法
消息提示弹出层
function layuiMsg(content,type){
layui.use('layer', function(){
var layer = layui.layer;
!type&&type!==0?layer.msg(content):layer.msg(content,{icon: type})
});
}
* content参数表示弹出消息的内容必选
* type表示风格类型(带icon)可选:0~6
使用方法如下:
layuiMsg('layuiLayer')
layuiMsg('layuiLayer',0)
layuiMsg('layuiLayer',6)
弹出层
/*
弹出层
*/
function layuiLayer(){
var args=arguments;
layui.use('layer', function(){
var len=args.length;
if(len>0){
for(var i=0;i<len;i++){
if(args[i]&&Object.prototype.toString.call(args[i])=='[object Object]'){
args[i].layer = layui.layer;
args[i].layer.open(args[i]);
}
}
}
});
}
* 一个参数,必须是对象
* 对象参数请移步layui官网
使用方法如下:
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>弹出层
</title
>
<link rel
="stylesheet" href
="layui/css/layui.css">
</head
>
<body
>
<button id
="btn">按钮
</button
>
<div id
="demo"></div
>
</body
>
<script src
="layui/jquery-1.8.3.min.js"></script>
<script src
="layui/layui.js"></script>
<script src
="layui/layuiPublic.js"></script>
<script
>
layuiForm
()
$
('#btn').on
('click',function(){
layuiLayer
({
type
:1,
title
:'新建',
btn
:['确定','取消'],
yes
:function(index
, layero
){
this
.layer
.close
(index
);
},
success
:function(){
console
.log(this
)
},
content
:'NIHAO'
})
})
</script>
</html
>
询问弹层
/*
询问弹层
*/
function layuiConfirm(){
var args=arguments;
layui.use('layer', function(){
var len=args.length;
if(len>0){
if(Object.prototype.toString.call(args[0])=='[object Object]'){
args[0].layer = layui.layer;
args[0].layer.confirm(args[0].content, {icon: args[0].icon||3, title:args[0].title||'提示',area:args[0].area||[],layer:args[0].layer}, args[0].fn);
}
}
});
}
使用如下:
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>layui二次封装
</title
>
<link rel
="stylesheet" href
="layui/css/layui.css">
<script src
="layui/layui.js"></script>
<script src
="layui/layuiPublic.js"></script>
</head
>
<body
>
<button id
="btn1">删除
</button
>
</body
>
<script src
="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script
>
layuiForm
()
$
('#btn1').click
(function(){
layuiConfirm
({
content
:'确定删除吗?',
title
:'删除',
area
:['100px','170px'],
fn
:function(index
){
console
.log(this
)
this
.layer
.close
(index
);
}
})
})
</script>
</html
>
*简单的配置了几个参数,其他的参数可以根据需要自行配置
消息提示吸附层
function layuiTip(content,idName,paositionType,blackground){
var paositionType=paositionType||1;
var blackground=blackground||'#000';
var zIndex=zIndex||21000000;
layui.use('layer', function(){
var layer = layui.layer;
layer.tips(content, '#'+idName,{tips: [paositionType,blackground],zIndex :zIndex});
});
}
* content:吸附层消息内容
* idName:id名字,如id="demo",idName就为demo
* paositionType:位置类型,1-4,可选,有默认值,可修改
* blackground:吸附层背景颜色,可选,有默认值,可修改
使用方法如下:
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>tip
</title
>
<link rel
="stylesheet" href
="layui/css/layui.css">
</head
>
<body
>
<input type
="text" id
="demo1">
</body
>
<script src
="layui/layui.js"></script>
<script src
="layui/layuiPublic.js"></script>
<script
>
layuiTip
('SSS','demo1')
//layuiTip('SSS','demo1',1)
//layuiTip('SSS','demo1',1,'#cc0a45')
</script>
</html
>
日期组件
function layuiDate(){
var args=arguments;
layui.use('laydate', function(){
var laydate = layui.laydate;
for(var i=0;i<args.length;i++){
if(args[i].elem&&Object.prototype.toString.call(args[i])=='[object Object]'){
laydate.render(args[i])
}else{
console.warn('Can not resolve the elem DOM.');
}
}
});
}
* 接收一个对象参数
* 对象的具体参数请移步layui官网
* 此方法可接收多个对象,一个对象就是一个实例
使用方法如下:
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>日期组件
</title
>
<link rel
="stylesheet" href
="layui/css/layui.css">
</head
>
<body
>
<div
class="layui-inline"> <!-- 注意:这一层元素并不是必须的
-->
<input type
="text" class="layui-input" id
="test1">
</div
>
<div
class="layui-inline"> <!-- 注意:这一层元素并不是必须的
-->
<input type
="text" class="layui-input" id
="test2">
</div
>
</body
>
<script src
="layui/jquery-1.8.3.min.js"></script>
<script src
="layui/layui.js"></script>
<script src
="layui/layuiPublic.js"></script>
<script
>
layuiDate
({
elem
:'#test1'
},{
elem
:'#test2'
})
</script>
</html
>
选项卡
function layuiElement(){
var args=arguments;
layui.use('element', function(){
var element = layui.element;
if(args[0]&&Object.prototype.toString.call(args[0])=='[object String]'){
args[1]?element.on(args[0],args[1]):element.on(args[0])
}else{
for(var i=0;i<args.length;i++){
if(args[i].type){
element.on(args[i].type,args[i].fn)
}else{
console.warn('Can not resolve the elem tab.');
}
}
}
});
}
* 单例 或 多例 使用
使用方法如下:
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>选项卡
</title
>
<link rel
="stylesheet" href
="layui/css/layui.css">
</head
>
<body
>
<div
class="layui-tab layui-tab-brief" lay
-filter
="demo1">
<ul
class="layui-tab-title">
<li
class="layui-this">网站设置
</li
>
<li
>用户管理
</li
>
<li
>权限分配
</li
>
<li
>商品管理
</li
>
<li
>订单管理
</li
>
</ul
>
<div
class="layui-tab-content"></div
>
</div
>
<div
class="layui-tab layui-tab-card" lay
-filter
="demo2">
<ul
class="layui-tab-title">
<li
class="layui-this">网站设置
</li
>
<li
>用户管理
</li
>
<li
>权限分配
</li
>
<li
>商品管理
</li
>
<li
>订单管理
</li
>
</ul
>
<div
class="layui-tab-content" style
="height: 100px;">
<div
class="layui-tab-item layui-show">1</div
>
<div
class="layui-tab-item">2</div
>
<div
class="layui-tab-item">3</div
>
<div
class="layui-tab-item">4</div
>
<div
class="layui-tab-item">5</div
>
<div
class="layui-tab-item">6</div
>
</div
>
</div
>
</body
>
<script src
="layui/jquery-1.8.3.min.js"></script>
<script src
="layui/layui.js"></script>
<script src
="layui/layuiPublic.js"></script>
<script
>
//单例使用
layuiElement
('tab(demo1)',function(res
){
console
.log(res
)
})
//多例使用
layuiElement
({
type
:'tab(demo1)',
fn
:function(res
){
console
.log(res
)
}
},{
type
:'tab(demo2)',
fn
:function(res
){
console
.log(res
)
}
})
</script>
</html
>
表单
function layuiForm(){
var args=arguments;
layui.use('form', function(){
var form = layui.form;
if(!args){form.render();return;}
if(Object.prototype.toString.call(args[0])=='[object String]'){
form.on(args[0],args[1])
}else{
for(var i=0;i<args.length;i++){
if(args[i].type){
form.on(args[i].type,args[i].fn)
}else{
console.warn('Can not resolve the elem tab.');
}
}
}
});
}
* 没有参数时就是简单的更新渲染作用
* 当有参数时,一个参数就是一个实例
* 单例或多例亦可
使用方法如下:
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>表单
</title
>
<link rel
="stylesheet" href
="layui/css/layui.css">
</head
>
<body
>
<form
class="layui-form" action
="">
<div
class="layui-form-item">
<label
class="layui-form-label">输入框
</label
>
<div
class="layui-input-block">
<input type
="text" name
="title" required lay
-verify
="required" placeholder
="请输入标题" 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" required lay
-verify
="required" placeholder
="请输入密码" autocomplete
="off" class="layui-input">
</div
>
<div
class="layui-form-mid layui-word-aux">辅助文字
</div
>
</div
>
<div
class="layui-form-item">
<label
class="layui-form-label">选择框
</label
>
<div
class="layui-input-block">
<select name
="city" lay
-verify
="required">
<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">
<label
class="layui-form-label">复选框
</label
>
<div
class="layui-input-block">
<input type
="checkbox" name
="like[write]" title
="写作">
<input type
="checkbox" name
="like[read]" title
="阅读" checked
>
<input type
="checkbox" name
="like[dai]" title
="发呆">
</div
>
</div
>
<div
class="layui-form-item">
<label
class="layui-form-label">开关
</label
>
<div
class="layui-input-block">
<input type
="checkbox" name
="switch" lay
-skin
="switch">
</div
>
</div
>
<div
class="layui-form-item">
<label
class="layui-form-label">单选框
</label
>
<div
class="layui-input-block">
<input type
="radio" name
="sex" value
="男" title
="男">
<input type
="radio" name
="sex" value
="女" title
="女" checked
>
</div
>
</div
>
<div
class="layui-form-item layui-form-text">
<label
class="layui-form-label">文本域
</label
>
<div
class="layui-input-block">
<textarea name
="desc" placeholder
="请输入内容" class="layui-textarea"></textarea
>
</div
>
</div
>
<div
class="layui-form-item">
<div
class="layui-input-block">
<button
class="layui-btn" lay
-submit lay
-filter
="formDemo">立即提交
</button
>
<button type
="reset" class="layui-btn layui-btn-primary">重置
</button
>
</div
>
</div
>
</form
>
</body
>
<script src
="layui/jquery-1.8.3.min.js"></script>
<script src
="layui/layui.js"></script>
<script src
="layui/layuiPublic.js"></script>
<script
>
//单例使用
layuiForm
('select',function(res
){
console
.log(res
)
})
//多例使用
layuiForm
({
type
:'radio',
fn
:function(res
){
console
.log(res
)
}
},{
type
:'switch',
fn
:function(res
){
console
.log(res
)
}
},{
type
:'checkbox',
fn
:function(res
){
console
.log(res
)
}
})
</script>
</html
>
数据表格
function layuiTable(){
var args=arguments;
layui.use('table', function(){
var table = layui.table;
for(var i=0;i<args.length;i++){
if(args[i].elem&&Object.prototype.toString.call(args[i])=='[object Object]'){
table.render(args[i])
}else{
console.warn('Can not resolve the elem DOM.');
}
}
})
}
使用方法如下:
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>数字表格
</title
>
<link rel
="stylesheet" href
="layui/css/layui.css">
</head
>
<body
>
<table id
="demo" lay
-filter
="test"></table
>
</body
>
<script src
="layui/jquery-1.8.3.min.js"></script>
<script src
="layui/layui.js"></script>
<script src
="layui/layuiPublic.js"></script>
<script
>
layuiTable
({
elem
: '#demo'
,height
: 315
,url
: '/demo/table/user/' //数据接口
,page
: true //开启分页
,cols
: [[ //表头
{field
: 'id', title
: 'ID', width
:80, sort: true, fixed
: 'left'}
,{field
: 'username', title
: '用户名', width
:80}
,{field
: 'sex', title
: '性别', width
:80, sort: true}
,{field
: 'city', title
: '城市', width
:80}
,{field
: 'sign', title
: '签名', width
: 177}
,{field
: 'experience', title
: '积分', width
: 80, sort: true}
,{field
: 'score', title
: '评分', width
: 80, sort: true}
,{field
: 'classify', title
: '职业', width
: 80}
,{field
: 'wealth', title
: '财富', width
: 135, sort: true}
]]
})
</script>
</html
>
分页
function layuiLaypage(){
var args=arguments;
layui.use('laypage', function(){
var laypage = layui.laypage;
for(var i=0;i<args.length;i++){
if(args[i].elem&&Object.prototype.toString.call(args[i])=='[object Object]'){
laypage.render(args[i])
}else{
console.warn('Can not resolve the elem DOM.');
}
}
})
}
* 一个对象参数就是一个实例
使用方法如下:
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>分页
</title
>
<link rel
="stylesheet" href
="layui/css/layui.css">
</head
>
<body
>
<div id
="test1"></div
>
<div id
="test2"></div
>
</body
>
<script src
="layui/jquery-1.8.3.min.js"></script>
<script src
="layui/layui.js"></script>
<script src
="layui/layuiPublic.js"></script>
<script
>
layuiLaypage
({
elem
: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
,count: 50 //数据总数,从服务端得到
},{
elem
: 'test2' //注意,这里的 test1 是 ID,不用加 # 号
,count: 50 //数据总数,从服务端得到
})
</script>
</html
></pre
>
<h2
>layuiPublic
.js
</h2
>
<pre
class="lang:js decode:true " >/*
layui方法二次封装
*/
/*
消息提示
*/
function layuiMsg
(content
,type
){
layui
.use('layer', function(){
var layer
= layui
.layer
;
!type
&&type
!==0?layer
.msg
(content
):layer
.msg
(content
,{icon
: type
})
});
}
/*
弹出层
*/
function layuiLayer
(){
var args
=arguments
;
layui
.use('layer', function(){
var len
=args
.length
;
if(len
>0){
for(var i
=0;i
<len
;i
++){
if(args
[i
]&&Object
.prototype
.toString
.call
(args
[i
])=='[object Object]'){
args
[i
].layer
= layui
.layer
;
args
[i
].layer
.open
(args
[i
]);
}
}
}
});
}
/*
吸附层
*/
function layuiTip
(content
,idName
,paositionType
,blackground
){
var paositionType
=paositionType
||1;
var blackground
=blackground
||'#000';
var zIndex
=zIndex
||21000000;
layui
.use('layer', function(){
var layer
= layui
.layer
;
layer
.tips
(content
, '#'+idName
,{tips
: [paositionType
,blackground
],zIndex
:zIndex
});
});
}
/*
日期组件
*/
function layuiDate
(){
var args
=arguments
;
layui
.use('laydate', function(){
var laydate
= layui
.laydate
;
for(var i
=0;i
<args
.length
;i
++){
if(args
[i
].elem
){
laydate
.render
(args
[i
])
}else{
console
.warn
('Can not resolve the elem DOM.');
}
}
});
}
/*
选项卡
*/
function layuiElement
(){
var args
=arguments
;
layui
.use('element', function(){
var element
= layui
.element
;
if(args
[0]){
element
.on
(args
[0],args
[1])
}else{
console
.warn
('Can not resolve the elem tab.');
}
});
}
/*
表单
*/
function layuiForm
(){
var args
=arguments
;
layui
.use('form', function(){
var form
= layui
.form
;
if(!args
){form
.render
();return;}
if(Object
.prototype
.toString
.call
(args
[0])=='[object String]'){
form
.on
(args
[0],args
[1])
}else{
for(var i
=0;i
<args
.length
;i
++){
if(args
[i
].type
){
form
.on
(args
[i
].type
,args
[i
].fn
)
}else{
console
.warn
('Can not resolve the elem tab.');
}
}
}
});
}
/*
表格
*/
function layuiTable
(){
var args
=arguments
;
layui
.use('table', function(){
var table
= layui
.table
;
for(var i
=0;i
<args
.length
;i
++){
if(args
[i
].elem
){
table
.render
(args
[i
])
}else{
console
.warn
('Can not resolve the elem DOM.');
}
}
})
}
/*
分页
*/
function layuiLaypage
(){
var args
=arguments
;
layui
.use('laypage', function(){
var laypage
= layui
.laypage
;
for(var i
=0;i
<args
.length
;i
++){
if(args
[i
].elem
){
laypage
.render
(args
[i
])
}else{
console
.warn
('Can not resolve the elem DOM.');
}
}
})
}
/*
基于Jq的公共请求方法
*/
function ajax
(opt
){
$
.ajax
({
url
:opt
.url
,
type
:opt
.type
||'POST',
async
:opt
.async
||true,
dataType
:opt
.dataType
||'json',
data
:opt
.data
||{},
success
:opt
.success
,
error
:opt
.error
})
}
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
😛 不错