layui框架

最新推荐文章于 2024-06-04 17:34:22 发布
最新推荐文章于 2024-06-04 17:34:22 发布
阅读量668 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CZM_886/article/details/79128529
版权

1、下载:  http://www.layui.com/

2、使用  

 src文件夹,全部拷贝到项目

 导入 layui.css和layui.js

 <link rel="stylesheet" type="text/css" href="../src/css/layui.css"/>
  <script src="../src/layui.js" type="text/javascript" charset="utf-8"></script>

 layui-开头、 <div class="layui-col-lg9"/>

3、layui模板: 

 <!DOCTYPE html>
 <html>
<head>
<meta charset="UTF-8">
<title>layui模板</title>
<!--导包-->
<link rel="stylesheet" type="text/css" href="../src/css/layui.css"/>
<script type="text/javascript" src="../src/layui.js" ></script>
</head>
 <body>

 </body>
 </html>

4、js对象,key 不用引号' " var jsObj = {username:"张三",age:18};     json json key 必须加引号

     {"title":"213123","password":"2313","city":"1","like[read]":"on","sex":"女","desc":""}

5、模块加载

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>layui模板</title>

<!--导包-->

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

<script type="text/javascript" src="../src/layui.js" ></script>

</head>

<body>

<button class="layui-btn" οnclick="del()">删除</button>

</body>

<script type="text/javascript">

function del(){

layui.use("layer",function(){

var layer = layui.layer;

// layer.open({

//  type: 1, 

//  icon: 5,

//  title: "删除",

//  content: '删除成功!!!',

//  area: ['300px', '200px'],

//  time: 2000,

//  offset: 'rb',

//  

// });

//iframe窗

layer.open({

 type: 2,

 title: false,

 closeBtn: 0, //不显示关闭按钮

 shade: [0],

 area: ['340px', '215px'],

 offset: 'rb', //右下角弹出

 time: 2000, //2秒后自动关闭

 anim: 2,

 content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条

 end: function(){ //此处用于演示

   layer.open({

     type: 2,

     title: '很多时候，我们想最大化看，比如像这个页面。',

     shadeClose: true,

     shade: false,

     maxmin: true, //开启最大化最小化按钮

     area: ['893px', '600px'],

     content: '//fly.layui.com/'

   });

 }

});

});

}

</script>

<!--<script type="text/javascript">

//加載需要使用的layui模块

layui.use("layer",function(){

var layer = layui.layer;

layer.open({

 type: 1, 

 content: '传入任意的文本或html' //这里content是一个普通的String

});

});

</script>-->

</html>

6、layui图标使用

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<!--导包-->

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

<script type="text/javascript" src="../src/layui.js" ></script>

</head>

<body class="layui-bg-blue">

<i class="layui-icon" style="font-size: 30px; color: red;">&#xe60c;</i>

<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>

<div οnclick="rotate(this)" style="width: 100px; height: 100px; margin: auto;" class="layui-bg-red layui-anim layui-anim-rotate"></div>

<br/>

<hr/>

<button class="layui-btn">

一个标准的按钮

<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe64a;</i> 

</button>

</body>

<script type="text/javascript">

// alert("111");

function rotate(divDom){

//layui加载模块

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

var $ = layui.$;

$(divDom).removeClass("layui-anim-rotate");

//延时

setTimeout(function(){

$(divDom).addClass("layui-anim-rotate");

},10);


});

}

</script>

</html>
7、layui表单的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui模板</title>
<!--导包-->
<link rel="stylesheet" type="text/css" href="../src/css/layui.css" />
<script type="text/javascript" src="../src/layui.js"></script>
</head>
<body>
<form class="layui-form" action="" method="get">
<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" lay-verType="tips">
</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>
</body>
</html>

8、layui框架

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<title>layout 后台大布局 - Layui</title>

<link rel="stylesheet" href="../src/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">

<!-- 左侧导航区域（可配合layui已有的垂直导航） -->

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

<dd>

<a href="javascript: void(0);" οnclick="forwardTo('../../lesson7-bootstrapvalidator/html/register1.html')">列表一</a>

</dd>

<dd>

<a href="javascript:;">列表二</a>

</dd>

<dd>

<a href="javascript:;">列表三</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="javascript:;">列表一</a>

</dd>

<dd>

<a href="javascript:;">列表二</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>

</div>

<!-- 内容主体区域 -->

<div class="layui-body">

<iframe id="centerFrame" src="https://www.baidu.com" width="100%" height="100%"></iframe>

</div>

<!-- 底部固定区域 -->

<div class="layui-footer">

© layui.com - 底部固定区域

</div>

</div>

<script type="text/javascript" src="../src/layui.js" ></script>

<script>

//JavaScript代码区域

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

var element = layui.element;

});

</script>

<script type="text/javascript">

