【layui】layer弹出层的icon数字效果

最新推荐文章于 2023-08-04 11:12:40 发布

原创

最新推荐文章于 2023-08-04 11:12:40 发布 · 575 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui

layui作为一款流行的UI框架，其组件丰富且易于上手，但文档示例缺乏效果展示。在使用layer弹出层时，icon样式可通过传入0-6的数字来设置，具体图标与数字的对应关系文中会详细说明。

layui是一款比较优秀的UI框架，组件丰富，上手比较简单，但是官方文档有一些缺陷，值得一提的是示例只有代码，很少有效果展示，对于使用者来说不知道最终效果符合自己的要求。个人觉得从专业程度来说不如Element-UI和AntDesign 的ng-zorro-antd。

layui官方文档：layui - 经典模块化前端 UI 框架

layer的icon样式

icon如果在信息提示弹出层值(type为0)可以传入0-6，icon与图标对应关系如下：

icon	含义	图标	示例
0	感叹		layer.msg('操作成功!', {icon: 0});
1	正确

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

&蚂蚁

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端框架layui之layer弹出层学习笔记

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过优快云记录学习心得和笔记内容。

05-15

1972

layui框架中layer弹出层。引入js文件和对应模块：首先引入模块化组件的js文件：  <script type="text/javascript" src="../layui/layui.js"></script> 注意：上面的文件路径写自己的路径。然后通过模块化方式，使用lay...

【layui】layer弹出层嵌套调用问题

MoFe1的博客

05-09

2481

//首次调用 layer.open({ type: 2, title: '打印', content: '/Account/AddPrintInfo?cardId=' + data.Base_CardId, area: ['90%', '30%'], success: f.

参与评论您还未登录，请先登录后发表或查看评论

浅谈layer的Icon样式以及一些常用的layer窗口使用方法

12-07

本文搜集的是本人在实际开发中所用到的layer窗口，未用到的layer按钮，请参考layer官网：http://layer.layui.com/ 一、layer的icon样式以上样式测试代码： layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){ //do something alert("确认"); layer.close(index); }); 二、询问框官方案例： //询问框 layer.confirm('您是如何看待前端开发？', { btn: ['重要','奇葩'] //按钮 }, funct

layui 数菜单插件

06-14

功能说明：（详细使用方式在下面的文档中） 1、常规tree，无层级限制； 2、增加checkbox复选框； 3、两种数据绑定方式，json数组/异步数据接口，优化了数据格式； 4、节点默认选中状态； 5、节点是否可用； 6、父级节点拥有其子级节点全选功能； 7、父级节点监听子级节点选中状态，并更改自身状态； 8、加载等待提示； 9、加载完毕后的初始展开状态； 10、三种节点图标样式自定义设置，取自layui图标； 11、三种节点图标颜色自定义配色； 12、全选框； 13、全选框状态更改触发的监听事件自定义； 14、节点状态更改的监听事件自定义（节点点击事件，不包含全选框）； 15、可自动撑起容器高度，容器最小高度100px； 16、解决单页面多个xtree冲突的问题； 17、如layui一样简单的使用方式；提供四种方法： 1、获取全部[选中的][末级节点]原checkbox DOM对象，返回Array 2、获取全部原checkbox DOM对象，返回Array 3、通过value值找父级DOM对象，顶级节点与错误值均返回null 4、更新数据，重新渲染，无返回值

Layui 弹出层模块

QwQ_HGC的博客

09-18

523

Layui 弹出层模块使用场景由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。作为独立组件使用：如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。调用方式：通过script标签引入layer.js后，直接用即可。 layui 模块化使用：如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer

layer的Icon样式以及一些常用的layer窗口使用

热门推荐

benmin1的博客

06-28

1万+

转载地址：http://blog.youkuaiyun.com/beauxie/article/details/60959971 本文搜集的是本人在实际开发中所用到的layer窗口，未用到的layer按钮，请参考layer官网：http://layer.layui.com/ 一、layer的icon样式以上样式测试代码： [javascript] view pla

layui之layer弹出层的icon数字及效果展示

滴水石穿

08-04

2135

layer的icon样式。

layui的layer弹出层内置方法

weixin_44665610的博客

08-15

3947

基础参数文章目录基础参数layer.config(options) - 初始化全局配置layer.ready(callback) - 初始化就绪layer.open(options) - 原始核心方法layer.alert(content, options, yes) - 普通信息框layer.confirm(content, options, yes, cancel) - 询问框layer.m...

解决layer弹出层msg的文字不显示的问题

10-16

本文将深入探讨在使用layer弹出层时遇到的msg文字不显示问题及其解决方案。问题描述：在尝试使用layer弹出层进行消息提示时，发现msg中的文字并未正常显示，而是空白。经过排查，发现是由于CSS样式设置导致文字...

jquery.spinner一款jquery数字智能加减插件

10-30

jquery.spinner一款jquery数字智能加减插件

layer的icon效果

zongmaomx的博客

03-13

285

官方文档只给了说icon可以1-6，loading可以0-2，但具体效果没展示，所以写个笔记记录一下 layer.msg('layer的icon格式',{icon:1}) layer.msg('layer的icon格式',{icon:2}) layer.msg('layer的icon格式',{icon:3}) layer.msg('layer的icon格式',...

layui中弹出层出现数据表格

weixin_52057887的博客

08-11

2782

layui中的弹出层出现数据表格 function popup(result) { layui.use('table', function () { var table = layui.table; layer.open({ type: 1, area: ["700px", '430px'], tit

layui弹出层：使用icon图标小结

草巾冒小子的博客

08-09

2938

文章目录layui弹出层：icon图标小结表格示下：调用代码 · 效果图 · 示下： layui弹出层：icon图标小结 layui的弹框插件layer中，有很多不同场景需要的弹框icon图标，今天小结一下，方便以后使用；官方文档地址：https://layer.layui.com/ 表格示下： icon截图 · 说明建议场景 icon: 调用代码调用代码示例 1 默认：无图标任意默认：无需设置默认：无需设置 2 警示提醒类 0 icon: 0 3

layui 数字步进器_动画

weixin_31009269的博客

01-13

562

css@import url("https://fonts.googleapis.com/css?family=Rubik&display=swap");:root {--color-black: #112c34;--color-blue-dark: #65849a;--color-mustard-light: #ede6d9;--color-mustard-extra-light: #f...

layer icon样式及一些弹框使用方法

善假于物

09-10

608

一、layer的icon样式以上样式测试代码： [javascript]view plaincopy layer.confirm('icon测试',{icon:1,title:'提示'},function(index){ //dosomething alert("确认"); layer.close(index); ...

角标（就是按钮或图标右上角显示的数字或者消息提醒）

weixin_45856221的博客

12-06

2514

角标（就是按钮或图标右上角显示的数字或者消息提醒）

Layui的弹出层