首页 > 编程语言 > 详细

JavaWeb-LayUI框架的介绍与使用方式(前端框架篇)

时间:2021-01-18 23:45:36      阅读:4      评论:0      收藏:0      [点我收藏+]
LayUI
主要内容
LayUI 的安装及使用
LayUI 的介绍
? layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

? 由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本。

?

LayUI 的特点
(1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。

(2)layui是提供给后端开发人员的ui框架,基于DOM驱动。

下载与使用
在 官网首页 下载到 layui 的最新版。目录结构如下:

├─css // css目录
│ │─modules // 模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css // 核心样式文件
├─font // 字体图标目录
├─images // 图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay // 模块核心目录
│ └─modules // 各模块组件
│─layui.js // 基础核心库
└─layui.all.js // 包含layui.js和所有模块的合并文件
获得 layui 后,将其完整地部署(拷贝到项目中)到你的项目目录,你只需要引入下述两个文件:

./layui/css/layui.css
./layui/layui.js // 提示:如果是采用非模块化方式,此处可换成:./layui/layui.all.js
基本的入门页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- 你的HTML代码 -->

<script src="layui/layui.js"></script>
<script>
// 模块和回调函数
// 一般直接写在一个js文件中
layui.use([‘layer‘, ‘form‘], function(){
var layer = layui.layer
,form = layui.form;

  layer.msg(‘Hello World‘);
});

</script>
</body>
</html>
还需要声明需要使用的 模块 和 回调函数。参照官方文档,选择自己想要的效果就行。

比如:

<script>
// 注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use(‘element‘, function(){
var element = layui.element;

    //…
});

</script>
页面元素
布局
布局容器
固定宽度
将栅格放入一个带有 class=“layui-container” 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控。

<div class="layui-container">
<div class="layui-row">
……
</div>
</div>
完整宽度
可以不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中,那么宽度将不会固定,而是 100% 适应

<div class="layui-fluid">
……
</div>
栅格系统
? 为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 引进了一套具备响应式能力的栅格系统。将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格布局规则
采用 layui-row 来定义行,如:

<div class="layui-row"></div>
采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。其中:

变量 md 代表的是不同屏幕下的标记
变量 ***** 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12
如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)。

可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

可以在列(column)元素中放入你自己的任意元素填充内容

示例:

<h3>常规布局(以中型屏幕桌面为例):</h3>
<div class="layui-row">
<div class="layui-col-md9" style="background-color: #00F7DE;">
你的内容 9/12
</div>
<div class="layui-col-md3" style="background-color: rosybrown;">
你的内容 3/12
</div>
</div>
响应式规则
? 栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理。

超小屏幕 (手机<768px) 小屏幕 (平板≥768px) 中等屏幕 (桌面≥992px) 大型屏幕(桌面≥1200px)
.layui-container的值 auto 750px 970px 1170px
标记 xs sm md lg
列对应类 为1-12的等分数值 layui-col-xs layui-col-sm layui-col-md layui-col-lg*
总列数 12 12 12 12
响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列
<h3>平板、桌面端的不同表现:</h3>
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md4"
style="background-color: thistle">
平板≥768px:6/12 | 桌面端≥992px:4/12
</div>
</div>

<div class="layui-row">
<div class="layui-col-sm4 layui-col-md6"
style="background-color: mediumaquamarine;">
平板≥768px:4/12 | 桌面端≥992px:6/12
</div>
</div>

<div class="layui-row">
<div class="layui-col-sm12 layui-col-md8"
style="background-color: coral">
平板≥768px:12/12 | 桌面端≥992px:8/12
</div>
</div>
列边距
? 通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:

/ 支持列之间为 1px-30px 区间的所有双数间隔,以及 1px、5px、15px、25px 的单数间隔 /
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
示例:

<h3>列间距</h3>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4" >
<!-- 需要在layui-col-md4里面再加一层div -->
<div style="background-color: #009688;">
1/3
</div>
</div>
<div class="layui-col-md4">
<div style="background-color: burlywood;">
1/3
</div>
</div>
<div class="layui-col-md4">
<div style="background-color: silver;">
1/3
</div>
</div>
</div>
注:

  1. layui-col-space:设置后不起作用主要是因为设置的是padding,也就是说是向内缩,所以设置背景色padding也是会添上颜色,看起来好像没有间距一样。可以在里面在加一个div,来达到目的。
  2. 间距一般不高于30px,如果超过30,建议使用列偏移。
    列偏移
    ? 对列追加 类似 layui-col-md-offset 的预设类,从而让列向右偏移。其中 号代表的是偏移占据的列数,可选中为 1 - 12。
    ? 如:layui-col-md-offset3,即代表在“中型桌面屏幕”下,让该列向右偏移 3 个列宽度

