layui的基本使用

最新推荐文章于 2022-09-20 17:50:32 发布
最新推荐文章于 2022-09-20 17:50:32 发布
阅读量1k 收藏 1
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhou_98/article/details/101852446
版权

首先进入官网： https://www.layui.com/，下载相应的文件

 

查看官方文档： https://www.layui.com/doc（书读百遍，其义自见）

具体使用

 

声明所需要使用的模块和回调函数

代码如下图：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

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

<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>

<title>Document</title>

<script>

layui.use(

['layer','form'],function(){

var layer=layui.laye,form=layui.form;

}

);

</script>

</head>

<body>

<!-- 图标 -->

<i class="layui-icon layui-anim layui-anim-scaleSpring layui-anim-loop">&#xe60c;</i>

<i class="layui-icon">&#xe677;</i>

<br>

<!-- 按钮 -->

<button type="button" class="layui-btn">一个标准的按钮</button>

<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

 

<br>

<!-- 按钮组 -->

<div class="layui-btn-group">

<button type="button" class="layui-btn layui-btn-sm">

<i class="layui-icon">&#xe654;</i>

</button>

<button type="button" class="layui-btn layui-btn-sm">

<i class="layui-icon">&#xe642;</i>

</button>

<button type="button" class="layui-btn layui-btn-sm">

<i class="layui-icon">&#xe640;</i>

</button>

<button type="button" class="layui-btn layui-btn-sm">

<i class="layui-icon">&#xe602;</i>

</button>

</div>

<br>

<br>

 

<!-- 表单 -->

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

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

 

 

<br><br><br>

<ul class="layui-nav">

<li class="layui-nav-item">

<a href="">控制台<span class="layui-badge">9</span></a>

</li>

<li class="layui-nav-item">

<a href="">个人中心<span class="layui-badge-dot"></span></a>

</li>

<li class="layui-nav-item">

<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>

<dl class="layui-nav-child">

<dd><a href="javascript:;">修改信息</a></dd>

<dd><a href="javascript:;">安全管理</a></dd>

<dd><a href="javascript:;">退了</a></dd>

</dl>

</li>

</ul>

<script>

layui.use('element',function(){

var element=layui.element

});

</script>

 

 

<br><br><br>

<span class="layui-breadcrumb">

<a href="">首页</a>

<a href="">国际新闻</a>

<a href="">亚太地区</a>

<a><cite>正文</cite></a>

</span>

<ul class="layui-nav" lay-filter="">

<li class="layui-nav-item"><a href="">最新活动</a></li>

<li class="layui-nav-item layui-this"><a href="">产品</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>

//注意：导航 依赖 element 模块，否则无法进行功能性操作

layui.use('element', function(){

var element = layui.element;

//…

});

layui.use('carousel', function(){

var carousel = layui.carousel;

//建造实例

carousel.render({

elem: '#test1'

,width: '100%' //设置容器宽度

,arrow: 'always' //始终显示箭头

//,anim: 'updown' //切换动画方式

});

//…

layui.use('laypage', function(){

var laypage = layui.laypage;

//执行一个laypage实例

laypage.render({

elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号

,count: 50 //数据总数，从服务端得到

});

});

});

</script>

<ul class="layui-nav layui-nav-tree" lay-filter="test">

<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->

<li class="layui-nav-item layui-nav-itemed">

<a href="javascript:;">默认展开</a>

<dl class="layui-nav-child">

<dd><a href="javascript:;">选项1</a></dd>

<dd><a href="javascript:;">选项2</a></dd>

<dd><a href="">跳转</a></dd>

</dl>

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

<li class="layui-nav-item"><a href="">大数据</a></li>

</ul>

 

<div class="layui-tab">

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

<div class="layui-progress">

<div class="layui-progress-bar" lay-percent="10%"></div>

</div>

 

<br><br><br>

<!-- 表格 -->

<table class="layui-table">

<colgroup>

<col width="150">

<col width="200">

<col>

</colgroup>

<thead>

<tr>

<th>昵称</th>

<th>加入时间</th>

<th>签名</th>

</tr>

</thead>

<tbody>

<tr>

<td>贤心</td>

<td>2016-11-29</td>

<td>人生就像是一场修行</td>

</tr>

<tr>

<td>许闲心</td>

<td>2016-11-28</td>

<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>

</tr>

</tbody>

</table>

<!-- 轮播图 -->

<br>

<br>

