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 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue滚动插件better-scroll使用详解
Oct 18 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python实现超市商品销售管理系统
2019/11/22 Python
python实现学生成绩测评系统
2020/06/22 Python
Python eval函数原理及用法解析
2020/11/14 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
教师自我评价范文
2013/12/16 职场文书
班委竞选演讲稿
2014/04/28 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
投标单位介绍信
2015/05/05 职场文书
目标责任书格式范文
2015/05/11 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS