Growl插件

消息提醒，允許您很容易地在一個(gè)覆蓋層顯示反饋消息
消息會(huì)在一段時(shí)間后自動(dòng)消失，不需要單擊確定按鈕

也可以通過移動(dòng)鼠標(biāo)或點(diǎn)擊關(guān)閉按鈕加快隱藏信息

引入JS

<script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> <script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script> <link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />

文本元素

選擇需要設(shè)置的顯示文本元素，把文本作為參數(shù)傳遞給它

$.growl({ title: "消息標(biāo)題", message: "消息內(nèi)容!" }); $.growl.error({ title: "錯(cuò)誤標(biāo)題", message: "錯(cuò)誤消息內(nèi)容!" }); $.growl.notice({title: "提醒標(biāo)題", message: "提醒消息內(nèi)容!" }); $.growl.warning({title: "警告標(biāo)題", message: "警告消息內(nèi)容!" });

示例代碼

$(function() {$.growl({title: "消息標(biāo)題",message: "消息內(nèi)容!"});$('.error').click(function(event) {event.preventDefault();event.stopPropagation();return $.growl.error({title: "錯(cuò)誤標(biāo)題",message: "錯(cuò)誤消息內(nèi)容!"});});$('.notice').click(function(event) {event.preventDefault();event.stopPropagation();return $.growl.notice({title: "提醒標(biāo)題",message: "提醒消息內(nèi)容!"});});return $('.warning').click(function(event) {event.preventDefault();event.stopPropagation();return $.growl.warning({title: "警告標(biāo)題",message: "警告消息內(nèi)容!"});}); });

總結(jié)

以上是生活随笔為你收集整理的jQuery的Growl插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。