DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jQuery的message插件實現右下角彈出消息框
基於jQuery的message插件實現右下角彈出消息框
編輯:JQuery特效代碼     

1.$.messager.lays(width, height);

該方法主要用來定義彈出窗口的寬度和高度。

2.$.messager.anim(type,speed);

該方法主要定義窗口以什麼樣的方式和速度呈現。

$.messager.anim("fade",1000); //以fadeIn的動畫方式顯示

$.messager.anim("show",1000); //以show的動畫方式顯示

3.$.messager.show(title,text,time);

該方法主要定義窗口顯示的內容,以及窗口顯示多長時間後進行隱藏。

如果使用默認的標題,則將title設置為0,另外title和text還可以設置為html內容進行顯示。如果希望用戶點擊彈窗的關閉按鈕才關閉消息框,可將time設置為0。

$.messager.show(0, "這是一個提示框",5000);

$.messager.show("<font color='red'>提示信息</font>","<a href='http://www.cnblogs.com'>博客園歡迎你</a>",3000);

  在明白了message插件中每個方法的作用後,使用起來就很簡單了,具體操作如下:

1.在頁面引入jquery.js和jquery.messager.js文件。

2.在頁面加載的時候調用message插件中的函數,設置窗口的大小,顯示效果,以及顯示內容。
代碼如下:
$(function () {
$.messager.lays(200, 200);
$.messager.anim('fade', 1000);
$.messager.show("提示信息", "<a href='http://www.poluoluo.com'></a>",5000);
});

3.最後顯示的效果如下圖。

在線演示地址 http://demo.jb51.net/js/jquery.messager/index.html
插件下載:jquery.message.js打包下載地址 http://www.jb51.net/jiaoben/22351.html

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved