HTML
<!-- The following line is essential for the "position: fixed" property to work correctly in IE -->
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jquery.ui.chatbox</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="jquery.ui.chatbox.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.ui.chatbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var box = null;
$("input[type='button']").click(function(event, ui) {
if(box) {
box.chatbox("option", "boxManager").toggleBox();
}
else {
box = $("#chat_div").chatbox({id:"chat_div",
user:{key : "value"},
title : "test chat",
messageSent : function(id, user, msg) {
$("#log").append(id + " said: " + msg + "<br/>");
$("#chat_div").chatbox("option", "boxManager").addMsg(id, msg);
}});
}
});
});
</script>
</head>
<body>
<p>It will not work untill necessary scripts and stylesheets are
properly loaded, check out the code.</p> <input type="button"
name="toggle" value="toggle" />
<div id="chat_div">
</div>
<hr />
<div id="log">
</div>
</body>
</html>
JAVASCRIPT
/*
* Copyright 2010, Wen Pu (dexterpu at gmail dot com)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Check out http://www.cs.illinois.edu/homes/wenpu1/chatbox.html for document
*
* Depends on jquery.ui.core, jquery.ui.widiget, jquery.ui.effect
*
* Also uses some styles for jquery.ui.dialog
*
*/
// TODO: implement destroy()
(function($) {
$.widget("ui.chatbox", {
options: {
id: null, //id for the DOM element
title: null, // title of the chatbox
user: null, // can be anything associated with this chatbox
hidden: false,
offset: 0, // relative to right edge of the browser window
width: 300, // width of the chatbox
messageSent: function(id, user, msg) {
// override this
this.boxManager.addMsg(user.first_name, msg);
},
boxClosed: function(id) {
}, // called when the close icon is clicked
boxManager: {
// thanks to the widget factory facility
// similar to http://alexsexton.com/?p=51
init: function(elem) {
this.elem = elem;
},
addMsg: function(peer, msg) {
var self = this;
var box = self.elem.uiChatboxLog;
var e = document.createElement('div');
box.append(e);
$(e).hide();
var systemMessage = false;
if (peer) {
var peerName = document.createElement("b");
$(peerName).text(peer + ": ");
e.appendChild(peerName);
} else {
systemMessage = true;
}
var msgElement = document.createElement(
systemMessage ? "i" : "span");
$(msgElement).text(msg);
e.appendChild(msgElement);
$(e).addClass("ui-chatbox-msg");
$(e).css("maxWidth", $(box).width());
$(e).fadeIn();
self._scrollToBottom();
if (!self.elem.uiChatboxTitlebar.hasClass("ui-state-focus")
&& !self.highlightLock) {
self.highlightLock = true;
self.highlightBox();
}
},
highlightBox: function() {
var self = this;
self.elem.uiChatboxTitlebar.effect("highlight", {}, 300);
self.elem.uiChatbox.effect("bounce", {times: 3}, 300, function() {
self.highlightLock = false;
self._scrollToBottom();
});
},
toggleBox: function() {
this.elem.uiChatbox.toggle();
},
_scrollToBottom: function() {
var box = this.elem.uiChatboxLog;
box.scrollTop(box.get(0).scrollHeight);
}
}
},
toggleContent: function(event) {
this.uiChatboxContent.toggle();
if (this.uiChatboxContent.is(":visible")) {
this.uiChatboxInputBox.focus();
}
},
widget: function() {
return this.uiChatbox
},
_create: function() {
var self = this,
options = self.options,
title = options.title || "No Title",
// chatbox
uiChatbox = (self.uiChatbox = $('<div></div>'))
.appendTo(document.body)
.addClass('ui-widget ' +
'ui-corner-top ' +
'ui-chatbox'
)
.attr('outline', 0)
.focusin(function() {
// ui-state-highlight is not really helpful here
//self.uiChatbox.removeClass('ui-state-highlight');
self.uiChatboxTitlebar.addClass('ui-state-focus');
})
.focusout(function() {
self.uiChatboxTitlebar.removeClass('ui-state-focus');
}),
// titlebar
uiChatboxTitlebar = (self.uiChatboxTitlebar = $('<div></div>'))
.addClass('ui-widget-header ' +
'ui-corner-top ' +
'ui-chatbox-titlebar ' +
'ui-dialog-header' // take advantage of dialog header style
)
.click(function(event) {
self.toggleContent(event);
})
.appendTo(uiChatbox),
uiChatboxTitle = (self.uiChatboxTitle = $('<span></span>'))
.html(title)
.appendTo(uiChatboxTitlebar),
uiChatboxTitlebarClose = (self.uiChatboxTitlebarClose = $('<a href="#"></a>'))
.addClass('ui-corner-all ' +
'ui-chatbox-icon '
)
.attr('role', 'button')
.hover(function() { uiChatboxTitlebarClose.addClass('ui-state-hover'); },
function() { uiChatboxTitlebarClose.removeClass('ui-state-hover'); })
.click(function(event) {
uiChatbox.hide();
self.options.boxClosed(self.options.id);
return false;
})
.appendTo(uiChatboxTitlebar),
uiChatboxTitlebarCloseText = $('<span></span>')
.addClass('ui-icon ' +
'ui-icon-closethick')
.text('close')
.appendTo(uiChatboxTitlebarClose),
uiChatboxTitlebarMinimize = (self.uiChatboxTitlebarMinimize = $('<a href="#"></a>'))
.addClass('ui-corner-all ' +
'ui-chatbox-icon'
)
.attr('role', 'button')
.hover(function() { uiChatboxTitlebarMinimize.addClass('ui-state-hover'); },
function() { uiChatboxTitlebarMinimize.removeClass('ui-state-hover'); })
.click(function(event) {
self.toggleContent(event);
return false;
})
.appendTo(uiChatboxTitlebar),
uiChatboxTitlebarMinimizeText = $('<span></span>')
.addClass('ui-icon ' +
'ui-icon-minusthick')
.text('minimize')
.appendTo(uiChatboxTitlebarMinimize),
// content
uiChatboxContent = (self.uiChatboxContent = $('<div></div>'))
.addClass('ui-widget-content ' +
'ui-chatbox-content '
)
.appendTo(uiChatbox),
uiChatboxLog = (self.uiChatboxLog = self.element)
.addClass('ui-widget-content ' +
'ui-chatbox-log'
)
.appendTo(uiChatboxContent),
uiChatboxInput = (self.uiChatboxInput = $('<div></div>'))
.addClass('ui-widget-content ' +
'ui-chatbox-input'
)
.click(function(event) {
// anything?
})
.appendTo(uiChatboxContent),
uiChatboxInputBox = (self.uiChatboxInputBox = $('<textarea></textarea>'))
.addClass('ui-widget-content ' +
'ui-chatbox-input-box ' +
'ui-corner-all'
)
.appendTo(uiChatboxInput)
.keydown(function(event) {
if (event.keyCode && event.keyCode == $.ui.keyCode.ENTER) {
msg = $.trim($(this).val());
if (msg.length > 0) {
self.options.messageSent(self.options.id, self.options.user, msg);
}
$(this).val('');
return false;
}
})
.focusin(function() {
uiChatboxInputBox.addClass('ui-chatbox-input-focus');
var box = $(this).parent().prev();
box.scrollTop(box.get(0).scrollHeight);
})
.focusout(function() {
uiChatboxInputBox.removeClass('ui-chatbox-input-focus');
});
// disable selection
uiChatboxTitlebar.find('*').add(uiChatboxTitlebar).disableSelection();
// switch focus to input box when whatever clicked
uiChatboxContent.children().click(function() {
// click on any children, set focus on input box
self.uiChatboxInputBox.focus();
});
self._setWidth(self.options.width);
self._position(self.options.offset);
self.options.boxManager.init(self);
if (!self.options.hidden) {
uiChatbox.show();
}
},
_setOption: function(option, value) {
if (value != null) {
switch (option) {
case "hidden":
if (value)
this.uiChatbox.hide();
else
this.uiChatbox.show();
break;
case "offset":
this._position(value);
break;
case "width":
this._setWidth(value);
break;
}
}
$.Widget.prototype._setOption.apply(this, arguments);
},
_setWidth: function(width) {
this.uiChatboxTitlebar.width(width + "px");
this.uiChatboxLog.width(width + "px");
this.uiChatboxInput.css("maxWidth", width + "px");
// padding:2, boarder:2, margin:5
this.uiChatboxInputBox.css("width", (width - 18) + "px");
},
_position: function(offset) {
this.uiChatbox.css("right", offset);
}
});
}(jQuery));
