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图片自动轮换效果实现思路附截图
Apr 30 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
javascript页面倒计时实例
Jul 25 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
如何更好的编写js async函数
May 13 Javascript
微信小程序实现单选功能
Oct 30 Javascript
Vuex的热更替如何实现
Jun 05 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的安全策略
2006/10/09 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
js动态生成指定行数的表格
2013/07/11 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python 绘制国旗的示例
2020/09/27 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
Jar包的作用是什么
2014/03/30 面试题
什么是反射?如何实现反射?
2016/07/25 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
财务人员个人工作总结
2015/02/27 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
创业计划书之物流运送
2019/09/17 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
MySQL注入基础练习
2021/05/30 MySQL
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android