<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4" style="background-color: rosybrown;">
4/12
</div>
<div class="layui-col-md4 layui-col-md-offset4"
style="background-color: cornflowerblue;">
偏移4列,从而在最右
</div>
</div>
? 注:列偏移可针对不同屏幕的标准进行设定,在当前设定的屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列。

列嵌套
? 可以对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素(layui-row),即可完成嵌套。

<h3>列嵌套</h3>
<div class="layui-row layui-col-space5">
<div class="layui-col-md5" style="background-color: thistle;">
<div class="layui-row">
<div class="layui-col-md3" style="background-color: burlywood;" >
内部列
</div>
<div class="layui-col-md5" style="background-color: indianred;">
内部列
</div>
<div class="layui-col-md4" style="background-color: mediumaquamarine;">
内部列
</div>
</div>
</div>
</div>
基本元素
按钮
用法
? 向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。

<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
主题
名称 组合
原始 class=“layui-btn layui-btn-primary”
默认 class=“layui-btn”
百搭 class=“layui-btn layui-btn-normal”
暖色 class=“layui-btn layui-btn-warm”
警告 class=“layui-btn layui-btn-danger”
禁用 class=“layui-btn layui-btn-disabled”
示例:

<!-- 不同主题的按钮 -->
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
尺寸
尺寸 组合
大型 class=“layui-btn layui-btn-lg”
默认 class=“layui-btn”
小型 class=“layui-btn layui-btn-sm”
迷你 class=“layui-btn layui-btn-xs”
<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button>
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>
圆角
layui-btn-radius

<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
图标
<button type="button" class="layui-btn">
<i class="layui-icon"></i> 添加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂ</i> 刷新
</button>
导航
? 导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边。面包屑结构简单,支持自定义分隔符。

? 依赖加载模块:element

实现步骤:

引入的资源

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
依赖加载模块

<script type="text/javascript">
// 注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use(‘element‘, function(){
var element = layui.element;

});

</script>
显示指定类型的导航

水平导航
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><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>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
垂直/侧边导航
<ul class="layui-nav layui-nav-tree" >
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</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="">移动模块</a></dd>
<dd><a href="">后台模版</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>
水平、垂直、侧边三个导航的HTML结构是完全一样的,不同的是:

水平导航:layui-nav
垂直导航需要追加class:layui-nav-tree
侧边导航需要追加class:layui-nav-tree layui-nav-side
导航主题
? 通过对导航追加CSS背景类,让导航呈现不同的主题色

<!-- 如定义一个墨绿背景色的导航 -->
<ul class="layui-nav layui-bg-move" >

</ul>
水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
垂直导航支持的其它背景主题有:layui-bg-cyan(藏青)

面包屑
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如:

<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
选项卡
? 导航菜单可应用于头部和侧边,支持响应式,支持删除选项卡等功能。

? 依赖加载模块:element

实现步骤
引入的资源

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
依赖加载模块

<script type="text/javascript">
// 注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use(‘element‘, function(){
var element = layui.element;

});

</script>
加载HTML

<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
选项卡风格
默认风格:layui-tab
简洁风格需要追加class:layui-tab-brief
卡片风格需要追加class:layui-tab-card
带删除的选项卡
可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除

<div class="layui-tab" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
表格
常规用法
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
基础属性
属性名 属性值 备注
lay-even 无 用于开启 隔行 背景,可与其它属性一起使用
lay-skin=“属性值” line (行边框风格)
row (列边框风格)
nob (无边框风格) 若使用默认风格不设置该属性即可
lay-size=“属性值” sm (小尺寸)
lg (大尺寸) 若使用默认尺寸不设置该属性即可
你所需要的基础属性写在table标签上,例如:

<!-- 一个带有隔行背景,且行边框风格的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
表单
? 依赖加载模块:form

在一个容器中设定 class=“layui-form” 来标识一个表单元素块

<form class="layui-form" action="">

</form>
基本的行区块结构,它提供了响应式的支持。可以换成其他结构,但必须要在外层容器中定义class=“layui-form”,form模块才能正常工作。

<div class="layui-form-item">
<label class="layui-form-label">标签区域</label>
<div class="layui-input-block">
原始表单元素区域
</div>
</div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
required:注册浏览器所规定的必填字段

lay-verify:注册form模块需要验证的类型

class=“layui-input”:layui.css提供的通用CSS类

下拉选择框
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
属性selected可设定默认项
属性disabled开启禁用,select和option标签都支持
<select name="city" lay-verify="">
<option value="010">北京</option>
<option value="021" disabled>上海(禁用效果)</option>
<option value="0571" selected>杭州</option>
</select>
可以通过 optgroup 标签给select分组
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市?</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号?</option>
<option value="你最喜欢的老师">你最喜欢的老师?</option>
</optgroup>
</select>
通过设定属性 lay-search 来开启搜索匹配功能
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
复选框
<h2>默认风格:</h2>
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>

<h2>原始风格:</h2>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title)
属性checked可设定默认选中
属性lay-skin可设置复选框的风格 (原始风格:lay-skin=“primary”)
设置value=“1”可自定义值,否则选中时返回的就是默认的on
开关
将复选框checkbox,通过设定 lay-skin=“switch” 形成了开关风格

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本 (两种文本用 “|” 隔开)
设置value=“1”可自定义值,否则选中时返回的就是默认的on
单选框
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
属性title可自定义文本
属性disabled开启禁用
设置value=“xxx”可自定义值,否则选中时返回的就是默认的on
文本域
<textarea name="remark" required lay-verify="required" placeholder="请输入个人介绍" class="layui-textarea"></textarea>
class=“layui-textarea”:layui.css提供的通用CSS类
组装行内表单
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="¥"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="¥"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
class=“layui-inline”:定义外层行内
class=“layui-input-inline”:定义内层行内
忽略美化渲染
? 可以对表单元素增加属性 lay-ignore 设置后,将不会对该标签进行美化渲染,即保留系统风格。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表单方框风格
? 通过追加 layui-form-pane 的class,来设定表单的方框风格。

<form class="layui-form layui-form-pane" action="">
<!--
内部结构都一样,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性(否则 会看起来比较别扭),如:
-->
<div class="layui-form-item" pane>
<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>
</form>
组件示例
弹出层
模块加载名称:layer,独立版本:layer.layui.com

使用场景
由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景 用前准备 调用方式

  1. 作为独立组件使用 如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。 通过script标签引入layer.js后,直接用即可。
  2. layui 模块化使用 如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js 通过layui.use(‘layer’, callback)加载模块
    作为独立组件使用 layer

<!-- 引入好layer.js后,直接用即可 -->
<script src="layer.js"></script>
<script>
layer.msg(‘hello‘);
</script>
在 layui 中使用 layer

layui.use(‘layer‘, function(){
var layer = layui.layer;

layer.msg(‘hello‘);
});
基础参数
type - 基本层类型

类型:Number,默认:0

可传入的值有:
0(信息框,默认)
1(页面层)
2(iframe层)
3(加载层)
4(tips层)
title - 标题

类型:String/Array/Boolean,默认:‘信息‘

title支持三种类型的值:
若传入的是普通的字符串,如 title :‘我是标题‘,那么只会改变标题文本;
若需要自定义样式,可以title: [‘文本‘, ‘font-size:18px;‘],数组第二项可以写任意css样式;
若你不想显示标题栏,可以 title: false;
content - 内容

类型:String/DOM/Array,默认:‘‘

content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM。
/ 信息框 /
layer.open({
type:0,
title:"系统消息",
// content可以传入任意的文本或html
content:"Hello"
});

/ 页面层 /
layer.open({
type:1,
title:"系统消息",
// content可以传入任意的文本或html
content:"<div style=‘height:100px;width:200px‘>Hello</div>"
});

/ iframe /
layer.open({
type:2,
title:"系统消息",
// content是一个URL,如果你不想让iframe出现滚动条,你还可以content: [‘url‘, ‘no‘]
content:"http://www.baidu.com"
// content:["http://www.baidu.com",‘no‘]
});

/ tips层 /
layer.open({
type: 4,
content: [‘内容‘, ‘#id‘] //数组第二项即吸附元素选择器或者DOM
});

area - 宽高

类型:String/Array,默认:‘auto‘

在默认状态下,layer是宽高都自适应的。
当定义宽度时,你可以area: ‘500px‘,高度仍然是自适应的。
当宽高都要定义时,你可以area: [‘500px‘, ‘300px‘]。
icon - 图标

注:信息框和加载层的私有参数。

类型:Number,默认:-1(信息框)/0(加载层)

信息框默认不显示图标。当你想显示图标时,默认层可以传入0-6。如果是加载层,可以传入0-2。
// eg1
layer.alert(‘酷毙了‘, {icon: 1});
// eg2
layer.msg(‘不开心。。‘, {icon: 5});
// eg3
layer.load(1); // 风格1的加载
示例

// eg1
layer.alert(‘很高兴见到你

JavaWeb-LayUI框架的介绍与使用方式(前端框架篇)

原文:https://blog.51cto.com/15064873/2596127

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号