layui 优化button按钮和弹出框的方法


Posted in Javascript onAugust 15, 2018

正常下的layui在3个button按钮

layui 优化button按钮和弹出框的方法

压缩之后

layui 优化button按钮和弹出框的方法

代码为

<button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-danger del-activity">删除活动</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">关闭活动</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">开启活动</button>

优化:给每个button加上空

<a><button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button><a>

效果图为

layui 优化button按钮和弹出框的方法

点击 '点击查看'出现弹出框信息

layui 优化button按钮和弹出框的方法

html

<td class='mouse-over-out' data-content="适用门店:{$activity.store_count}个 <hr> 活动主题:{$activity.activity_theme} <hr> 卡券ID:{$activity.wechat_card_id} <hr>"><a style="color:red;" href="#" rel="external nofollow" >点击查看</a></td>

js

//显示活动详情
  $('.mouse-over-out').click(function(){
   layer.open({
    title: '活动详情',
    type: 1,
    skin: 'layui-layer-demo', //样式类名
    closeBtn: 0, //不显示关闭按钮
    anim: 2, //弹出层样式
    shadeClose: true, //开启遮罩关闭
    area: ['20%', '30%'],
    content:"<div style='height:90%;width:90%;margin:0 auto;margin-top:5%;'><p style='line-height:1%;'>"+
    $(this).data('content')+
    "<p/></div>"
   });
  });

以上这篇layui 优化button按钮和弹出框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 #Javascript
React+Webpack快速上手指南(小结)
Aug 15 #Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 #Javascript
关于微信小程序bug记录与解决方法
Aug 15 #Javascript
layui select获取自定义属性方法
Aug 15 #Javascript
Vue自定义toast组件的实例代码
Aug 15 #Javascript
You might like
php5.2.0内存管理改进
2007/01/22 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python实现矩阵打印
2019/03/02 Python
python输入错误后删除的方法
2019/10/12 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
职工运动会邀请函
2014/02/02 职场文书
远程研修随笔感言
2014/02/10 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电