layui几个功能

最新推荐文章于 2022-04-22 14:41:00 发布
最新推荐文章于 2022-04-22 14:41:00 发布
阅读量384 收藏 5
点赞数
分类专栏： 小知识 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41912366/article/details/112451858
版权

后台布局(导航栏):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><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>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">系统管理</a>
          <dl class="layui-nav-child">
          <!-- data-url 定义点击后要显示的页面 -->
            <dd><a href="javascript:;" data-url="user.jsp">用户管理</a></dd>
            <dd><a href="javascript:;"  data-url="good.jsp">商品管理</a></dd>
          </dl>
        </li>
         
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;" class="pagenav">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script src="layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
   /* 使用layui内置的jquery */
  var $=layui.$;
   /* 给菜单添加点击事件 */
  $('dl.layui-nav-child>dd').click(function (){
	  /* 获取点击后的跳转页面url */
	  var url = $(this).find("a").attr("data-url");
	  /* 将URL部分内容显示在主体区域  */
	  $('.pagenav').load(url);
  })
  
});
</script>
</body>
</html>

数据表格(静态表格):

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        .layui-container{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="layui-container">
            <table class="layui-hide" id="test"></table>
    </div>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="layui/layui.all.js"></script>
<script>

    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','table'], function(){
        var element = layui.element;
        var table = layui.table;

        //展示已知数据
        table.render({
            elem: '#test'
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'username', title: '用户名', width: 120}
                ,{field: 'email', title: '邮箱', minWidth: 150}
                ,{field: 'sign', title: '签名', minWidth: 160}
                ,{field: 'sex', title: '性别', width: 80}
                ,{field: 'city', title: '城市', width: 100}
                ,{field: 'experience', title: '积分', width: 80, sort: true}
            ]]
            ,url:"./testServlet"
            /*,data: [{
                "id": "10001"
                ,"username": "杜甫"
                ,"email": "xianxin@layui.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "116"
                ,"ip": "192.168.0.8"
                ,"logins": "108"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10002"
                ,"username": "李白"
                ,"email": "xianxin@layui.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "12"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
                ,"LAY_CHECKED": true
            }, {
                "id": "10003"
                ,"username": "王勃"
                ,"email": "xianxin@layui.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "65"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10004"
                ,"username": "贤心"
                ,"email": "xianxin@layui.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "666"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10005"
                ,"username": "贤心"
                ,"email": "xianxin@layui.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "86"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10006"
                ,"username": "贤心"
                ,"email": "xianxin@layui.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "12"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10007"
                ,"username": "贤心"
                ,"email": "xianxin@layui.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "16"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10008"
                ,"username": "贤心"
                ,"email": "xianxin@layui.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }]*/
            ,skin: 'line' //表格风格
            ,even: true
            ,page: true //是否显示分页
            ,limits: [5, 7, 10]
            ,limit: 5 //每页默认显示的数量
        });
    });
</script>
</body>
</html>

后台数据格式必须是json格式，layui才会正常解析并自动分页展示

