前端开发（layui框架）

写软件使用成熟的框架，这是很常见的事情。之前一直以为前端开发都是从0到1开发的，后来发现也不是。最早用bootstrap，以为前端只是一些美化的工作，等到后来学习layui，发现框架也可以实现前后端的数据交互，只要符合前端的格式要求就好了。layui就是这样一个框架。

1、layui下载

建议大家直接在github上查看，

GitHub - layui/layui: 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。 - GitHub - layui/layui: 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。https://github.com/layui/layui

2、学习教程

学习的教程很多，一方面是在线的网站，另外一方面是作者提供的example示例，

Layui 开发使用文档 - 入门指南https://layui.itze.cn/doc/index.html

3、最简单的demo程序

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>开始使用 Layui</title><link href="./layui/css/layui.css" rel="stylesheet"></head><body><!-- HTML --><script src="./layui/layui.js"></script><script>// 使用组件layui.use(['layer', 'form'], function(){var layer = layui.layer;var form = layui.form;// 欢迎语layer.msg('Hello World');});</script> </body>
</html>

如代码所示，这里面最重要的就是两个部分。第一个部分是引入layui.css文件，另外一个部分是layui.js部分。前者是为了美化用，后者是为了交互使用。

按照上面这个代码所示，如果没有什么意外的，你打开网页，会看到一个弹窗，

4、简单控件美化

layui支持的控件美化还是蛮多的。一般的导航、按钮、表单、表格、进度条、图标和时间线，这些都不是问题。使用者所要做的就是添加一个class选项就好了。

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

5、复杂控件的美化

如果是比较复杂的控件，那就需要写一点代码了。不过放心，也不是很多，就拿date举例，因为涉及到laydate模块，所以需要js先引用下，源代码是这样的，

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layDate快速使用</title><link rel="stylesheet" href="../src/css/layui.css" media="all">
</head>
<body><div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 --><input type="text" class="layui-input" id="test1">
</div><script src="../src/layui.js"></script>
<script>
layui.use('laydate', function(){var laydate = layui.laydate;//执行一个laydate实例laydate.render({elem: '#test1' //指定元素});
});
</script>
</body>
</html>

这样，打开网页后，你就会看到这样的结果，

当然，这里面的属性是可以不停修改的，比如可以设置年、月、日、时、分、秒，

//年选择器
laydate.render({ elem: '#test1',type: 'year'
});//年月选择器
laydate.render({ elem: '#test1',type: 'month'
});//日期选择器
laydate.render({ elem: '#test1'//,type: 'date' //默认，可不填
});//时间选择器
laydate.render({ elem: '#test1',type: 'time'
});//日期时间选择器
laydate.render({ elem: '#test1',type: 'datetime'
});

如果你愿意，想设置一下时间区间，只需要增加一个range:true选项就好，

当然，等到时间选择好后，就可以添加自己的回调函数了，

<script>
layui.use('laydate', function(){var laydate = layui.laydate;//执行一个laydate实例laydate.render({elem: '#test1' //指定元素,done: function(value, date){console.log("date=====>",date);console.log("value====>",value);}});
});
</script>

不出意外，在console窗口可以看到这样的内容打印，

其他的控件基本都是这样的操作方法，大家可以去试一试。

前端开发（layui框架）相关推荐

web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
Web前端开发的框架可以应用到哪些地方
随着时间的推移,网页设计越来越具有创新性.web前端开发将成为2020年技术领域最热门的学科之一.以前,前端空间的开发人员只要了解一些HTML,CSS,也许还有jQuery来创建交互式网站,就足够了. ...
开课吧：Web前端开发三大框架的特点
我们常说的前端三大框架是指:React.Vue.Angular.如果你想从事前端开发,那么是一定要学习框架的.框架可以帮助你更好的开发项目,提高工作效率,提升代码质量,在原有工作时长上,通过使用框架达 ...
前端开发UI框架选择---帮你解决忧愁
近几年随着 jQuery.Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇.不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了 ...
最实用的web前端开发知识框架图
1.分类所有知识框架,那肯定是一个结构型的展现,就是一棵树.web前端的知识点非常多,也非常散,需要好几层结构来组织这个体系,否则就会显得很乱.那么如何组织.把谁和谁放在一块儿?这是真正值得我们去思 ...
【博学谷学习记录】超强总结,用心分享丨前端开发:BootStrap框架基础用法
BootStrap 1.BootStrap简介 Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定HTML 结构及Java ...
2020年用于前端开发的顶级JavaScript框架
Front-end developers might know this game already: you type "top JavaScript frameworks" in ...
web前端开发新技术，CSS介绍
一.如何入门,学习建议在你开始入手学习前,有一些小的建议.根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的.还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的 ...
html标签之列表标签，前端开发资料分享
前言年前准备换工作,总结了一波面试最频繁的面试问题跟大家交流.此文章是关于浏览器的常见问题,大概面试10家遇到6家提问类似问题(主要是大厂和中厂).目前入职滴滴出行成都团队. 一.如何入门,学习建议 ...
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...

前端开发（layui框架）

前端开发（layui框架）相关推荐

最新文章

热门文章