当前位置:首页 > 技术文档 > 框架开发 > 正文内容

layuiAdmin快速入门

初始化引入

首先是下载文件,然后引入css和js文件。

引入之后就需要在<script>标签里面写代码了。layui里的js代码都需要在layui.use()里面写。


如果你想写form表单,那么在html里面复制代码之后,需要在js文件里面这样写:

layui.use('form', function() {
	let form = layui.form;
})


上面的代码就是准备工作,之后就能在页面里面看到内容了。如果你还想在这个页面里面加入表格,那么直接在use后面添加:

layui.use(['form', 'table'], function() {
	let form = layui.form;        
	let table = layui.table;
	            
	// 上面这种方式可以简写为:
	
	let form = layui.form,
	table = layui.table;
})


如果想使用Jquery,那么只要像上面那样引入jquery模块就好了,不必自己单独引入jquery文件了。但是想自己引入也没问题,页面只会加载一个jquery文件。像这样:

['form', 'table', 'jquery'], function() {
	let form = layui.form;        
	let table = layui.table,
	let $ = layui.$;
}


写完上述代码之后,就可以使用jquery了。


使用元素及属性


使用按钮。layui提供了一个按钮样式layui-btn,那么只要在class里面写入这个样式就可以了。

<button class="layui-btn">按钮</button>

// 这是一个button的按钮,如果想用<a>则:

<a href="" class="layui-btn" >


按钮还提供了大小和颜色,同样只需要添加对应的class类名就可以了。


使用表单。首先是有时候可能会刷新不出来表单内容,这时候需要在js代码里面添加:

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染


// 在更新的时候,有时候可能需要注意先后顺序的问题~


在html里面,只要父元素里面有layui-form的元素,都会把他们渲染为layui的样式。

比如说form表单,<form class="layui-form"></form>在这里的所有原始input/select等都会渲染为layui的样式。但是我如果不想用他们的样式,想要自己写样式,那么可以在里面添加lay-ignore,如

<input type="text" lay-ignore>


在表单验证方面,除了可以自己写正则表达式外,layui也提供了验证属性lay-verify

输入类型检测:required:必填项, phone:手机号,email:邮箱,url:网址,number:数字,date:日期,identity:身份证。

举例:

// 提交的时候只能输入数字

<input type="text" lay-verify="number">

// 提交的时候只能输入邮箱类型

<input type="text" lay-verify="email">

复杂的判断怎么弄呢?

我们需要先引用form模块

    layui.use('form',function()    {        var form = layui.form;        //自定义一个验证器
        form.verify({
            account:[            '正则'
            ,'提示语句'
            ]
            ,pass:[            '正则'
            ,'提示语句'
            ]
            
        });
        
    })

写完验证规则后,只需要把自己定义的名字,如上面的account写到lay-verify="account"里面就好了,那么对这个规则验证就弄完了。


form.on事件

form.on('event(lay-filter)',function(){
    
})

其中,event可以是radio,checkbox,submit等元素,其中的lay-filter就是我们加的事件过滤器属性值,比如:

<input type="submit" lay-filter="go" lay-submit value="提交"/>

对就是这个lay-filter=" "里面的值,只需要这俩个属性,就可以执行我们相应的事件了。

311199-20200322222825868-321197590.png




事件监听,这是一个非常有用的功能。比如说:监听select下拉框选中、submit提交等。使用方法为:

<select lay-filter="test">

form.on('select(filter)', function(data){     // 这里的filter应该为test
  console.log(data.value);   //得到被选中的值
});


// select 就是监听select  

// filter 就是select表单里面填写的过滤器的值


阻止表单跳转可以使用监听submit:

form.on('submit(*)', function(data){
  console.log(data.field)     // 当前容器的全部表单字段,名值对形式:{name: value}
  return false;     // 阻止表单跳转。如果需要表单跳转,去掉这段即可。
});

也可以使用jquery来获取submit,然后使用函数来return false。


表格。使用表格除了需要开始的声明外,表格里的内容都在table.render这里面写。如果有头栏的话,另外在 外面写table.on事件。

在表格里,使用select下拉框的时候,有时候会遮挡,当时使用了什么方法我忘了,虽然可以阻止上面一部分不被遮挡,但是表格最后几行的下拉框照样会被挡住。所以我选择了使用一个弹层来代替下拉框layer.open({type: 2}。这里同样需要先声明一下layer,然后才能使用。


图标。字体图标的话,我感觉官方文档提供的比较少,所以我还是推荐使用阿里的图标库,内容比较全。

注意事项

写函数的时候,有时候函数声明function test() {}会报错,可以使用这种方式

window.test = function() {}


或者函数表达式的方式

let test = function() {}


修改样式。肯定有需要自己修改样式的时候,但是我发现layui的样式写的很死,你写的样式根本“比不过”它。我有两种方法:

第一种是行内样式,简单粗暴。缺点就是写在html内部,不利于维护和过度的耦合。而且通过layui渲染出来的html内容是没法写入的!

第二种就是覆盖样式,通过f12 控制台的Elements选项卡里面复制它本身的类,然后在自己的css文件里面从新声明一次,在添上你自己的样式。这个方法亲测有效,就是比较麻烦。

使用layuiAmin模板的时候,左侧导航栏会发生很多问题,比如说全部打开,跳转页面返回后不关闭等等。


// 进入页面就给当前导航加上高亮

    window.addNavActive = function () {
        $('.layui-this').parents('li').addClass('layui-nav-itemed');
    }

    

// 跳转返回页面之后给导航加高亮

    window.returnAddActive = function (name) {
        $('.layui-nav-item').removeClass('layui-nav-itemed')
        $('dd[data-name=' + name + ']').parents('li').addClass('layui-nav-itemed')
        $('dd[data-name=' + name + ']').addClass('layui-this')
    };




扫描二维码推送至手机访问。

版权声明:本文由Znanr发布,如需转载请注明出处。

标签: layui
分享给朋友:

相关文章

tp5 框架使用笔记

tp5 框架使用笔记

tp5 开发流程下载源码框架 ——> 在application文件中新建对应的某块(如后台的首页admin、文章article) ——> 在application文件中对于的模块下建立co...

phpcms 更换模板的具体操作方法

phpcms 更换模板的具体操作方法

先分享下大概的步骤:1、上传模版文件到服务器;2、在站点管理 里边【模板风格配置】选择新模板;3、设置不同模型对应模板;4、修改现有的栏目,匹配新模板;5、更新栏目缓存、系统缓存,更新HTML静态页。...

织梦:Linux(CentOS)+Apache+PHP+MySQL服务器配置搭建

织梦:Linux(CentOS)+Apache+PHP+MySQL服务器配置搭建

1.前言CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照开放源代码规定释...

tp6  第一天

tp6 第一天

1、开启debug调试:找到app同级目录文件.example.env,更名为.env,另外在文件中要加上一句:APP_DEBUG = true,保存。2、在config目录下找到第一个app.php...

tp5入门笔记(1)

tp5入门笔记(1)

模板引用*打开根目录config.php文件,将应用试调模式打开ture'app_debug'  => false,改成true1、将模板的js、css、images放...

 tp5 运用过程中遇到的问题

tp5 运用过程中遇到的问题

一、代码更改但是页面刷新没变化   (关于TP5.1框架和php的缓存问题)     1、原因:tp5自有的缓存机制解决办法:将config中的 &#...