layui 优化button按钮和弹出框的方法
2018-08-15 15:32
991 查看
正常下的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按钮和弹出框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- layui 优化button按钮和弹出框
- layui弹出层按钮提交iframe表单的方法
- Android中为Button自定义按钮的按下效果的实现方法
- jquery easyUI的dialog方法弹出对话框多个按钮进行选择
- listview滑动到底部弹出按钮-button占用了listview的显示位置(尽力理解尽力解决)
- mono for android Listview 里面按钮 view Button click 注册方法 并且传值给其他Activity 主要是context
- 对Android APP的各种样式统一修改方法(这里列举了通知状态栏StatueBar,标题栏ActionBar,ToolBar和按钮Button的样式修改)
- JavaScript在form表单中使用button按钮实现submit提交方法
- IOS 使用自定义手势屏蔽按钮解决方法/UITapGestureRecognizer屏蔽Button
- 【原创】Android中ImageButton自定义按钮的按下效果的代码实现方法,附网上2种经典解决方法。
- Android中ImageButton自定义按钮的按下效果的代码实现方法,附网上2种经典解决方法
- ImageButton自定义按钮的按下效果的高效实现方法(非一般)
- ASP.NET一个页面多个Button按钮事件避免数据验证控件RequiredFieldValidator冲突方法
- thinkPHP传数组到模板页面volist每一列加一个button,点击按钮携带参数传给JS函数,跳转到不同的方法
- Android点击MENU弹出的退出按钮退出系统方法及拦截MENU弹出菜单方法
- javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
- [转]ASP.NET一个页面多个Button按钮事件避免数据验证控件冲突方法
- 在 repeater控件中有button控件,如何点击button按钮在后头产生方法
- WinForm中,Button按钮有PerformClick()方法,可以模拟用户单击鼠标. 即button.PerformClick()生成按钮的事件。
- WPF中button按钮同时点击多次触发click解决方法