一个tool bar plugin 类似人人网下面的（基于jQuery）

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