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类中获取外部函数名的方法与代码
Sep 12 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
ES6数组的扩展详解
Apr 25 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 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
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php简单判断文本编码的方法
2015/07/30 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
Python三元运算实现方法
2015/01/12 Python
Python中的自省(反射)详解
2015/06/02 Python
python日志记录模块实例及改进
2017/02/12 Python
Python协程的用法和例子详解
2017/09/09 Python
python计算列表内各元素的个数实例
2018/06/29 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
观看《永远的雷锋》心得体会
2014/03/12 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
课外活动实习计划
2015/01/19 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python