用jquey写的简单聊天窗口的例子
//jquery.dialog.js
(function ($){
var options = {};
$.fn.act_as_dialog = function (width, height, borderwidth, bordercolor, autoscroll)
{
var style = 'display:block;overflow-x: no;overflow-y: auto;word-break:break-all;border:' + borderwidth + 'px solid ' + bordercolor + '; width:' + width + 'px;height:' + height + 'px;';
this.attr('style', style);
options['autoscroll'] = autoscroll;
}
$.fn.append_line = function (user, time, line)
{
this.append('<p>' + user + ' ' + time + '<br/>' + line + '</p>');
if (options['autoscroll'] == 'yes')
this.scrollTop(this.attr('scrollHeight') - this.height());
}
$.fn.set_auto_scroll = function(autoscroll)
{
options['autoscroll'] = autoscroll;
}
})(jQuery);
(function ($){
$.fn.act_as_input = function(width, callback)
{
var style = 'width:' + width + 'px;';
this.attr('style', style);
var _This = this;
this.bind('keydown', function saysth(e)
{
var sth = _This.val();
if (e.which == 13)
{
if (sth != '')
{
callback(sth);
_This.val('');
}
}
});
}
})(jQuery);
//test.html
<html>
<head>
<link rel="shortcut icon" href="http://static.jquery.com/favicon.ico" type="image/x-icon"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dialog.js"></script>
<script type="text/javascript">
function callback(sth)
{
var date = new Date();
var timestr = (date.getYear()>200?date.getYear():date.getYear()+1900)+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
$('#dialog').append_line('rare', timestr, sth);
}
$(document).ready(function(){
$('#dialog').act_as_dialog(800, 200, 1, 'gray', 'yes');
$('#user').act_as_dialog(200, 800, 1, 'gray', 'yes');
$('#say').act_as_input(800, callback);
});
</script>
</head>
<body>
<div id="dialog"></div>
<input id="say"/>
</body>
</html>