结合起来:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>

        .wrap{
   
            width: 1250px;
            margin: 0 auto;
            overflow: hidden;
        }

        .middle {
   
            width: 1240px;
            /*height: 3623px;*/
            margin-top: 15px ;
        }

        .pad {
   
            padding
最低0.47元/天 解锁文章
鸿钧道友
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui常用功能
weixin_30600197的博客
03-22 131
包含的主要样式： 验证不通过时的弹窗 弹窗修改信息 询问框（是否删除之类的） 操作成功提示、操作失败提示 加载样式（显示加载层） 文件下载请前往github over！over！over！ 转载于:https://www.cnblogs.com/yulongcode/p/10581018.html...
Layui常用功能整理
m0_53157173的博客
08-23 1013
Layui常用功能整理官网链接布局容器固定宽度（两侧有留白效果）完整宽度(占据屏幕宽度100%)栅格系统响应式规则列边距---设置范围 1 ~ 30 px列偏移---范围超过30px，建议使用列偏移列嵌套---列之间可以无限嵌套列按钮基本用法流体按钮(最大化铺满当前容器或者页面)图标按钮图标目前设置有两种方式导航参数解释垂直和侧边导航图片和徽章支持layui 2.6.6 新增导航可选属性/类面包屑导航选项卡选项卡风格设置简介风格卡片风格响应式---所有Tab风格都支持响应式，不需要手动设置带删除的选项卡静态
layui框架部分功能介绍
weixin_30883311的博客
05-21 146
注意；代码的所有功能都没有导入layui的css样式 一，分页功能 layui框架分页使用，其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介绍， 注意：传入的是页数不是数据库查询的条数 laypage的使用； 1 <div id="demo1"></div>//界面容器 2 ...
layer 的功能
weixin_30852451的博客
03-02 285
1.layer.alert() layer.alert('',{ title: "<div style='color:red;margin-left:20px;font-size:20px;text-align: center;font-weight:bold;width:100%'>重要通知</div>", content: 'hel...
fsLayui介绍(layui插件)
weixin_34310785的博客
12-12 554
fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载 码云下载 测试环境地址：http://fslayui.itcto.cn 为什么要使用fsLayui？ 传统的开发一般需要实现增删改查功能，每个功能都需要对应一个...
layUI实现列表查询功能
10-16
总的来说，layUI实现列表查询功能通常涉及以下几个关键步骤： 1. 初始化表格并指定数据源。 2. 配置列信息，包括字段、标题、宽度和排序等。 3. 实现搜索功能，通过`table.reload()`方法加载带有查询条件的数据。 4....
layui制作带进度条单选答题代码
07-14
在实际编码过程中，我们需要关注以下几个关键点： 1. 数据结构设计：定义一个数据结构来存储题目、选项和正确答案，这将方便我们渲染题目列表和处理用户选择。 2. 事件监听：使用layui的form模块监听用户的选择行为...
基于layui实现上传图片功能.zip
01-06
layui是一个流行的轻量级前端框架，它提供了丰富的组件来简化这类任务。本文将详细介绍如何基于layui实现上传图片的功能，包括图片预览、大小限制、文件类型限制以及图片删除。 首先，layui上传图片功能的核心在于`...
layui treegrid 分页
01-03
在“layui treegrid 分页”这个主题中，我们需要关注以下几个关键知识点： 1. **layui 框架**：layui 是一个全面的前端开发框架，包括了表格、表单、按钮、弹层、图标等多个组件，并且支持模块化加载，可以方便地与...
基于layui自定义表单组件
03-28
这涉及到以下几个知识点： 1. **前后端分离**：C#作为后端语言处理业务逻辑和数据操作，通过RESTful API向layui前端发送数据。前端则负责用户界面展示和交互。 2. **AJAX通信**：layui组件常利用JavaScript的AJAX...
layui的几个简单使用
weixin_34216036的博客
11-30 105
.加载效果 function layuiLoading(msg){ layui.use(['layer', 'form'], function(){ index = layer.load(0, {shade: false}); }); } .移除加载效果 function layuiRemoveLoading(){ ...
LayUI框架快速上手
Linlietao0587的博客
09-18 834
LayUI概述 和 Bootstrap 有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本 下载与结构 1.官网：https://www.layui.com/ 2.下载完成解压，我们看到目录结构 ├─css //css目录 │ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：） │ │ ├─laydate │
一些功能的layer:
bingqingsuimeng的专栏
04-16 496
一些功能的layer:splitting(把一个输入分成多个输出),类型:splitting在caffe.proto里为什么没有找到呢.它的作用就是把一个输入复制为多个输入哦； Flattening：类型为:Flatten偏平的意思,如 flattens an input of shape n * c * h * w to a simple vector output of shape n * (...
layui入门
m0_68879220的博客
04-22 1578
1.什么是layui layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交...
LayUI的安装及使用
weixin_52397329的博客
11-25 2266
LayUI 主要内容 LayUI 的安装及使用 LayUI 的介绍 ​ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 ​ 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成
Layui介绍（1）
Meaning_of_sugar的博客
08-05 3862
layui的基本使用 layui是什么？ layui(谐音：类UI)是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，使用门槛极低，拿来即用。其外在极为简单，非常适合界面的快速开发。layui区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。 兼容性 layui兼容人类正在使用的全部浏览器（IE6/I
layui的优缺点
Qianyingqwer的博客
07-30 3633
layui的优缺点 优点： LayUi作为一款国产开源的前端UI，简单易上手，并且UI简洁美观。本身目标对象是不怎么懂前端的后端开发人员，也适合后端人员使用。 （1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。 （2）layui是提供给后端开发人员最好的ui框架，基于DOM驱动，只要不涉及到交互layui还是很不错的 缺点：由于LayUi是个人开源的项目并且开源时间不长，因此bug会比较多，也会有一些限制。兼容性也不强，尤其是在移动端。不由于设计的初衷，LayUi
Layui功能布局
酸菜鱼的博客
06-06 2453
开发工具与关键技术：VS+MVC 作者：茅凯翔 撰写时间：2019年6月4日 很多页面都会用到轮播是吧！轮播用于展示一些广告、图片之类的。轮播可以自动的播放图片，也可以自动循环播放着里面的图片，在一些官网的主页面都会有轮播效果，用于展示这个网页新推出的东西，起到很好的宣传效果。通常的轮播都是通过js实现的，现在我来介绍一个快捷的方式（来自Layui的插件）。之前我就简单的介绍过Layui现在我来...
推荐几个LAYUI后台模板界面
最新发布
03-29
1. Layui Admin Pro：经典的Layui后台界面，适合各种管理系统。 2. Layuicms2.0：基于Layui框架的后台管理系统，拥有多种常用功能和组件。 3. Layui-Admin：简洁大气的Layui后台管理界面，适合管理系统和网站后台。 4. LayuiCMS：多功能的Layui后台管理系统，支持文章管理、分类管理、用户管理等常用功能。 5. Layuicms1.0：基于Layui框架的后台管理系统，拥有多种组件和功能，适合各种管理系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值