Jquery訊息提示外掛程式toastr

2022-05-20 16:56:27 字數 1623 閱讀 8268

toastr是乙個基於jquery簡單、漂亮的訊息提示外掛程式,使用簡單、方便,可以根據設定的超時時間自動消失。

1、使用很簡單,首選引入toastr的js、css檔案

<

script

src="/res/toastr/toastr.min.js"

>

script

>

<

link

rel="stylesheet"

href

="/res/toastr/toastr.min.css"

>

2、效果 

3、整合使用

//

常規訊息提示,預設背景為淺藍色

toastr.info("你有新訊息了!");

//成功訊息提示,預設背景為淺綠色

toastr.success("你有新訊息了!");

//警告訊息提示,預設背景為橘黃色

toastr.warning("你有新訊息了!");

//錯誤訊息提示,預設背景為淺紅色

toastr.error("你有新訊息了!");

//帶標題的訊息框

toastr.success("你有新訊息了!","訊息提示");

//另一種呼叫方法

toastr["info"]("你有新訊息了!","訊息提示");

4、自定義用法 

通過設定自定義引數,可達到不同的效果

自定義引數:

toastr.options =;
引數說明: 

closebutton:false,是否顯示關閉按鈕(提示框右上角關閉按鈕); 

debug:false,是否為除錯; 

progressbar:false,是否顯示進度條(設定關閉的超時時間進度條); 

positionclass,訊息框在頁面顯示的位置

toast-top-left  頂端左邊

toast-top-right 頂端右邊

toast-top-center 頂端中間

toast-top-full-width 頂端,寬度鋪滿整個螢幕

toast-botton-right

toast-bottom-left

toast-bottom-center

toast-bottom-full-width

onclick,點選訊息框自定義事件

showduration: 「300」,顯示動作時間

hideduration: 「1000」,隱藏動作時間

timeout: 「2000」,自動關閉超時時間

extendedtimeout: 「1000」

showeasing: 「swing」,

hideeasing: 「linear」,

showmethod: 「fadein」 顯示的方式,和jquery相同

hidemethod: 「fadeout」 隱藏的方式,和jquery相同

jquery poshytip訊息提示外掛程式使用

poshy tip是一款非常友好的資訊提示工具了,如我們通常在做表單驗證時會用到這個功能,這樣可以告訴使用者我們是要如何填寫或者什麼東西填寫錯誤了,下面來看看這個poshytip使用。使用步驟 注意 資料夾中包含所有樣式,只需引自己需要的樣式,此處引用的是tip yellow.css。poshyti...

jquery冒泡提示外掛程式

本外掛程式是沿用了jtip的素材以及設計思路進行 重寫。拓展了以下功能 1.增加了關閉按鈕或者設定自動關閉間隔時間自動關閉 2.增加了多種呼叫方式,可以任意定位冒泡提示位置 jquery.tips function source,title,content,millisec else jtipid ...

乙個簡單的訊息提示jquery外掛程式

最近在工作中寫了乙個jquery外掛程式,效果如下 就是乙個簡單的提示訊息的乙個東西,支援最大化 最小化 關閉 自定義速度 自定義點選事件,資料有ajax請求和本地資料兩種形式。還有不完善的地方,只做了最基本的功能,等有了修改再上傳上來。訊息提示 自動生成的html結構如下 訊息提醒 訊息提示器 引...