layer Tips引數使用

風靈使發表於2018-08-18

layer.tips(content, follow, options) - tips層
type:4的深度定製。也是我本人比較喜歡的一個層型別，因為它擁有和msg一樣的低調和自覺，而且會智慧定位，即靈活地判斷它應該出現在哪邊。預設是在元素右邊彈出

<head>
    <meta charset="UTF-8">
    <title>Tip引數使用</title>
    <script src="jquery1.11.3.js"></script>
    <script src="layer/layer.js"></script>
</head>

<body>
    <br />
    <br />
    <br />
    使用者名稱:<input type="text" id="tips" />
    <script type="text/javascript">
        $('#tips').on('click', function() {
            layer.tips('請輸入使用者名稱', '#tips', {
                tips: [3, '#0FA6D8'], //設定tips方向和顏色 型別：Number/Array，預設：2 tips層的私有引數。支援上右下左四個方向，通過1-4進行方向設定。如tips: 3則表示在元素的下面出現。有時你還可能會定義一些顏色，可以設定tips: [1, '#c00']
                tipsMore: false, //是否允許多個tips 型別：Boolean，預設：false 允許多個意味著不會銷燬之前的tips層。通過tipsMore: true開啟
                time:2000  //2秒後銷燬，還有其他的基礎引數可以設定。。。。這裡就不新增了
            });
        });
    </script>
</body>
  layer.tips('可以發html程式碼哦', '依附在誰旁邊', {
         tips: [1, '#F0F0F0'],
         time: 10000,
         area: ['auto', 'auto']//這個屬性可以設定寬高  auto 表示自動
        });

執行效果:

這裡寫圖片描述

layer ui外掛顯示tips時，修改字型顏色

今天做調查問卷，又遇到一個蛋疼小問題，記錄下。

調查問卷有很多選項是要求必填的，如果不填的話，需要給出友好的提示。用的如下元件：http://layer.layui.com/

1、之前一直預設用的：

<script src="/assets/js/layer/layer.js"></script>

function showMessage(msg, domObj) {
    layer.tips(msg, domObj,{tips:3});//彈出框加回撥函式
}

showMessage("選項不能為空", $(this));

效果如下：
這裡寫圖片描述

2、ui過來看了下之後，說太醜，要換成白色背景，紅色字型

可是檢視了半天的官方文件，只看到了修改背景顏色的配置項，沒找到改字型色的配置項：

勉強修改背景色後如下：

function showMessage(msg, domObj) {
    layer.tips(msg, domObj,{tips:[3,"red"]});//彈出框加回撥函式
}

這裡寫圖片描述

3、最後實在無語，說搞不了，後邊同事折騰了一會，過來提供瞭如下方案：

    function showMessage(msg, domObj) {
        layer.tips("<span style='color:red'>"+msg+"</span>", domObj,{tips:[3,'#fff']});//彈出框加回撥函式
    }

這裡寫圖片描述
好吧，背景色還是可以改的。。。有時候說不行，只是沒想到而已

相關文章