layui框架的简单使用

layui框架

1.使用

去官网下载文件，利用layui自己生成的css和js来使用

官网 Layui 开发使用文档 - 入门指南

引入layui.css

<link rel="stylesheet" href="./layui/css/layui.css">

引入layui.js

<script src="./layui/layui.js">

2.选项卡

导肮菜单可用于头部和侧边，tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

选项卡依赖加载组件：element(注意：必须加载element模块，相关功能才能正常使用)

2.1 layui.use()当时加载模块入口

layui.use(参数1，参数2)，参数1模块名，如果引入多个模块需要用"[]"来套入，例如：["jquery","element"]；参数2回调函数,

 layui.use(["element", "jquery"], function() {// jquery也被内置到layui中当作一个模块，导入模块即可使用var element = layui.element;var $ = layui.jquery;})

2.2 选项卡的删除

tab选项里卡简洁风格：

 <div class="layui-tab layui-tab-brief " lay-allowClose="true" lay-filter="binge"><ul class="layui-tab-title"><li class="layui-this" lay-id="网站设置">网站设置</li><li lay-id="用户管理">用户管理</li><li lay-id="权限分配">权限分配</li><li lay-id="商品管理">商品管理</li><li lay-id="订单管理">订单管理</li></ul><div class="layui-tab-content"><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></div>

通过追加class：layui-tab-brief 来设定简洁风格
lay-allowClose="true" 来允许Tab选项卡被删除，添加到tab选项卡的父元素中
lay-filter="任意字符"，事件过滤器(公用属性),跟选择器比较类似的。

2.3 id焦点定位

主要通过对选项卡设置属性 lay-id=”xxx"来作为唯一的匹配索引，以用于外部的定位切换。

element.on(filter,callback)：用于元素的一些事件触发，回调函数的参数data可以获取点击标签的标签内容
element.tabAdd(filter,options)：用于新增的一个Tab选项，参数filter：tab元素的 lay-filter="value" 过滤器的值（value）
element.tabChange(filter, layid);：用于外部切换到指定的Tab项上，参数同上，如： element.tabChange('demo', 'layid'); 切换选项卡，切换到 lay-id="yyy" 的这一项

    <div class="layui-tab layui-tab-brief " lay-allowClose="true" lay-filter="binge"><ul class="layui-tab-title"><li class="layui-this" lay-id="网站设置">网站设置</li><li lay-id="用户管理">用户管理</li><li lay-id="权限分配">权限分配</li><li lay-id="商品管理">商品管理</li><li lay-id="订单管理">订单管理</li></ul><div class="layui-tab-content"><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></div>
<!-- 左侧导航 --><ul><li><button>网站设置</button></li><li><button>用户管理</button></li><li><button>权限分配</button></li><li><button>商品管理</button></li><li><button>订单管理</button></li></ul>
<script>//注意：选项卡 依赖 element 模块，否则无法进行功能性操作layui.use(["element", "jquery"], function() {// jquery也被内置到layui中当作一个模块，导入模块即可使用var element = layui.element;var $ = layui.jquery;
// 给binge这个选项卡绑定点击事件element.on("tab(binge)", function(data) {console.log(data.elem);console.log("点击了binge选项卡", data.elem.context.innerText);var title = data.elem.context.innerText;// var btns = document.querySelectorAll("li button");// btns[data.index].style.backgroundColor = 'red';
var btn = $("li button").toArray().find(function(item) {return item.innerText == title});// 标记这个按钮$(btn).css("color", "red").parent().siblings().children().css("color", "black")
})


// 点击按钮,切换选项卡$("li button").each(function(index, btn) {btn.onclick = function() {// 判断选项卡有没有这一页，var bool = $(".layui-tab-title li").toArray().some(function(tab) {return tab.getAttribute("lay-id") == btn.innerText});
// 如果有这一页，就切换选项卡if (bool) {// 切换选项卡element.tabChange("binge", btn.innerText);} else {console.log("创建");element.tabAdd("binge", {title: btn.innerText,content: btn.innerText + "内容",id: btn.innerText});// 创建这一页之后，还要自动切过来element.tabChange("binge", btn.innerText)}$(btn).css("color", "red").parent().siblings().children().css("color", "black")}})})

3.表单

