在线聊天框界面实现以及控制脚本(不包含与服务端交互)

米落,2010年1月13日

    在项目中需要一个在线帮助功能,于是临时设计了一个固定浮动的帮助按钮,在触发后能够弹出一个聊天窗口,确保能在任何页面中都能找到帮助.
    由于需要使用弹出一个聊天窗口,而且站点自身使用了jQuery,于是考虑使用jQuery UI,介于加上了它后的页面变大许多,于是做了一些处理,以便形成惰性加载的效果(只在需要的时候加载页面样式表以及脚本).
    在下面的代码中已经提供了详细的注释,使用时只需要引入这个脚本,和指定的CSS样式表即可.

 

界面如上

 

JavaScript 代码:

var chattingWindow;
(function(){
    var inputContext, showContent, floatDiv;
    chattingWindow = {
        SetUp : function() {
            $(document).ready(function(){
                var cssSrc = "<link rel='stylesheet' type='text/css' href='/css/excite-bike/jquery-ui-1.7.2.custom.css'/>";    /* CSS样式表 */
                var javascriptSrc = "<script type='text/javascript' src='/javascript/jquery-ui-1.7.2.custom.min.js'></script>";   /* jQuery UI dialog 功能脚本 */
                /* 聊天触发浮动按钮,以及聊天界面HTML */
                var chattingContent = "<div id='chattingWindow'><img src='images/elementsImages/page_pdf.png' alt='在线咨询' title='在线咨询' /></div><div id='chattingWindowDialog'><div id='dialogcontent'><div class='ctitle'>聊天记录</div><div id='dialogrender'></div></div><div id='dialogintro'><div class='ctitle'>平安门窗</div><p>这里是简介</p></div><div id='dialoginputs'><textarea id='dialoginputText' ></textarea>	<button value='发送' ><img src='/images/global/send_cn.gif' /></button></div><div id='dialoglogo'></div></div>";
                var inited = false; /* 是否已载入 */
                $(document.body).append(chattingContent);  /* 加入到BODY文档流中去 */
                var floatDiv = $("#chattingWindow");     /* 获取引用 */ 
                inputContext = $("#dialoginputs > textarea");
                showContent = $("#dialogrender");
                showContent.height(250);
                floatDiv.click(function(){  /* 触发弹出窗口页面 */
                    if(!inited) {  /* 第一次使用时的配置工作 */
                        inited = true;
                        $(cssSrc).appendTo(document.body);  /* 引入jQuery UI 样式表,不能删除了,否则后面无法正常显示,可见样式表设置并不会临时保存 */
                        $(javascriptSrc).appendTo(document.body).remove();  /* 引入jQuery UI 脚本,可以删除,因为已经保存在内存中了 */
                        /* diaolog配置 */
                        $("#chattingWindowDialog").dialog({autoOpen:false, modal: true, title: "在线客服", width: 620, height: 470, show: true, hide: true});
                        inputContext.keydown(function(event){  /* 回车按钮事件 */
                        var keycode = event.keyCode || event.which || event.charCode;
                        if(keycode == 13) {
                            chattingWindow.SendMsg(inputContext.val());
                            inputContext.val("");
                            return false;
                        }
                    });
                    }
                    $("#chattingWindowDialog").dialog("open");  /* 打开对话框 */
                });
                $("#dialoginputs > button").click(function(){  /* 发送按钮事件 */
                    chattingWindow.SendMsg(inputContext.val());
                    inputContext.val("");
                });
                
            });
        },
        SendMsg : function(content) {
            var d = new Date();
            showContent.append("<div class='send-msg-name'>我 " + (d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()) + "</div>");
            showContent.append("<p class='send-msg-content'>" + content + "</p>");
            showContent.scrollTop(showContent[0].scrollHeight);
        }
    }
})();
chattingWindow.SetUp();

 

CSS 样式表:

#chattingWindow {
	position: fixed;
	bottom: 10px;
	right: 10px;
	
}
#chattingWindow:hover, #chattingWindow a:hover {
	cursor: help;
}
#chattingWindowDialog {
	display: none;
	width: 700px;
	overflow: hidden;
	white-space: normal;
}
div.ctitle {
	background: #06F url(/css/excite-bike/images/ui-bg_diagonals-thick_26_2293f7_40x40.png) repeat left top;
	width: auto;
	height: 24px;
	border: 1px solid #09F;
	overflow: hidden;
}
#dialogcontent {
	width: 450px;
	height: 280px;
	float: left;
	border: 1px solid #09F;
	margin: 2px;
	position: relative;
	overflow: hidden;
}
#dialogrender {
	position: absolute;
	margin-bottom: 5px;
	width: 450px;
	overflow-y: scroll;
	word-break:break-all;
	height: inherit;
}
#dialoginputs {
	width: 450px;
	height: 115px;
	float: left;
	border: 1px solid #09F;
	margin: 2px;
	text-indent:inherit;
}
#dialoginputs textarea {
	float: left;
	border: 0px;
	width: 340px;
	height: 113px;
}
#dialoginputs button {
	float: left;
	border: 0 none;
	background: #FFF;
	margin: 4px;
	width: 100px;
	height: 100px;
}

#dialogintro {
	width: 120px;
	height: 280px;
	border: 1px solid #09F;
	float: left;
	margin: 2px;
}
#dialoglogo {
	width: 120px;
	height: 115px;
	border: 1px solid #09F;
	float: left;
	margin: 2px;
}
.send-msg-name	  {font-family:arial,宋体;font-size:13px;color:#666;font-weight:normal;margin-top:6px}
.send-msg-content {color:#000; }
.recv-msg-content {color:#00f; }

 

Tags: JavaScript  jQuery  

分类: Programer | 评论:0 | 浏览: