輕量級jQuery聊天窗插件:Chatbox

jopen 9年前發布 | 39K 次閱讀 Chatbox 其他jQuery插件 jQuery插件

jQuery.chatbox 說明文檔


特性

1.輕量級動畫特效以及友好的界面
2.支持多窗口
3.完善的回調函數以實現自定義功能
4.多種調用方式
4.良好的封裝以及擴展性
5.每個聊天窗對象實例以data屬性的形式附加在聊天窗DOM對象上(如果你想獲得某個特定插件的實例,可以直接從頁面元素中獲取:$('{boxId}').data('chatbox'))

配置項

配置項分為全局配置項和實例配置項

       全局配置項:  參數            類型           默認值                說明
---------------------------------------------------------------------------------------------------------------
id              number          null                  當前用戶的id,也就是發送者的id,必須是唯一值
user            string          null                  發送者的顯示名稱,可以是昵稱用戶名等,不要求唯一
debug           boolean         false                 是否打開調試功能
idPrefix        string          'chatbox_'            生成頁面DOM元素的id值   
        實例配置項:  參數            類型           默認值                說明
---------------------------------------------------------------------------------------------------------------
id              number          null                  接收者的id,同時也會作為實例id,必須是唯一值
user            string          null                  接收者的顯示名稱,可以是昵稱用戶名等,不要求唯一
title           string          'Chat with '+{user}   聊天窗的標題

回調函數

回調函數也分為兩種,一種是全局回調函數另一種是實例回調函數。
但是有點Javascript基礎的開發者應該了解不管是哪種類型的回調函數我們都應該以傳遞函數引用的方式來調用,而不是對每個實例創建一個函數副本。
這樣會造成內存浪費。全局回調函數不會在實例化每個聊天窗對象時重復創建副本分配給每個對象實例,而實例回調函數會。
因此在不需要為每個獨立的聊天窗分配不同的回調功能時使用實例回調函數也應該以傳遞函數引用的方式來分配回調函數以節省內存空間。
        回調函數參考: 函數名                  參數       說明
---------------------------------------------------------------------------------------------------------------
onChatboxCreate                     創建聊天窗時觸發
onChatboxEnable                     聊天窗被啟用時觸發
onChatboxDisable                    聊天窗被禁用時觸發
onMessageSend           msg         發送消息時觸發,唯一參數:消息內容msg
onMessageReceive        msg         收到消息時觸發,唯一參數:消息內容msg
onMessageSystem         msg         收到系統消息時觸發,唯一參數:消息內容msg
onChatboxDestroy                    銷毀聊天窗時觸發 優先級:實例回調函數優先級高于全局回調函數,也就是說實例配置項中的回調函數會覆蓋全局配置項中同名的回調函數。 this指針:this指針經由apply或者call方法已經指向調用該方法的實例。

API(屬性和方法)

       全局API:  屬性/方法名       類型       參數          說明
---------------------------------------------------------------------------------------------------------------
globalOptions     屬性        無           保存所有聊天窗的全局配置項
getQueue()        方法        無           返回當前聊天窗的實例隊列 
        實例API:  屬性/方法名       類型      參數              說明
---------------------------------------------------------------------------------------------------------------
$elem             屬性        無              保存著當前聊天窗實例的jQuery對象
opts              屬性        無              保存著當前聊天窗實例的初始化選項
show()            方法        無              顯示聊天窗
hide()            方法        無              隱藏聊天窗
enable()          方法        無              啟用聊天窗
disable()         方法        無              禁用聊天窗
message()         方法        msg,type        設置接收到的消息到聊天窗,兩個參數:消息內容msg、消息類型type
blink()           方法        無              高亮標題欄閃爍提示
destroy()         方法        無              無

調用方式

設定全局配置項: 直接定義配置對象globalOptions,未給定的配置項依舊會使用默認值并不會被該配置對象覆蓋
$.chatbox.globalOptions = {
    id:10000,
    user:'Jason',
    debug:true,
    onChatboxCreate:function(){
        //要執行的代碼
    }
}

或者以附加屬性的方式
$.chatbox.globalOptions.id = 10000;
$.chatbox.globalOptions.user = 'Jason';
$.chatbox.globalOptions.onChatboxCreate = function(){
    //要執行的代碼
}; 初始化聊天窗: $.chatbox({
    id:11254,
    user:'Tony',
    title:'Chat with Tony',
    onChatboxCreate:function(){
        //要執行的代碼
    }
}); 調用API方法: 第一種調用方式
$.chatbox({instanceId}).message({message content});

第二種調用方式
$({boxId}).data('chatbox').message({message content});

項目主頁:http://www.baiduhome.net/lib/view/home/1450441990563

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!