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

 更新时间:2018年08月15日 15:32:30   作者:小小小乌龟丶  
今天小编就为大家分享一篇layui 优化button按钮和弹出框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

正常下的layui在3个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>

效果图为

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

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按钮和弹出框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 提交表单时执行func方法实现代码

    提交表单时执行func方法实现代码

    客户端的js验证想必大家早已熟悉,今天本文带着大家再回忆一下,主要是在提交表单之前执行func方法,感兴趣的你可以参考下哈,希望可以帮助到你
    2013-03-03
  • 微信小程序实现签字功能

    微信小程序实现签字功能

    这篇文章主要介绍了微信小程序实现签字功能,本文通过效果图展示,实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 使用js和canvas实现时钟效果

    使用js和canvas实现时钟效果

    这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 详解Webpack loader 之 file-loader

    详解Webpack loader 之 file-loader

    这篇文章主要介绍了详解Webpack loader 之 file-loader,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 基于Javascript开发连连看游戏小程序

    基于Javascript开发连连看游戏小程序

    这篇文章主要介绍了基于Java开发连连看游戏小程序,连连看是在有限的时间内,只要把所有能连接的相同图案,两个一对地找出来,消除全部就成功了,文中提供了解决思路和部分实现代码,需要的朋友可以参考下
    2023-03-03
  • webpack热模块替换(HMR)/热更新的方法

    webpack热模块替换(HMR)/热更新的方法

    模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换、增加、删除必要的模块,本篇文章主要介绍了webpack热模块替换(HMR)/热更新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 基于javascript html5实现多文件上传

    基于javascript html5实现多文件上传

    这篇文章主要为大家详细介绍了基于javascript html5实现多文件上传的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 纯js实现的论坛常用的运行代码的效果

    纯js实现的论坛常用的运行代码的效果

    bluidea论坛的脚本板块的版主写的,不错,转到这!
    2008-07-07
  • JavaScript类型相关的常用操作总结

    JavaScript类型相关的常用操作总结

    这篇文章主要给大家总结介绍了关于JavaScript类型相关的常用操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • javascript中局部变量和全局变量的区别详解

    javascript中局部变量和全局变量的区别详解

    本文主要是向大家详细的对比分析了javascript中局部变量和全局变量的区别,是篇非常不错的文章,值得仔细去品读,推荐给小伙伴们。
    2015-02-02

最新评论