toastr是乙個基於jquery簡單、漂亮的訊息提示外掛程式,使用簡單、方便,可以根據設定的超時時間自動消失。
1、使用很簡單,首選引入toastr的js、css檔案
<2、效果script
src="/res/toastr/toastr.min.js"
>
script
>
<
link
rel="stylesheet"
href
="/res/toastr/toastr.min.css"
>
3、整合使用
//4、自定義用法常規訊息提示,預設背景為淺藍色
toastr.info("你有新訊息了!");
//成功訊息提示,預設背景為淺綠色
toastr.success("你有新訊息了!");
//警告訊息提示,預設背景為橘黃色
toastr.warning("你有新訊息了!");
//錯誤訊息提示,預設背景為淺紅色
toastr.error("你有新訊息了!");
//帶標題的訊息框
toastr.success("你有新訊息了!","訊息提示");
//另一種呼叫方法
toastr["info"]("你有新訊息了!","訊息提示");
通過設定自定義引數,可達到不同的效果
自定義引數:
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結構如下 訊息提醒 訊息提示器 引...