DIV CSS 佈局教程網

效果展示

插件描述：jNotify操作結果信息提示條
jNotify具有以下特性：

跨浏覽器兼容。

提示內容支持HTML標簽。

支持定位提示框的位置。

靈活的，可配置插件參數。

使用前准備

使用該插件時一定要記得先載入jQuery庫和該插件以及相關樣式。

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/82/js/jNotify.jquery.js"></script> 
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/82/css/jNotify.jquery.css" />

jNotify的使用很非常簡單。

$(function(){ 
   $(element).click(function(){ 
       jSuccess(message,{option}); 
   });   
});

jNotify提供三種調用方式，分別是jSuccess()，jNotify()，jError()，使用方法都一樣。message就是提示信息的內容，支持html標簽。option是參數配置項，可以進行相關配置，如果不要option則采用默認配置。

jNotify提供以下可配置的參數：

autoHide : true,                // 是否自動隱藏提示條 
clickOverlay : false,            // 是否單擊遮罩層才關閉提示條 
MinWidth : 200,                // 最小寬度 
TimeShown : 1500,               // 顯示時間：毫秒 
ShowTimeEffect : 200,            // 顯示到頁面上所需時間：毫秒 
HideTimeEffect : 200,            // 從頁面上消失所需時間：毫秒 
LongTrip : 15,                 // 當提示條顯示和隱藏時的位移 
HorizontalPosition : "right",        // 水平位置:left, center, right 
VerticalPosition : "bottom",         // 垂直位置：top, center, bottom 
ShowOverlay : true,              // 是否顯示遮罩層 
ColorOverlay : "#000",            // 設置遮罩層的顏色 
OpacityOverlay : 0.3,            // 設置遮罩層的透明度

此外jNotify還提供了兩個方法操作onClosed和onCompleted

您還可以修改CSS樣式來呈現提示信息條的外觀。