Welcome to

Mr.Xiong

Home / LayUI / 国产黑马–LayUI前端框架使用

国产黑马–LayUI前端框架使用

一、前言

对于后台开发工程师来说,在写功能的时候总会遇到这样一个苦恼:没有专门的设计和前端人员去处理后台的页面!!!虽然自己也能整个界面出来,但是原始的界面太丑了,那么我想既不浪费时间又想把页面布置得赏心悦目一些,那咋整呢?还好,像LayUI、Bootstrap等框架应运而生!

二、LayUI、Layer、LayDate的关系

三、Layer通用型弹出层

1.简介

LayUI是一款近年来备受青睐的Web弹层组件,她具备全方位的解 决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有 丰富友好的操作体验。

在与同类组件的比较中,LayUI总是能轻易获胜。她尽可能地在以 更少的代码展现更强健的功能,且格外注重性能的提升、易用和实 用性,正因如此,越来越多的开发者将媚眼投上了LayUI(已被 5171079人次关注)。LayUI甚至兼容了包括 IE6 在内的所有主流 浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格, 每一种弹层模式各具特色,广受欢迎。

2.使用方法

下载地址(官网):http://layer.layui.com

a)在页面中引入jquery框架(1.8以上版本) ;

b)将下载包中的layer文件夹完整复制到项目中 ;

c)引入layer目录中的layer.js;

d)在需要的地方直接写效果代码就ok啦!详情见官网。

四、LayDate日期与时间组件

1.简介

LayDate 是LayUI 独立维护的三大组件之一,主要用来实现Web页 面中的日期与时间选择器组件效果。

2.使用方法

下载地址(官网):http://www.layui.com/laydate

a)将下载包中的laydate文件夹完整复制到项目中;

b)引入laydate目录中的laydate.js;

c)在需要的地方直接写效果代码就ok啦!详情见官网。

五、layUI经典前端模块化插件

1.简介

LayUI 是一款采用自身模块规范编写的情怀级前端UI框架,遵循原 生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外 在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码 到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。LayUI 首个版本发布于2016年金秋,她区别于那些基于MVVM底层 的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说, 她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复 杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从 这里信手拈来。

2.LayUI官网

官网地址:http://www.layui.com

官方文档:http://www.layui.com/doc/

3.LayUI使用方法

a)将下载包中的layui文件夹完整复制到项目中;

b)引入layui目录中的layui.js;

c)引入layui/css目录中的layui.css;

d)声明需要使用的模块和回调函数:

<script>

    layui.use(['layer', 'form'], function(){

    var layer = layui.laye,form = layui.form;

    //....... });

</script>

e)参照官方文档,选择自己要使用的效果就行啦!

Ok,挺晚了,就聊到这儿吧,有时候真希望一天有36个小时,思念一个人。。。

Finally,谢谢大家的阅读!祝每天开心~
版权声明:本文为博主原创文章,未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

雄心勃勃但谦卑温逊!

>> <<