1. 模块化前端框架 Layui

Layui 是一款采用自身模块规范编写的 Ul 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛低，适合界面的快速开发；

2. 在 Web 项目中引入 Layui 框架

点击下载 layui 文件，将下载好的文件放到项目的目录中；使用 Layui 要引用这两个文件

./layui/css/layui.css
./layui/layui.js

注意： 若引用的 JS 文件时 layui.all.js，既是非模块化方式；
例子：使用 Layui 制作快显信息

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用 Layui 的 layer 模块做快显信息</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /><link rel="stylesheet" href="src/css/layui.css" /><script src="src/layui.js"></script></head><body><script>layui.use(['layer','form'],function(){// 以模块化方式加载相关模块// 创建两个模块 layer 和 ferm 的实例对象var layer=layui.layer,form=layui.form;layer.msg('Hello are you!');});</script></body>
</html>

3. 网页轮播特效

Layui 框架提供了很多的网页特效；
例子：用 Layui 制作一组图片的轮播效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> 用 Layui 的 carousel 模块实现图片自动轮播效果</title><link rel="stylesheet" href="../src/css/layui.css" media="all">        </head><body>       <div class="layui-carousel" id="s1"><div carousel-item><img src="../../time_2_1/image/01.png" width="100%"><img src="../../time_2_1/image/02.png" width="100%"><img src="../../time_2_1/image/03.png" width="100%"><img src="../../time_2_1/image/04.png"><img src="../../time_2_1/image/05.png" width="100%"> </div></div>      </body>
</html>
<script src="../src/layui.js"></script>  <script>layui.use('carousel', function(){  //加载轮播模块var carousel = layui.carousel;  /*carousel:旋转木马*/carousel.render({elem: '#s1',width: '100%', //设置容器宽度arrow: 'always' //单击左右箭头或下方的图片序号标识按钮实现手动控制});});</script>

4. 表格模块和分页模块的使用

Layui 框架提供了 laypage 模块，用来给二位表数据的分页显示；
例子：使用表格模块分页显示二维表数据

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> 用 Layui 的 table 模块分页显示二维表数据</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="../src/css/layui.css" media="all" /></head><body><table class="layui-hide" id="table_demo"></table></body>
</html>
<script src="../src/layui.js" charset="UTF-8"></script>
<script>layui.use('table',function(){// 加载表格模块 tablevar table=layui.table;table.render({// 展示已知数据elem:'#table_demo',cols:[[// 表格标题栏含有7个字段{field:'id',title:'ID',width:80,sore:true},{field:'username',title:'用户名',width:80},{field:'sign',title:'签名',Width:180},{field:'sex',title:'性别',width:80},{field:'city',title:'城市',width:100},{field:'scoure',title:'积分',width:80,sore:true}         ]],data:[{// 数组元素由8个 JSON 格式的键值对数据组成，{}内含有7个字段"id":"001","username":"杜某","sex":"男","city":"河南","sign":"人生是一段美好的旅程！","scoure":"686"},{"id":"002","username":"李某","sex":"男","city":"锦州","sign":"人生是一段美好的旅程！","scoure":"565"},{"id":"003","username":"王某","sex":"男","city":"山西","sign":"人生是一段美好的旅程！","scoure":"663"},{"id":"004","username":"华某","sex":"女","city":"河南","sign":"人生是一段美好的旅程！","scoure":"705"},{"id":"005","username":"张某","sex":"男","city":"浙江","sign":"人生是一段美好的旅程！","scoure":"160"},{"id":"006","username":"李某","sex":"男","city":"广东","sign":"人生是一段美好的旅程！","scoure":"186"},{"id":"007","username":"张某","sex":"女","city":"四川","sign":"人生是一段美好的旅程！","scoure":"246"}],page:true,   //是否显示分页limit:5     //每页显示的数量，默认为10});});
</script>

Layui 框架提供了 laypage 模块，给二维表数据做分页显示；
例子：分页导航设计

<!DOCTYPE html>
<html><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="../css/layui.css" media="all"/></head><body><ul id="city_list"></ul><div id="nav"></div></body>
</html><script src="../layui.all.js"></script>
<script>var data = [['广州','深圳','珠海'],['长沙','株洲','湘潭'],['郑州','洛阳','漯河'],['南昌','上饶','九江'],['武汉','黄石','荆州'],['福州','厦门','三明'],['杭州','常州','绍兴'],['南京','苏州','无锡'],['南宁','柳州','桂林'],['济南','青岛','烟台'],['贵阳','六盘水','遵义'],['昆明','曲靖','丽江']];  data.push(['石家庄','唐山','张家口'],['贵州','云南','北京']);  //oklayui.laypage.render({  //layui框架之分页组件laypageelem: 'nav',limit:5  //每页记录数，默认值为10   ,skin: '#1E9FFF' //自定义选中色值,count: data.length,jump: function(obj, first){var startNum = (obj.curr-1) * obj.limit;var endNum = startNum + obj.limit;var currentData = data.slice(startNum, endNum); console.log(currentData); //测试Console控件台输出layui.each(currentData, function (index, item) {currentData[index] = '<li>'+item[0]+'，'+item[1]+'，'+item[2]+'</li>';});document.getElementById('city_list').innerHTML = currentData.join('');if(!first){  //单击分页导航上的链接时layer.msg('第'+ obj.curr +'页', {offset: 'b'}); //页数效果显示}}});
</script>

Web 前端框架 Layui相关推荐

前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）
目录一.前言 1.什么是表格 2.表格的使用范围二.案例实现 1.案例分析 ①根据需求找到文档源码 ②查询结果在实体中没有该属性 2.dao层编写 ①BaseDao工具类 ②UserDao编写 3 ...
Angular 8.0.0-beta.5 发布，Web 前端框架
Angular 8.0.0-beta.5 发布了.Angular 是一款十分流行且好用的 Web 前端框架,与 React 和 Vue 并称前端三大框架/库,目前由 Google 维护. 更新内容如下 ...
Web 前端框架分类解读
Web前端框架可以分为两类: JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM)*** ...
几款常用的高质量web前端框架
Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析.都是个人意见,仁者见仁智者见智. QUICK UI Q ...
看一看：不同Web前端框架的优缺点分别是什么？
移动互联网的快速发展,多屏互动和多端兼容友好的界面成为目前所有系统重要的需求,Web前端开发工程师成为目前市场紧俏.火爆的人才.正在从事Web前端工作的小伙伴们一定不会对Web前端框架陌生,那么这么多 ...
国内5款优秀的WEB前端框架
1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...
2019年web前端框架排行
如果你是前端开发人员,当你开发一个新项目时,肯定会有人问过你,关于你使用什么框架的问题.然后就是各种源源不断的关于web前端技术的问题讨论.然而,对于新手的前端小白来说,估计这样的问题会引发一系列问题 ...
web前端框架Hui使用
最近在写SSM项目,没有太多时间去设计web前端,就想要学习使用web前端框架,在这里选择了Hui前端框架,以下是学习记录和心得. 1.下载前端框架网址:http://www.h-ui.net/ 2 ...
推荐一款自己常用的web前端框架
不知道现在大家使用的web前端框架都是什么?也许有人和我一样会想到jQuery,但今天给大家介绍的确实另外一款比较受欢迎的web前端框架,把我用的体验和大家分享一下,希望这款web前端框架能够被大家认 ...

Web 前端框架 Layui