layui二次封装常用方法

2018-08-07 分类：layui 作者：管理员阅读（2715）

封装了几个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>

*简单的配置了几个参数，其他的参数可以根据需要自行配置

消息提示吸附层

* 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>

日期组件

* 接收一个对象参数
* 对象的具体参数请移步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>

选项卡

* 单例或多例使用

使用方法如下：

<!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>

表单

* 没有参数时就是简单的更新渲染作用
* 当有参数时，一个参数就是一个实例
* 单例或多例亦可

使用方法如下：

<!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>

数据表格

使用方法如下：

<!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>

分页

* 一个对象参数就是一个实例

使用方法如下：

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

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(4) 打赏