layui 使用

1.下载后解压如图

2.示例

home.thml代码

<!DOCTYPE html>
<html>
<!-- head -->
<head>
  <meta charset="utf-8">
  <title>layui</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 rel="stylesheet" href="../layui/css/layui.css"  media="all">

  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>

<body>

<!-- 导航栏 -->
<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" lay-unselect="">
    <a href="javascript:;"><img src="../layui/images/face/63.gif" 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 type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
<!-- 内容 -->

<!-- 表格-->
<table class="layui-hide" id="test"></table>

<!-- -->
<div class="layui-tab layui-tab-brief" lay-filter="demo">
  <ul class="layui-tab-title">
    <li id="idli1" class="layui-this">演示说明</li>
    <li id="idli2">日期</li>
    <li id="idli3">分页</li>
    <li id="idli4">上传</li>
  </ul>

</div>

<script>
layui.use([‘laydate‘, ‘laypage‘, ‘layer‘, ‘table‘, ‘carousel‘, ‘upload‘, ‘element‘], function(){

  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作

  //向世界问个好
  //layer.msg(‘Hello World‘);

  //监听Tab切换
  element.on(‘tab(demo)‘, function(data){
    //debugger;
    layer.msg(‘切换了：‘+ this.innerHTML);
    //var tt = this.getAttribute("id");
    //layer.msg(tt);
    console.log(data);
  });

  table.render({
    elem: ‘#test‘
    ,url:‘/demo/table/user/‘
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:‘id‘, width:80, title: ‘ID‘, sort: true}
      ,{field:‘username‘, width:80, title: ‘用户名‘}
      ,{field:‘sex‘, width:80, title: ‘性别‘, sort: true}
      ,{field:‘city‘, width:80, title: ‘城市‘}
      ,{field:‘sign‘, title: ‘签名‘, width: ‘30%‘, minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:‘experience‘, title: ‘积分‘, sort: true}
      ,{field:‘score‘, title: ‘评分‘, sort: true}
      ,{field:‘classify‘, title: ‘职业‘}
      ,{field:‘wealth‘, width:137, title: ‘财富‘, sort: true}
    ]]
  });
});
</script>

<!-- 尾部 -->

</body>
</html>

原文地址：https://www.cnblogs.com/youdream/p/8969240.html

时间： 2024-11-03 22:07:18

layui 使用的相关文章

layUI独立组件layer-laydate-laypage项目实践用法

layUI官网:http://www.layui.com/ 有以下四个独立组件(可单独使用): 弹出层组件layer链接:http://layer.layui.com/ 日期组件laydate链接:https://www.layui.com/laydate/ 分页组件laypage链接:https://www.layui.com/laypage/ 轻量的JavaScript模板引擎laytpl链接:https://www.layui.com/laytpl/(暂未使用) 项目中实践用法汇总项目技

layui中的layer使用

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <title

layer/layui弹出层插件bug

<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn" type="submit">立即提交</button> 使用layer/layui弹出层插件,type="submit"时,弹出层失效,改为type="button"时正常弹出;

react + layui 坑总结

与react 结合的时候,layui 是纯dom操作,而react是虚拟dom ,二者的结合难免会出现诸多问题. 1 select 下拉框默认值的修改要通过defaultValue 属性来修改,并且通过componentDidMount 来重新渲染from.render(), 而且渲染到页面中,不是data开头的属性,react 不会加载该属性.只能通过componentDidMount 中重新增加属性. 如: export const LanguagePairs = React.create

【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解

SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 Layui 个人而言不喜欢引用一堆东西,越简洁越好,layui正好能够满足我的这种需求,它是一款轻量级UI,JS部分都是采用模块化设计(AMD) ,对移动端支持比较不错. 唯一不足是目前支持的组件有些少,需要有一定前端扩展能力的人才可以顺心使用. 用法: 例如我想用form.js和uploda.j

前端框架layui

可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可,无需引入jQuery和layer.js,但需要引入layui.css和layui.js基础参数:layer.open({content: ''})layer.msg('', {time: 3}) type参数:layer提供了5种层类型.可传入的值有:0(信息框,默认)1(页面层)2(iframe层

layui.js源码分析

/*! @Title: Layui @Description:经典模块化前端框架 @Site: www.layui.com @Author: 贤心 @License:MIT */ ;!function(win) { "use strict"; var Lay = function() { this.v = '1.0.9_rls'; //版本号 }; Lay.fn = Lay.prototype; var doc = document, config = Lay.fn.cache = {

layui前端框架

项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹出层特效(可以移动) html代码要给这个标签绑定click方法 1 <a href='javascript:;' data-method='offset' data-type='auto' class='showMean'>显示</a> 点击以后,显示这个页面 1 <div class="con-no-ma displayNo" id="con-no-ma">

layui常用方法

很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: 1, title: false, //不显示标题 content: 'hehe', //捕获的元素 area: ['400px', '200px'], //宽高 //scrollbar: false, cancel: function(index) { layer.close(index); } });

layui发送手机验证码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登入</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta n