/* * 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);