关注前端 | 前端博客
当前位置: layui > layui二次封装常用方法

layui二次封装常用方法

2018-08-07 分类:layui 作者:管理员 阅读(2190)

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

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

赞(4) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
4

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 1 条评论 - layui二次封装常用方法

  1. 小罗 Windows NT Chrome 58.0.3029.81

    😛 不错

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线