required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 ,也就是输入框为空，提示不能为空
autocomplete="off" ：是否自动补充，off为否
表单提交事件，依赖于form模块，所以提交之前必须加载form模块，并导入
form.on("submit(filter)",function(data){}) 表单数据被整理到data.field字段中，data.field是个对象，对象中存的是输入框所对应的name值作为对象的属性名，输入框输入的内容作为对象的属性值。
layui模块阻止表单的默认行为：return false，js原生阻止：e.preventDefault();

       layui.use(["form", "jquery"], function() {var form = layui.form;var $ = layui.jquery;form.on("submit(formDemo)", function(data) {// 表单数据被整理到data.field字段中//data.field是个对象，对象中存的是输入框所对应的name值当属性名，输入框的值为属性值console.log("表单提交的数据是，", data.field);// $.get("/login", function(data) {//     console.log(data);// })return false;})
})

4.导航

导航需要依赖element模块，必须加载element模块

    <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter=""><li class="layui-nav-item"><a href="">最新活动</a></li><li class="layui-nav-item layui-this"><a href="">产品<span class="layui-badge-dot"></span></a></li><li class="layui-nav-item"><a href="">大数据</a></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><!-- 二级菜单 --><dd><a href="">移动模块</a></dd><dd><a href="">后台模版</a></dd><dd><a href="">电商平台</a></dd></dl></li><li class="layui-nav-item"><a href="">社区</a></li></ul>
<script>layui.use("element", function() {var element = layui.element;})</script>

垂直导航需要追加class：layui-nav-tree
- 侧边导航需要追加class：layui-nav-tree layui-nav-side

5.表格

lay-skin="属性值" ，默认为行和列都有线，line行有线，row列有线，nob没有线

5.1 使用table模块进行数据交互

需要先加载table模块，然后再进行数据交互。在页面放置一个元素 <table id="demo"></table> ，然后通过 table.render() 方法指定该容器
- table.render({})中的属性：
- elem:指定原始table容器的选择器或DOM，方法渲染方式必填
- cols：设置表头。值是一个二维数组。
- url：数据接口
- page：true 开启分页
- limit：每页显示的条数（默认10）.值需对应limits参数的选项

       layui.use("table", function() {var table = layui.table;
// 动态渲染表格的内容，然后通过table.render()方法指定该容器table.render({elem: "#demo",height: 300,url: "./table.json",page: true,cols: [[{field: "name",title: "姓名"}, {field: "age",title: "年龄"}, {field: "sex",title: "性别"}, {field: "phone",title: "电话"}, ]]})})

cols表头信息：

field(String)：设定字段名
title(String)：设定标题名称
sort：true：排序

                cols: [[{field: "name",title: "姓名"}, {field: "age",title: "年龄"}, {field: "sex",title: "性别"}, {field: "phone",title: "电话"}, ]]

layui框架的简单使用相关推荐

使用Layui框架的简单web界面开发
使用Layui框架的简单web界面开发 Layui的简介优势框架的安装使用方法 Layui的简介 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/C ...
php layui 框架,快速上手前端框架layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 一.介绍在使用layui之前,我们先要了解一下la ...
修改layui框架html,layui框架如何设置分页？（方法介绍）
layui框架如何设置分页?下面本篇文章给大家介绍一下layui框架中设置分页的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 具体步骤如下: 1.从官方文档 - 内置模块 ...
layui框架的优缺点
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 由国人开发,16年出厂的框架,其主要提供了很多好看. ...
layui框架轮播图实现轮播图片自适应视口缩放
一点JS也不懂,利用layui现成的框架轮播组件,简单的实现了layui框架轮播图自适应视口而缩放效果. 以下是代码: <section><div class="layui ...
OA系统八：用户登录一：基于LayUI框架开发登录页；
本篇博客就需要明白三点: (1)前端的东西,贵在[没事多试试]:多试试,看看效果,反复多次,总能看到希望的效果啦.没什么意思,没必要每个细节都深记:在实际中遇到一个业务的时候,多看官方文档的例子,多试 ...
前端学习之LayUi框架基础
今天笔者学习了LayUi框架的一些基础内容,总体来说,LayUi框架比BootStrap框架更倾向于后台的搭建和使用,样式更加多样,说明也对国人更加友好,毕竟是国人开发的框架嘛~废话不多少,开始介绍. ...
layui框架的一些基本使用
目录 1.栅格系统 2.按钮 2.表单 3.表格 4.面板 5.时间线 6.选项卡 7.弹出层 8.数据表格 layui的优缺点以及使用layui前的准备优点: LayUi作为一款国产开源的前端UI ...
layui框架使用与代码编写
layui框架使用与代码编写一.layui增加操作工具列 ShowLeakList = ListPager.extend({init : function(container, primaryKey ...

layui框架的简单使用

layui框架

layui框架的简单使用相关推荐

最新文章

热门文章