快捷導(dǎo)航

layui 優(yōu)化button按鈕和彈出框的方法

更新時(shí)間：2018年08月15日 15:32:30 作者：小小小烏龜丶

今天小編就為大家分享一篇layui 優(yōu)化button按鈕和彈出框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

正常下的layui在3個(gè)button按鈕

壓縮之后

代碼為

<button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改門(mén)店</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-danger del-activity">刪除活動(dòng)</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">關(guān)閉活動(dòng)</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">開(kāi)啟活動(dòng)</button>

優(yōu)化：給每個(gè)button加上空

<a><button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改門(mén)店</button><a>

效果圖為

點(diǎn)擊 '點(diǎn)擊查看'出現(xiàn)彈出框信息

html

<td class='mouse-over-out' data-content="適用門(mén)店：{$activity.store_count}個(gè) <hr> 活動(dòng)主題：{$activity.activity_theme} <hr> 卡券ID：{$activity.wechat_card_id} <hr>"><a style="color:red;" href="#" rel="external nofollow" >點(diǎn)擊查看</a></td>

js

 //顯示活動(dòng)詳情
  $('.mouse-over-out').click(function(){
   layer.open({
    title: '活動(dòng)詳情',
    type: 1,
    skin: 'layui-layer-demo', //樣式類(lèi)名
    closeBtn: 0, //不顯示關(guān)閉按鈕
    anim: 2, //彈出層樣式
    shadeClose: true, //開(kāi)啟遮罩關(guān)閉
    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 優(yōu)化button按鈕和彈出框的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

提交表單時(shí)執(zhí)行func方法實(shí)現(xiàn)代碼
客戶端的js驗(yàn)證想必大家早已熟悉，今天本文帶著大家再回憶一下，主要是在提交表單之前執(zhí)行func方法，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
微信小程序?qū)崿F(xiàn)簽字功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簽字功能,本文通過(guò)效果圖展示，實(shí)例代碼講解的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
使用js和canvas實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了使用js和canvas實(shí)現(xiàn)時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
詳解Webpack loader 之 file-loader
這篇文章主要介紹了詳解Webpack loader 之 file-loader，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
基于Javascript開(kāi)發(fā)連連看游戲小程序
這篇文章主要介紹了基于Java開(kāi)發(fā)連連看游戲小程序,連連看是在有限的時(shí)間內(nèi),只要把所有能連接的相同圖案,兩個(gè)一對(duì)地找出來(lái),消除全部就成功了,文中提供了解決思路和部分實(shí)現(xiàn)代碼,需要的朋友可以參考下
2023-03-03
webpack熱模塊替換（HMR）/熱更新的方法
模塊熱替換(HMR)的作用是，在應(yīng)用運(yùn)行時(shí)，無(wú)需刷新頁(yè)面，便能替換、增加、刪除必要的模塊，本篇文章主要介紹了webpack熱模塊替換（HMR）/熱更新的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
基于javascript html5實(shí)現(xiàn)多文件上傳
這篇文章主要為大家詳細(xì)介紹了基于javascript html5實(shí)現(xiàn)多文件上傳的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
純js實(shí)現(xiàn)的論壇常用的運(yùn)行代碼的效果
bluidea論壇的腳本板塊的版主寫(xiě)的，不錯(cuò)，轉(zhuǎn)到這！
2008-07-07
JavaScript類(lèi)型相關(guān)的常用操作總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript類(lèi)型相關(guān)的常用操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
javascript中局部變量和全局變量的區(qū)別詳解
本文主要是向大家詳細(xì)的對(duì)比分析了javascript中局部變量和全局變量的區(qū)別，是篇非常不錯(cuò)的文章，值得仔細(xì)去品讀，推薦給小伙伴們。
2015-02-02