编辑自己的右侧聊天界面(完成，上线)
本主题由 张书记 于 2009-10-16 19:37 解除置顶 麦圆
Twitter @math2gold 惊诧的火星友邦 咪咪是 /math2ogld
1楼 大 中 小 发表于 2009-10-12 21:21 只看该作者
编辑自己的右侧聊天界面(完成，上线)
最新版本将在这里更新：http://code.google.com/p/project41984/w/edit/SelfDefChatUI
(如果无法打開就看本帖)
** 欢迎把设计好自己想要的界面的同学，建新标题为“我的自定义聊天代码”的文章，然后把代码贴到里面去，跟大家分享。 **
由于每人都有自己创意和风格。选美工也不容易，還是把美工的设定交给每个人自己设置吧。希望美工能搞好的人能积极参与自定义设计，然后能把自己的作品供出以给大家挑选出做公共页面的。
如果感觉后面的内容太复杂了，可以看看这两个例子，稍懂javascript和html的兄弟，应该不用看说明就知道如何修改了：
例子一：（如果无法打開，请参照９楼）http://code.google.com/p/project41984/wiki/Ex1
例子二：（如果无法打開，请参照８楼）http://code.google.com/p/project41984/wiki/Ex2
自定义页面
如下是几个可以用用户登录后自定义的页面，每人登录后只看见自己的那个页的。
引用:
https://1984bbs.com/edit_file.php?page=chat_html
https://1984bbs.com/edit_file.php?page=chat_js
https://1984bbs.com/edit_file.php?page=chat_css
要编辑这几个页面可访问如下几个对应的地址
引用:
https://1984bbs.com/edit_file.html?chat_html
https://1984bbs.com/edit_file.html?chat_js
https://1984bbs.com/edit_file.html?chat_css
编辑好点submit就行了。
强烈建议把css放置在 https://1984bbs.com/edit_file.php?page=chat_css ， javascript代码放置在
https://1984bbs.com/edit_file.php?page=chat_js
，然后在https://1984bbs.com/edit_file.php?page=chat_html通过代码引入。
初级编辑
为避免直接重新设计整个聊天浏览器客户端而带来麻烦，現在提供一个比较初级的系统，所有人只要引用这个系统，对界面风格做修改即可。
如下是整个代码示例。后面介绍如何修改。
引用:
function runClearChatBox()
{
document.getElementById(‘chat_msg’).value = “”;
}
function sendChatCommentButtonObjct(o)
{
}
function getChatItemWriteString(Id,Sender,Msg,Time,Reply)
{
h=":"+Sender+":"+Time+":"+Msg+"<br />";
return h;
}
function getChatItemWriteStart()
{
return “”;
}
function getChatItemWriteEnd()
{
return “</b>”;
}
function getChatListLimit(i)
{
return i+1;
}
</script>
<script type=”text/javascript” language=”javascript”
src=”../OnlineChat/port.for1984.OnlineChat.nocache.js”></script>
</head>
<iframe src=”javascript:’’” id=”__gwt_historyFrame” tabIndex=’-1’
style=”position:absolute;width:0;height:0;border:0”></iframe>
</textarea>
</form>
</body>
</html>
以上示例，在html中插入js代码../OnlineChat/port.for1984.OnlineChat.nocache.js
即引入了基础系统。
引用:
<script type=”text/javascript” language=”javascript”
src=”../OnlineChat/port.for1984.OnlineChat.nocache.js”></script>
加入
引用:
function runClearChatBox()
{
document.getElementById(‘chat_msg’).value = “”;
}
function sendChatCommentButtonObjct(o)
{
}
function getChatItemWriteString(Id,Sender,Msg,Time,Reply)
{
h=":"+Sender+":"+Time+":"+Msg+"<br />";
return h;
}
function getChatItemWriteStart()
{
return “”;
}
function getChatItemWriteEnd()
{
return “</b>”;
}
function getChatListLimit(i)
{
return i+1;
}
</script>
就是引入，javascript部分的接口。除了防止布局和css风格外，主要的界面内容就是通过修改这一块代码来修改的。其含义如下:
初级界面修改
如下函数是打印每一条消息时会被调用，要求返回改消息组织的html代码。
引用:
function getChatItemWriteString(Id,Sender,Msg,Time,Reply)
{
h=":"+Sender+":"+Time+":"+Msg+"<br />";
return h;
}
开始输出消息时会被用到，此函数要求返回消息块的头部内容。如下两条示例是把消息内容加粗。
引用:
function getChatItemWriteStart()
{
return “”;
}
结束输出消息时会被用到，此函数要求返回消息块的尾部内容。
引用:
function getChatItemWriteEnd()
{
return “</b>”;
}
深入一点
打印消息内容的循环限制函数，如果是return i+1，则有多少显示多少，如果是return 10，则只显示最新10条消息。
引用:
function getChatListLimit(i)
如下函数负责清除文本框内容，每次消息发送成功后则会被调用：
引用:
function runClearChatBox()
初始化界面的时候会把发送Button的对象传递到这个函数，如果需要把文本框电击的動作和button关联起来，只要通过它获取按钮对象则可：
引用:
function sendChatCommentButtonObjct(send_button)
布局修改
整体html文档的布局上，通过id为chat_msg , chatAutoRefreshBox , chatSubmitBox ,
chatListBox进行设置。
如下代码表示文本消息输入框用textarea表示，实际上可以用input代替，只要是id为chat_msg即可。
引用:
</textarea>
代码是标记放置自动刷新ClickBox的位置。与后面2个一样，不一定要使用span，如div等的其他元素标签亦可。
引用:
代码是标记放置发送按钮的位置。
引用:
代码是标记放置消息列表的位置。
引用:
－－－－－－－－－－－－－－－－－－－－－－－－
Update: 20091013
新增接口:
1、回调函数setMyChatNickName，系统初始化时会把获得的用户名username传递给函数。通过它可以获取用户名。
引用:
function setMyChatNickName(username)
获取用户名后，可作存储起来，在显示聊天列表时可判断消息是否为自己所发出的。例如：
引用:
var mynickname;
function setMyChatNickName(o)
{
mynickname=o;
}
2、利用getMakeWriteRedefine()设置自定义输出
增加代码：
引用:
function getMakeWriteRedefine()
{
return true;
}
可以把聊天对话输出设置为自定义模式，这样如果不想按照原来的顺序输出，而希望最新的放置在最下面的话，在增加上述代码后，把
getChatItemWriteString修改成如下（增加Str参数）：
引用:
function getChatItemWriteString(Id,Sender,Msg,Time,Reply,Str)
{
var h;
if (Sender==mynickname)
{
h="me:"+Time+":"+Msg+"<br />";
}
else
{
h=":["+Sender+"]:"+Time+":"+Msg+"<br />";
}
return h+Str;
}
最后不是return h，而是return h+Str，让显示的顺序反过来。
Terminusbot 整理，讨论请前往 2049bbs.xyz
库存袈裟
@bruceku 想象力比知识更重要。
2楼 大 中 小 发表于 2009-10-12 22:35 只看该作者
真详尽。辛苦了。麦总
麦圆
Twitter @math2gold 惊诧的火星友邦 咪咪是 /math2ogld
3楼 大 中 小 发表于 2009-10-12 22:47 只看该作者
回复 2楼 库存袈裟 的话题
汗个……总字也上了，万一被人盯上，我说这是库总对我的特称哈。谢库总。
stonehoo
this is bullshit
4楼 大 中 小 发表于 2009-10-13 15:04 只看该作者
顶一个 对美工不懂啊
冇二
@bocaidingding欢迎follow
5楼 大 中 小 发表于 2009-10-13 15:27 只看该作者
要是能做成gtalk网页内嵌模式那样就不错了
ps：bbs要是能直接贴图多好~~~
多毛猫
http://www.duomaocat.com/
6楼 大 中 小 发表于 2009-10-13 21:38 只看该作者
麦总、库总，二位老总辛苦了。
绝望的落支撑
10年，文艺复兴 Twitter @luozc
7楼 大 中 小 发表于 2009-10-13 21:45 只看该作者
真不容易啊～
辛苦了！
麦圆
Twitter @math2gold 惊诧的火星友邦 咪咪是 /math2ogld
8楼 大 中 小 发表于 2009-10-14 00:42 只看该作者
自定义聊天界面——例子（２）
打開页面 https://1984bbs.com/edit_file.html?chat_html，输入后面的代码，点击Submit按钮保存。
然后打開页面 https://1984bbs.com/edit_file.php?page=chat_html 进行聊天。
本例子实现：
１、把对话输入框放到最下面
２、自动换行 （通过上网搜索代码略加修改实现）
３、只显示１０行
４、把我的聊天内容和别人的聊天内容区分
５、最后面的一条消息是最新消息
引用:
//网上搜索出来的自动换行函数
function AutoLn(sStr,iPerLineLen){
if(sStr.replace(/[^\x00-\xff]/g,"xx").length <= iPerLineLen){
return sStr;
}
var str="";
var l=0;
var schar;
for(var i=0;schar=sStr.charAt(i);i++){
str+=schar;
l+=(schar.match(/[^\x00-\xff]/)!=null?2:1);
if(l>= iPerLineLen){
str+="\n";
l=0;
}
}
return str;
}
var mynickname;
function setMyChatNickName(o)
{
mynickname=o;
}
function runClearChatBox()
{
document.getElementById(‘chat_msg’).value = “”;
}
function sendChatCommentButtonObjct(o)
{
}
function getMakeWriteRedefine()
{
return true;
}
function getChatItemWriteString(Id,Sender,Msg,Time,Reply,Str)
{
var h;
//设置自动换行
var msg=AutoLn(Msg,80);
if (Sender==mynickname)
{
//消息是我发出的
h="我:"+Time+":"+msg+"<br />";
}
else
{
//消息是别人发出的
h=":["+Sender+"]:"+Time+":"+msg+"<br />";
}
return h+Str;
}
function getChatItemWriteStart()
{
return “”;
}
function getChatItemWriteEnd()
{
return “</b>”;
}
function getChatListLimit(i)
{
//只显示10行
return 10;
}
</script>
<script type=”text/javascript” language=”javascript”
src=”../OnlineChat/port.for1984.OnlineChat.nocache.js”></script>
</head>
<textarea id=’chat_msg’ cols=50 rows=3>
</textarea>
</form>
</body>
</html>
麦圆
Twitter @math2gold 惊诧的火星友邦 咪咪是 /math2ogld
9楼 大 中 小 发表于 2009-10-14 01:00 只看该作者
自定义聊天界面——例子（１）
打開页面 https://1984bbs.com/edit_file.html?chat_html，输入后面的代码，点击Submit按钮保存。
然后打開页面 https://1984bbs.com/edit_file.php?page=chat_html 进行聊天。
本例子是最简化实现自己的聊天界面，在上面的基础上稍作修改就好了。
引用:
function runClearChatBox()
{
//发送后清除输入的聊天内容
document.getElementById(‘chat_msg’).value = “”;
}
function getChatItemWriteStart()
{
return “”;
}
function getChatItemWriteString(Id,Sender,Msg,Time,Reply,Str)
{
return ":["+Sender+"]:"+Time+":"+Msg+"<br />";
}
function getChatItemWriteEnd()
{
return “”;
}
function getChatListLimit(i)
{
return i+1;
}
</script>
<script type=”text/javascript” language=”javascript”
src=”../OnlineChat/port.for1984.OnlineChat.nocache.js”></script>
</head>
<input type=text id=’chat_msg’ size=60 /><!–
自动刷新选项–></span>
</form>
</body>
</html>
CMGS
虚空中的神
10楼 大 中 小 发表于 2009-10-14 09:57 只看该作者
mark下。。。最近找工作ing。。。保佑百度网易金山不刷了咱=。=
sinanjj
11楼 大 中 小 发表于 2009-10-14 14:38 只看该作者
一会仔细看看
一会仔细看看
zhubq
12楼 大 中 小 发表于 2009-10-14 15:30 只看该作者
我们正学,NET呢 晚上仔细研究下