/*
* Chat Tool Bar plugin
* 1.create a chat tool bar, at the bottom of page so in any page user can use web chat tool
* 2.create a user list, show who is already online
* 3.@author Dahai He
* 4.@date 2010-08-16
*/
(function(jQuery){
//tool bar name
this.barName = "Chat Tool Bar";
//tool bar default height
this.height = 20;
//create the tool bar div and user list div
this.initToolBar = function(barName,height){
this.barName = barName;
this.height = height;
//if the tool bar is already there, go out
if (jQuery("#chatToolBar").is("div")) {
return;
}
//build the tool bar div string
var chatToolBar = "<div id='chatToolBar' style='z-index:50;height:"+ this.height +"px;width:99%;position:absolute;bottom:0;background:#cfdef4;display:none;overflow:hidden;'>"
+ "<div id='barName' style='float:left;margin:2px 2px 2px 2px;'>"
+ "<span>"+this.barName+"</span>"
+ "</div>"
+ "<div style='float:right;margin:2px 10px 2px 2px;'>"
+ "<span id='showUsersButton' style='cursor:pointer;overflow:hidden;'>show online users</span>"
+ "</div>"
+ "</div>";
//add the tool bar div to the page
jQuery(document.body).prepend(chatToolBar);
//build the user list div
var onlineUserList = "<div id='users' style='z-index:50;height:auto;width:120px;position:absolute;bottom:"+ this.height +"px;right:10px;background:#cfdef4;overflow:hidden;display:none;border:2px black solid;'>"
+ "<span style='margin:2px auto;'>Users logged in</span>"
+ "<hr/>"
+ "<div id='userList'></div>"
+ "</div>";
//add the user list div to the page
jQuery(document.body).prepend(onlineUserList);
//when the scroll bar move, the chat tool bar will follow it
jQuery(window).scroll(
function() {
var BH_bar = document.documentElement.scrollTop;
jQuery("#chatToolBar").css("bottom", "-" + BH_bar + "px");
//the tool bar is already here, so the users list should above the tool bar
if(document.documentElement.scrollTop == 0){
jQuery("#users").css("bottom", this.height + "px");
}else{
var BH_user = BH_bar - this.height;
jQuery("#users").css("bottom", "-" + BH_user + "px");
}
}
);
//toggle if show the user list
jQuery('#showUsersButton').click(function(){
var spanElement = jQuery('#showUsersButton');
var text = spanElement.text();
if(text == "show online users"){
spanElement.text("hide online users");
jQuery("#users").show();
}else{
spanElement.text("show online users");
jQuery("#users").hide();
}
});
}
this.showToolBar = function(barName,height){
//create the tool bar
this.initToolBar(barName,height);
//get the tool bar element
var element = jQuery("#chatToolBar");
//show the tool bar
element.show(200);
//init the position of the tool bar and users list
var BH_bar = document.documentElement.scrollTop;
element.css("bottom", "-" + BH_bar + "px");
//the tool bar is already here, so the users list should above the tool bar
var BH_user = document.documentElement.scrollTop - this.height;
jQuery("#users").css("bottom", "-" + BH_user + "px");
}
//this plugin name, you can use this plugin with this name
//add this attribute to jQuery object
jQuery.chatToolBar = this;
return jQuery;
})(jQuery)
前臺調用
jQuery.chatToolBar.showToolBar("Chat Tool Bar",20);