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

最新推荐文章于 2023-11-04 18:27:00 发布
最新推荐文章于 2023-11-04 18:27:00 发布
阅读量416 收藏 1
点赞数 1
分类专栏： 前端 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luck_And_Destiny/article/details/119797097
版权

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元/天 解锁文章
&蚂蚁
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui 弹出层模块
QwQ_HGC的博客
09-18 411
Layui 弹出层模块 使用场景 由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。 作为独立组件使用： 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 调用方式：通过script标签引入layer.js后，直接用即可。 layui 模块化使用： 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer
浅谈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
角标（就是按钮或图标右上角显示的数字或者消息提醒）
weixin_45856221的博客
12-06 1616
角标（就是按钮或图标右上角显示的数字或者消息提醒）
layer.msg设置显示位置，大小
晴天小风的博客
10-21 1万+
layer.msg设置显示位置，大小 显示在右下角： offset属性控制位置 area属性控制大小 ​​​​​​​layer.msg("123", { icon: $.modal.icon(modal_status.WARNING), time: 3000, shift: 5,offset:"rb",area:['400px','66px'] },function () { }); ...
layer msg 图标
zmlucky的博客
07-11 879
layer msg 图标
layer弹出层框架alert与msg详解
08-31
Layer 弹出层框架是 layui 的代表作之一，具有很好的参考价值。Layer 弹出层框架 Alert 与 Msg 是 Layer 中的两个重要组件，本文主要介绍了它们的相关知识。 Layer 弹出层框架 Alert Layer 弹出层框架 Alert 是 ...
使用layui前端框架弹出form表单以及提交的示例
10-16
在本文中，我们将深入探讨如何使用layui前端框架来弹出form表单并进行数据提交。layui是一款基于HTML5和CSS3的轻量级前端组件库，它提供了丰富的UI组件和强大的交互功能，使得Web开发更加便捷高效。下面，我们就按照...
layer弹出层扩展主题的方法
12-01
Layer是一款非常流行的JavaScript弹出层插件，它提供了多种类型的弹窗功能，如提示、确认、对话框等。然而，官方提供的主题样式可能无法满足所有需求。幸运的是，Layer支持自定义扩展，让我们能够轻松创建符合项目...
layer弹出框中icon数字参数说明
weixin_33972649的博客
04-26 260
icon参数为0，如下代码： layer.msg('请选择要编辑的机构', {icon: 0}); 运行结果如图： icon参数为1，如下代码： layer.msg('请选择要编辑的机构', {icon: 1}); icon参数为2，如下代码： layer.msg('请选择要编辑的机构', {icon: 2}); 运行结果如图： icon参数为3，如下代码： layer.msg('请选择要编...
使用layer弹层完成提示消息
Angela_L的博客
09-02 5400
一.首先下载Layer 二.将下载的layer解压到jquery文件夹下 如图所示： 三.用法: 提示: layer.msg(提示信息, {time:1000, icon:5, shift:6}, 回调方法); layer.alert(提示信息, function(index){ // 回调方法 layer.close(index); ...
layui之layer弹出层的icon数字及效果展示
Cloud-Future的博客
12-05 3179
layui是一款比较优秀的UI框架，组件丰富，上手比较简单，但是官方文档有一些缺陷，值得一提的是示例只有代码，很少有效果展示，对于使用者来说不知道最终效果符合自己的要求。个人觉得从专业程度来说不如Element-UI和AntDesign 的ng-zorro-antd。 layui官方文档：layui - 经典模块化前端 UI 框架 layer的icon样式 以上样式测试代码： layer.confirm('icon测试', {icon: 1, title:'提示',btn:['确认.
layui实现数据展示
weixin_52994410的博客
05-14 4866
第一步引入jquary: <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 第二步更改css和js引用地址： 第三步将我们的数据返回到我们的前台 引入 ,response:{ statusName: 'status' //规定数据状态的字段名称，默认：code ,dataName: 'rows' //规定数据列表的字段...
layui框架——弹出层layer
热门推荐
meixu568的专栏
07-26 9万+
两种调用方法： 1、引用独立的layer.js文件 引入好layer.js后，直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 2、调用layui中的layer模块 layui.use('layer', function(){ ...
layui的layer.open使用说明注意事项！！！！
weixin_42512282的博客
12-29 2947
content: ‘测试内容’, //页面直接显示“测试内容”接口与后端返回的页面地址匹配的。
layer.open（常用）
qq_42832151的博客
04-08 2万+
实例： layer.open({ type: 1, title: '标题', skin: 'layui-layer-rim', //加上边框 area: ['1070px', '550px'], //设置宽高 content:$("#lookinfo"), btn: ['按钮1','按钮2'], btn1:function(index, layero){ // 按钮1的逻...
【html】在消息按钮上增加数量角标
柠檬加冰
05-19 1万+
html代码：<a onclick="goMessage();" style="width: 60px;height: 100%;color: white;background: transparent;" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-bell-o fa-2x',size:'large',iconA
使用LayUI展示数据
dengwan3818的博客
03-26 490
LayUI是一款免费，开源，轻量级的前端cms框架，适用于企业后端,能快速上手开发，集成了常用的组件，还有完善的文档和社区。 点击查看文档地址下载框架 使用： 1.把这个5个文件项都拷贝到项目中 2.到layui官网地址将后台布局的代码考过来，做一个左侧导航，右侧显示主内容的格局 3.代码复制到我们自己项目新建的ho...
Layui自定义icon图标
最新发布
weixin_43702272的博客
11-04 1266
在使用Layui 进行开发时，会使用： <i class="layui-icon">&#xe60c;</i> 或者 <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i> 进行图标的引入，但是官方给的图标毕竟有限...
layui 获取弹出层表单数据
09-27
可以在使用 layui 的弹出层中使用 JavaScript 代码获取表单数据。 示例代码如下： ``` // 获取表单中所有元素的值 var data = form.val('formId'); ``` 其中，'formId' 是表单的 id。 需要注意的是，需要在页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值