var centerFrame = document.getElementById("centerFrame");

function forwardTo(path){

alert(path);

centerFrame.src = path;

}

</script>

</body>

</html>

CZM_886
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui框架
sinat_41920065的博客
05-22 1717
文章目录第一章：概述1.下载2. 使用方法(准备工作)第二章：页面元素1. 图标2. 按钮（引入jquery模块加按钮点击事件）3. 导航菜单（依赖element模块）4. 选项卡(依赖element模块）5. 进度条6.面板7. 布局8.徽章9.时间轴10.动画第三章：Layui模块1. 颜色选择器（引入colorpicker模块）2. 滑块（引入slider模块）3. 评分（引入rate模块)4. 轮播（引入carousel模块)5. 代码修饰器（引入code模块)6. 时间和日期选择器（引入layda
LayUI框架
来一杯Java咖啡
10-25 2万+
一、引言 1.1 介绍 LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端页面的制作变得更加简单，可以说是为后端人员量身定制的一款开源框架。 可是很遗憾的是，贤心大神因为各种因素吧，从官网迁走了 不过layui中的些许知识对我们而言还是挺好用的， 我们也可以通过镜像网站 Layui - 经典开源模块化前端 UI 框架layui 是一套开源的 Web UI 解决方案，其内部采用的是自身经典的模块化规范，并遵...
Layui：一款强大的前端UI框架
最新发布
m0_46413639的博客
06-04 743
在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。
LayUI框架示例整合
06-21
这个“LayUI框架示例整合”是为初学者提供的一份实践教程，旨在帮助小白快速上手LayUI，掌握其基本用法和常见功能。 LayUI的核心思想是模块化，它将页面元素如表格、表单、按钮、弹窗等封装成独立的模块，开发者...
layui框架与SSM前后台交互的方法
10-16
四、layui框架介绍layui是一个轻量级的前端组件库，它提供了丰富的UI组件和便捷的API接口，适用于后台管理系统界面开发。layui的主要特性包括：1. 高度模块化：layui的每个功能都封装成独立的模块，方便按需加载和...
ThinkPHP5+layui框架后台管理系统.zip
08-04
《深入理解ThinkPHP5与layui框架构建后台管理系统》 在当今的互联网开发环境中，高效、易用且功能强大的后台管理系统是企业级应用不可或缺的一部分。本系统基于ThinkPHP5框架和layui前端组件库，旨在提供一个稳定、...
详解如何在vue项目中使用layui框架及采坑
10-17
在Vue项目中集成layui框架可能遇到的挑战及解决方法 layui是一款流行的前端UI框架，它提供了丰富的组件和优雅的设计风格。然而，在Vue这样的现代前端框架中使用layui并不像在传统HTML页面中那样直接。本文将深入...
layui框架包.zip
03-18
layui框架是一款在中国广泛应用的前端UI框架，以其简洁、优雅、实用的设计理念深受开发者喜爱。它提供了丰富的组件和模块化设计，使得网页开发更加高效。在"layui框架包.zip"这个压缩文件中，包含了使用layui框架必...
webui框架layui
03-07
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
layui的框架导入
热门推荐
Andy_lau
05-26 2万+
目录：     1.导入步骤     2.框架包含的组件 1.导入步骤     1.1 下载框架包：http://www.layui.com/      1.2 将layer文件夹拷入项目位置     1.3 页面中导入layer.js和jq即可完成配置   2.框架包含的组件
php界面框架luy_GitHub - hiccphp/layui: 经典模块化前端UI框架
weixin_40009099的博客
12-21 229
经典模块化前端UI框架Layui 是一款带着浓烈情怀的前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。经典，因返璞归真近几年，尤其是今年，常常会听到猿们吐槽“现在想简简单单的写个前端怎么就变得这么难呢？”。的确，前端目前正处于一个超出常理，且疯狂造轮子的黄金时代，标准化的逐步设想与...
layui框架整理
funnyPython的博客
01-14 487
昨天在画方框的时候发现搞不定方框，想到之前团队里面有人用了layui.就直接用了一下。因为时间紧张，没有仔细看文档。解决遇到一堆的问题。。。 layui使用form表单实现post请求页面跳转 https://blog.csdn.net/souloflove21g/article/details/80346690 如果想用form表单进行post请求跳转，只能用这个方式了。所需要的参数在input里面加好，然后在上面做赋值就可以了。 window.location.href='url?param=' + p
Web 前端框架 Layui
程序员小白的博客
02-16 3457
Web 前端框架 Layui
layui框架 在线样例
09-17
Layui框架是一款轻量级、易于使用的前端UI框架，被广泛应用于Web开发中。它提供了丰富的UI组件和强大的功能，使得开发人员能够快速、高效地构建出美观、易用的界面。同时，Layui框架还具备响应式布局的特性，适配...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值