Layui 使用记录

前言

在使用BootStrap开发项目的时候,想做一个消息弹框提示。比如我们点击button按钮的时候,提示弹框消失。搜了下bootstrap没有成型的插件可以做,之前用layui很方便的可以实现。

所以我们在引入bootstrap的同时也引入layui补充做一些bootstrap没有的功能,layui 因为是国产的,所以中文文档比较全。

当然我们用BootStrap和Layui都是为了使用它的组件和ui。就像我们用vue的elementui 一样

事实上 layui 的「模块化加载」十分适用于开发环境,它方便团队开发和代码调试。但对于「线上环境」,我们更推荐您采用「全模块加载」,即直接引入 layui.all.js,它包含了 layui 所有的内置模块,且无需再通过 layui.use() 方法加载模块,直接调用即可

Bootstrap和Layui 同时用会冲突吗?

不会冲突,因为都是ui组件。并且是通过添加class实现的,而Layui的class一般都是 layui开头的,和BootStrap不同,所以不会冲突。

官方文档

 layui: https://www.layui.com/doc/

layer: https://layer.layui.com/

注意: 看了下layui的官方文档,居然用他们官网的layuiadmin后台模板还需要收费,讨厌这种开源软件还收费的,因为之前看到 BootStrap的后台模板都没有收费。(看来国内的开源软件都想着怎么赚钱,老美的很多开源软件不收费是因为有基金会支持)所以要用layui只需要他们的组件就可以了,其他的不用看。

免费的Layui后台模板推荐

(1) https://gitee.com/lovetime/WeAdmin

(2)https://gitee.com/zhongshaofa/layuimini/tree/v2

bootStrap的后台模板推荐请前往:  https://knight.blog.csdn.net/article/details/109315121

layer组件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 非模块化方式引入 -->
<script src="layui-v2.5.7/layui/layui.all.js"></script>

<script> 
// 由于模块都一次性加载,可以不使用 layui.use() 来加载对应模块
$(function(){
    $("#dian").click(function(){
        layer.msg('保存成功');
    })
})

</script>
 
</head>
<body>
 
<button id="dian">点击</button>


</body>
</html>

表单提交

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
<script src="layui-v2.5.7/layui/layui.all.js"></script>


<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 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>
       
      <script>
      //Demo
      layui.use('form', function(){
        var form = layui.form;
        
        //监听提交
        form.on('submit(formDemo)', function(data){
          layer.msg(JSON.stringify(data.field));
          return false;
        });
      });
      </script
</body>
</html>

表格以及分页实现

使用插件: https://www.jq22.com/jquery-info20312

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>表格以及分页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="css/layui.css" type="text/css" rel="stylesheet">

</head>

<BODY>
			<!--以下为两个必须div元素-->
			<div id="table"></div>
			<div id="pageBar"></div>
	
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script language="Javascript" src="js/layui.js"></script>
<script language="Javascript" src="js/nicePage.js"></script>
<script LANGUAGE="javascript">
	//标准json格式 目前只支持[{a:b,c:d},{a:b,c:d}]此种格式
	var json = [{
		"id": "1",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "2",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "3",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "4",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "5",
		"name": "Tom",
		"age": "12"
	}, {
		"id": "6",
		"name": "Joy",
		"age": "13"
	}, {
		"id": "7",
		"name": "Tom",
		"age": "12"
	}];

	//nameList与widthList的数组长度要一致
	var nameList = ['序号', '姓名', '年龄'] //table的列名
	var widthList = [100, 100, 100] //table每列的宽度

	/**
	 * 初始化设置nicepage组件    v1.0
	 *-------------------------------------------------------------
	 * 进行数据组装,与layui交互进行元素渲染
	 *-------------------------------------------------------------
	 * @param    {string}  table     table的div id
	 * @param    {string}  bar     底部分页的div id
	 * @param    {int}  limit     每页默认行数
	 * @param    {string}  color     底部分页的颜色
	 * @param    {array}  layout     底部分页的布局,具体可参考layui api
	 */
	$(function () {
		nicePage.setCfg({
			table: 'table',
			bar: 'pageBar',
			limit: 5,
			color: '#1E9FFF',
			layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
		});
	}); //初始化完成
</script>

</html>

 

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值