此篇文章主要是对MVC实现类似QQ的网页聊天功能(上)的部分代码的解释。
首先说一下显示框的滚动条置底的问题:
结构很简单一个大的div(高度一定、overflow:auto
)包含着两个小的div第一个小的div放聊天信息,第二个div(height:0px;overflow:hidden)
,当页面加载聊天内容时第二个小的div调用scrollIntoView()
方法即可将滚动条置底。
滚动条置底效果:
其次说一下输入框:
输入框用的是KindEditor
富文本编辑器插件,需要引入kindeditor.js
、prettify.js
、zh-CN.js
三个js文件和default.css
、prettify.css
两个样式文件,若想增加或减少编辑器的功能菜单就在kindeditor.js
文件下的options
中的items
中修改。
PS:以后有机会再详细说一下KindEditor
富文本编辑器的用法。