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 相关文章推荐
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
js实现验证码干扰(动态)
Feb 23 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
将PHP作为Shell脚本语言使用
2006/10/09 PHP
编写PHP的安全策略
2006/10/09 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
Bootstrap基础学习
2015/06/16 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Ubuntu下安装PyV8
2016/03/13 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
会计主管岗位职责范文
2013/11/08 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
部队党性分析材料
2014/02/16 职场文书
作文之亲情600字
2019/09/23 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python