Layui的一点小理解（上）
首先声明这是个人的一点理解，如有不对之处请指正，以下的例子有在官网上看到的，有的是自己写的。还是老规矩最后会附上官网的，如有不明白之处，请查看文档或留言。
既然说Layui，当然要简单的介绍以下什么是layui啊！下面是官方的解释：
Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui还很年轻，首个版本发布于2016年金秋，她区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道，准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互、从这里信手拈来。
Layui兼容除IE6/7以外的全部浏览器，并且多数结构支持响应式
其实说的简单点就是他是国产的，极其简单的一个框架。下面将会介绍几个简单的功能。及自己的心得。
他的引用是非常简单的，我选择的是在页面中直接引用下载下来的文件，只要引用CSS文件和JS文件即可。
<link rel="stylesheet" href="./css/layui.css" media="all">
<script src="./layui.js"></script>
路径请自行更改。其中引用的js需要说明一下，我现在引用的是全部的JS，也就是各个模块都有，不用单独的去选择。在官网下载的文件中有个JS的文件夹，里面有各个模块的JS，如果你只是应用了layui 的一个或少数几个模块，可以自己单独引入！请看一下代码：
<script><!--这个script需要写在你用layui的js之后-->
layui.use(['layer', 'laypage', 'element'], function() {//这里面layui.use（）是必须的，你要调用人家的东西，一定要遵守人家的规则；其中有两个参数，第一个是你要调用的模块，其中你调用的模块必须是你上面引用
//js中有的，如果你很懒，就和我一样，直接调用全部封装好的JS })；
</script>
可以看到我总共调用了三个模块，所以我要把它写在数组中，如果你仅仅是调用了一个模块，那么你可以不用数组，直接用引号引起来就可以了。而后咱们要写的代码就要写在function里面了。
layui.use(['layer', 'laypage', 'element'], function() {
var layer = layui.layer,
laypage = layui.laypage,
element = layui.element();
//向世界问个好
layer.msg('Hello World');
//监听Tab切换
element.on('tab(demo)', function(data) {
layer.msg('切换了：' + this.innerHTML);
});
//分页
laypage({
cont: 'pageDemo' //分页容器的id
,
pages: 12 //总页数
,
skin: '#008cee' //自定义选中色值
,
skip: true //开启跳页
,
jump: function(obj, first) {
if(!first) {
layer.msg(JSON.stringify(obj.curr));
}
}
});
});
这里主要是实现的三个功能，一个是弹窗提示，另外两个是监听tab切换和分页功能！其中的参数的作用在代码中已经标注，这里就不做详细的介绍了。
还有就是一个alert功能的弹窗，我把它封装成了一个函数。
function alert1() {
layer.open({
skin: 'demo-class',
type:1,//加上这句话才能点击多次的时候有效，否则第二次点击的时候不能正确的弹出
area: ["300px","200px"],//弹窗的大小
content: $('#img'),
//btnAlign: 'c'//控制下面两个按钮显示的位置
title: "这是弹出框的标题",
//btn: ['确定', '取消'],//这是弹出框的按钮
shadeClose:true,//点击遮罩层同样能关闭弹窗
yes: function(index, layero) {
//按钮【按钮一】的回调
console.log(JSON.stringify(layero))
layer.close(index);//点击确定之后，需要这句话才能关闭
},
btn2: function(index, layero) {
//按钮【按钮二】的回调
console.log(JSON.stringify(layero))
//return false 开启该代码可禁止点击该按钮关闭
},
btn3: function(index, layero) {
//按钮【按钮三】的回调
//return false 开启该代码可禁止点击该按钮关闭
},
cancel: function() {
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
}
你需要在你需要的地方调起函数就可以了。
介绍了这么多，发现少了一个地方就是HTML文档，所以就直接把所有的源码直接贴在下面，只要复制到本地，并且修改一下路径就可以了！
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui在线调试</title>
<link rel="stylesheet" href="./css/layui.css" media="all">
<style>
body {
margin: 10px;
} body .demo-class .layui-layer-title {
background: #c00;
color: #fff;
border: none;
} body .demo-class .layui-layer-btn {
border-top: 1px solid #E9E7E7
} body .demo-class .layui-layer-btn a {
background: #333;
} body .demo-class .layui-layer-btn .layui-layer-btn1 {
background: #999;
}
</style>
</head> <body>
<img id="img" style="display: none;" src="data:images/face/70.gif">
<blockquote class="layui-elem-quote">
温馨提示：如果最左侧的导航的高度超出了你的屏幕，你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可
</blockquote> <div class="layui-tab layui-tab-card" lay-filter="demo" style="height: 300px;">
<ul class="layui-tab-title">
<li class="layui-this">演示说明</li>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
在这里，你将以最直观的形式体验Layui！在编辑器中可以执行layui相关的一切代码。
<br>你也可以点击左侧导航针对性地试验我们提供的示例。
</div>
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
<div id="box_02">box_02</div>
<div id="pageDemo"></div> <script src="./layui.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
layui.use(['layer', 'laypage', 'element'], function() {
var layer = layui.layer,
laypage = layui.laypage,
element = layui.element(); //向世界问个好
layer.msg('Hello World'); //监听Tab切换
element.on('tab(demo)', function(data) {
layer.msg('切换了：' + this.innerHTML); }); //分页
laypage({
cont: 'pageDemo' //分页容器的id
,
pages: 12 //总页数
,
skin: '#008cee' //自定义选中色值
,skip: true //开启跳页
,
jump: function(obj, first) {
if(!first) {
layer.msg(JSON.stringify(obj.curr)); }
}
}); function alert1() {
layer.open({
skin: 'demo-class',
type:1,//加上这句话才能点击多次的时候有效，否则第二次点击的时候不能正确的弹出
area: ["300px","200px"],//弹窗的大小
content: $('#img'),
//btnAlign: 'c'//控制下面两个按钮显示的位置
title: "这是弹出框的标题",
//btn: ['确定', '取消'],//这是弹出框的按钮
shadeClose:true,//点击遮罩层同样能关闭弹窗
yes: function(index, layero) {
//按钮【按钮一】的回调 console.log(JSON.stringify(layero))
layer.close(index);//点击确定之后，需要这句话才能关闭
},
btn2: function(index, layero) {
//按钮【按钮二】的回调
console.log(JSON.stringify(layero)) //return false 开启该代码可禁止点击该按钮关闭
},
btn3: function(index, layero) {
//按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭
},
cancel: function() {
//右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭
}
});
}
$('#box_02').click(function() {
alert1();
})
});
</script>
</body> </html>
如果你还嫌麻烦，那么请下载我的百度网盘，直接下载解压，然后再浏览器直接查看效果就可以了！
密码：wza4
Layui的一点小理解（上）的更多相关文章
- net core体系-web应用程序-4net core2.0大白话带你入门-8asp.net core 内置DI容器（DependencyInjection，控制翻转）的一点小理解
asp.net core 内置DI容器的一点小理解 DI容器本质上是一个工厂,负责提供向它请求的类型的实例. .net core内置了一个轻量级的DI容器,方便开发人员面向接口编程和依赖倒置(IO ...
- asp.net core 内置DI容器的一点小理解
DI容器本质上是一个工厂,负责提供向它请求的类型的实例. .net core内置了一个轻量级的DI容器,方便开发人员面向接口编程和依赖倒置(IOC). 具体体现为Micorosoft.Extensio ...
- params数据来源和参数传递的一点小理解
今天是星期一,上次说的两个需求,解决了一个.在原来的页面增加了一个可以勾选的单选框用于完成,勾选对应的条件来渲染对应的页面,使用了简单的单选框radio_button来实现单选的提交,使用条件判断语句 ...
- 关于Vue的nextTick的一点小理解
官方文档表示:为了在数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即执行Vue.$nextTick(callback),这样回调函数就可以在数据变化之后立即执行. 这段话的意思是: 例如: ...
- 关于@Mapper和@Repository的一点小理解
参考博客:https://blog.csdn.net/lalioCAT/article/details/51803461 如果在接口上@Mapper,然后再在 xml中的namespace指向mapp ...
- Redis分布式锁的一点小理解
1.在分布式系统中,我们使用锁机制只能保证同一个JVM中一次只有一个线程访问,但是在分布式的系统中锁就不起作用了,这时候就要用到分布式锁(有多种,这里指 redis) 2.在 redis当中可以使用命 ...
- 关于win8开发的一点小总结
我今天做画面的时候,发现了一点小问题. 我在xmal文件里面加了一个CheckBox控件,设置IsChecked属性为True,并添加了Checked事件.Checked事件里面有对另外一个TextB ...
- 关于PHP魔术方法__call的一点小发现
好久没有上博客园写文章了,今晚终于有点空了,就来写一下昨天的一点小发现. 我自己所知,C++,Java的面向对象都有多态的特点,而PHP没有,但PHP可以通过继承链方法的重写来实现多态的属性.而魔术方 ...
- BUI Webapp用于项目中的一点小心得
接触BUI也有一段时间,也用在了移动端的项目开发中,总的来说,该框架用起来也挺灵活的,控件可以自由定制,前提是自己能认真地学习该框架的api,因为api里面说的东西比较详细,如果没有仔细看的,可能有些 ...
随机推荐
- 重磅消息：微信小程序支持长按二维码进入
之前微信小程序一般通过以下入口进入: 而用户经常使用“长按二维码”识别应用的功能一直未开放,据酷客多了解,微信安卓6.5.6内测版已经支持长按二维码识别和进入小程序,意味着把小程序二维码分享给朋友,或 ...
- Unity获取安卓手机运营商，电量，wifi信号强度，本地Toast，获取已安装apk，调用第三方应用，强制自动重启本应用
一个完整的游戏项目上线需要不断的完善优化,但是到了后期的开发不再仅仅是游戏了,它的复杂度远远大于纯粹的应用开发.首先必须要考虑的就是集成第三方SDK,支付这块渠道商已经帮你我们做好了,只需要按照文档对 ...
- 解读Laravel，看PHP如何实现Facade？
刚刚开始学Laravel就会接触到路由 Route::get('/', function () { return view('welcome'); }); 后来笔者一本正经的去读过Route类的代码, ...
- 使用shape来定义控件的一些显示属性
Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结 先看下面的代码: <shape> <!-- 实心 -- ...
- 浩哥解析MyBatis源码（一）——执行流程
原创作品,可以转载,但是请标注出处地址: 一.MyBatis简介 MyBatis框架是一种轻量级的ORM框架,当下十分流行,配合Spring+Spring MVC组成SSM框架,能够胜任几乎所有的项目 ...
- css的存在方式和选择器
css的存在方式 元素内联 页面嵌入 外部引入 元素内联 直接在html的标签中定义样式,类似于: <div style="属性1;属性2;属性3"><div&g ...
- 读书笔记 effective c++ Item 38 通过组合(composition)为 “has-a”或者“is-implemented-in-terms-of”建模
1. 什么是组合(composition)? 组合(composition)是一种类型之间的关系,这种关系当一种类型的对象包含另外一种类型的对象时就会产生.举个例子: class Address { ...
- 【Android 系统开发】CyanogenMod 13.0 源码下载 编译 ROM 制作 ( 手机平台 : 小米4 | 编译平台 : Ubuntu 14.04 LTS 虚拟机)
分类: Android 系统开发(5) 作者同类文章X 版权声明:本文为博主原创文章 ...
- 看Lucene源码必须知道的基本概念
终于有时间总结点Lucene,虽然是大周末的,已经感觉是对自己的奖励,毕竟只是喜欢,现在的工作中用不到的.自己看源码比较快,看英文原著的技术书也很快.都和语言有很大关系.虽然咱的技术不敢说是部门第一的 ...
- 使用Docker分分钟启动常用应用
前言 Docker是目前比较火的一个概念,同时也是微服务中比较关键的一个容器化技术.但是,单从理论上好难看出Docker的优势,因此,我希望在这篇文章中提供一些Docker的使用示例,希望从实际应用上 ...