Gritter 是一個(gè) jQuery 的插件,幫助我們?cè)陧?yè)面右下角展示彈出通知。以下是 Gritter 的使用方法。
首先我們需要引入 jQuery 和 Gritter 的兩個(gè)文件:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.gritter/1.7.4/jquery.gritter.min.js"></script>
接下來(lái)我們可以開(kāi)始使用 Gritter 插件了。使用方法如下:
$.gritter.add({
title: '標(biāo)題',
text: '內(nèi)容',
image: '圖片鏈接',
sticky: false,
time: 3000
});
其中各項(xiàng)參數(shù)含義如下:
- title: 彈出框的標(biāo)題
- text: 彈出框的內(nèi)容
- image: 彈出框的圖片鏈接
- sticky: 是否使用黏貼模式,即彈出框固定展示在頁(yè)面上
- time: 自動(dòng)關(guān)閉時(shí)間,單位為毫秒
特別需要注意的是,Gritter 需要在 DOM 加載完畢后才能運(yùn)行,需要把上面的代碼放在 jQuery 的 ready 函數(shù)里面:
$(function() {
// Gritter 代碼放在此處
});
以上就是 Gritter 的使用方法。如果需要更多定制化功能,可以參考 Gritter 官方文檔。