<div class="layui-carousel" id="test1">

<div carousel-item>

<div style="background:dodgerblue">条目1</div>

<div style="background:orange">条目2</div>

<div style="background:greenyellow">条目3</div>

<div style="background:pink">条目4</div>

<div style="background: darkgrey">条目5</div>

</div>

</div>

 

<br>

<br>

<div id="page">

 

</div>

 

</body>

</html>

测试效果如下：

zhouzhou_98
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui基本使用视频教程
08-01
此为layui基本使用视频教程百度云下载地址，如有问题可以按照文档里面联系本人
《layui宇宙版教程》：导航
来吧，学习！
08-16 366
1.9 导航 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。 注意：千万不要忘了加载element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如弹出二级菜单等，需借助element模块才能使用。 1.9.1 水平导航 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
大事件项目
weixin_55966654的博客
06-03 1968
0. 资源地址 线上 DEMO 项目地址：http://www.escook.cn:8086/ 项目的 API 文档接口地址： https://www.showdoc.cc/escook?page_id=3707158761215217 1. 项目前期的准备工作 1.1 初始化项目结构 将 素材 目录下的 assets 和 home 文件夹，拷贝到 code 目录下 在 code 目录下新建 login.html 和 index.html 页面 1.2 使用GitHub管理大事件的项目 在 co.
Layui的管理系统的模板
liulang68的博客
09-23 3117
这里的宽高如果觉得不合适就自己设置一下 <div class="layui-body"> <!-- 内容主体区域 --> <!-- <div style="padding: 15px;">内容主体区域</div> --> <iframe src="table3.html" id="demoAdmin" style="width: 100%; height: 600px;" frameborder="0"></..
layui常用方法总结
qq_44091061的博客
09-20 3688
layui常用方法总结
以页面模块(模块定义)为添加单位的DNN控制窗格（ControlPanel）
weixin_33958366的博客
08-08 148
我在《DNN数据库核心表结构及设计思路探研 》一文中说，DNN模块的添加实际上加的是一个桌面模块，当被添加的桌面模块不只一个模块定义时，添加后就产生好几个页面模块，即一个模块定义一为一个模块。为了添加模块以页面模块为单位，特将classic.ascx将作了部分修改，让他达到这样的目的。将在，模块右边添加一个Definition下拉框，当模块选了后，就在模块定义下拉框显示些桌面模块的所有模块定义，添...
layui使用vue的例子
06-13
layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
layui的使用示例.zip
12-06
layui是一款采用自身模块规范编写的前端 UI 框架。在此的示例仅仅展示了一下layUi的基本界面.
使用ssm基本框架，layui，ajax技术写出his系统
最新发布
06-27
使用ssm基本框架，layui，ajax技术写出his系统
springboot+jpa+Shiro+layui基本手脚架.zip
03-02
用springboot+jpa+Shiro+layui做了个权限管理系统的基本手脚架，可以在这个基础上快速开发
layui 图片上传 demo
LYR 的博客
02-26 822
效果： <!DOCTYPE html> <html lang="en"> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="renderer" content="web...
LayUI入门
oyang的博客
07-08 4181
什么是LayUI？LayUI简介,LayUI网址,layui、easyui与bootstrap的对比,二、LayUI下载,三、LayUI入门,LayUI依赖,引入LayUI,自定义LayUI模块,使用自定义LayUI模块,回顾JSON,LayUI登录基本功能,构建登录页面,实现登录功能,得到JSON数组字符串，得到字符串数组...
3. layui的layer的用法
热门推荐
大头鱼
08-08 1万+
1.初始化layui组件 2.信息提示框 3. 实现可输入框式弹窗的父子传值，页面关闭逻辑。如： 4. 关于layui中按钮，表单不显示问题？ 5. layui按钮实现点击开启显示隐藏表单
Layui用法总结
有空就记录一下
11-05 1870
layui笔记
layui use 定义js外部引用函数的方法
iam_syq的博客
11-01 2031
layui.use(['layer','form'],function(){ var layer = layui.layer, form = layer.form(); var Test = function(){ //不能被外部引用 console.log("call Test"); } window.Hello = f...
layui.use里面定义的方法外面怎么调用
浩星
08-11 4132
前言： layui.use里面定义的方法外面怎么调用 解决办法：方法内部加window //加了window后 可以被外部引用 window.uploadData= function(){ } 源码： layui.use(['layer', 'laypage', 'jquery', 'table''element', 'form'],function() { //这里是我们在layui.use中定义的变量和方法，都是不能再外面使用的 va...
layUI笔记
洛依尘的博客
02-16 763
layUI笔记 一、引言 1.1 介绍 官网：https://www.layui.com/ 在官网首页，可以很方便的下载LayUI LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端页面的制作变得更加简单。 二、环境搭建 2.1 下载 在官网即可完成下载 下载LayUI 2.2 导入依赖 下载的LayUI解压后，将其中的layui目录导入项目中 解压后的 layui目录 将layui目录放到项目的webapp目
layui的基本元素之一-----导航
water_java的博客
08-29 1765
layui的基本元素-----导航水平导航带徽章和图片的导航导航主题垂直导航菜单左侧导航默认面包屑自定义分隔符的面包屑用于门户频道的面包屑 导航：class=“layui-nav” 如果需要hover效果，或呼出二级菜单需加载element模块 水平导航 <fieldset class="layui-elem-field layui-field-title" style="margin-to...
layui 如何使用内部jQuery？
qq_34579060的博客
12-21 3206
由于Layui部分内置模块依赖jQuery，所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块（唯一的一个第三方模块）。只有你所使用的模块有依赖到它，它才会加载，并且如果你的页面已经script引入了jquery，它并不会重复加载。内置的jquery模块去除了全局的$和jQuery，是一个符合layui规范的标准模块。所以你必须通过以下方式得到： //主动加载jquery模...
layUI表格组件使用
06-01
LayUI 是一款轻量级的前端 UI 框架，提供了许多实用的组件，包括表格组件。使用 LayUI 的表格组件可以方便地实现数据的展示、排序、分页、筛选等功能。 以下是 LayUI 表格组件的使用步骤： 1. 引入 LayUI 的 CSS 和 JS 文件： ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script> ``` 2. 编写 HTML 代码，包含表格容器和表格结构： ```html <div class="layui-container"> <table class="layui-table" lay-data="{url: 'data.json'}" lay-filter="demo"> <thead> <tr> <th lay-data="{field:'id', width:80}">ID</th> <th lay-data="{field:'username', width:120}">用户名</th> <th lay-data="{field:'email', width:200}">邮箱</th> <th lay-data="{field:'sex', width:80, templet:'#sexTpl'}">性别</th> <th lay-data="{field:'city'}">城市</th> <th lay-data="{field:'sign', width:200}">签名</th> <th lay-data="{field:'experience', sort:true, width:120}">积分</th> <th lay-data="{field:'score', sort:true, width:120}">评分</th> <th lay-data="{fixed: 'right', width:150, toolbar: '#barDemo'}">操作</th> </tr> </thead> </table> </div> <!-- 表格数据模板 --> <script type="text/html" id="sexTpl"> {{# if(d.sex === 1){ }} 男 {{# } else if(d.sex === 2) { }} 女 {{# } else { }} 未知 {{# } }} </script> <!-- 表格操作模板 --> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> ``` 其中，`lay-data` 属性用来配置表格的数据源、列信息和事件监听器，`lay-filter` 属性用来标识表格实例的名称。 3. 初始化表格组件： ```javascript layui.use('table', function(){ var table = layui.table; // 监听表格操作事件 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ // 编辑操作 } else if(obj.event === 'del'){ // 删除操作 } }); // 渲染表格 table.render({ elem: '.layui-table', height: 500, page: true, url: 'data.json', toolbar: '#toolbarDemo', cols: [[ {field:'id', width:80, title: 'ID'}, {field:'username', width:120, title: '用户名'}, {field:'email', width:200, title: '邮箱'}, {field:'sex', width:80, title: '性别', templet:'#sexTpl'}, {field:'city', title: '城市'}, {field:'sign', width:200, title: '签名'}, {field:'experience', width:120, title: '积分', sort:true}, {field:'score', width:120, title: '评分', sort:true}, {fixed: 'right', width:150, align:'center', toolbar: '#barDemo', title: '操作'} ]] }); }); ``` 其中，`table.render` 方法用来初始化表格实例，配置表格的相关属性，如数据源、列信息、分页、排序等。`table.on` 方法用来监听表格的操作事件，如编辑、删除等。 以上就是 LayUI 表格组件的基本使用方法。需要注意的是，表格组件还支持更多高级功能，如多级表头、自定义列、批量操作等，可以参考官方文档进行使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值