Tag Archives: CSS

仿 Twitter 官网最新状态实现手记

曾经发誓在这个博客不写技术的,嗯。
读这个博客的人估计都知道我是 Rabr 的作者。但是诚实的讲,我不懂 PHP 和 JS,最了解的 CSS 也只是半调子水平。不懂 JS,于是界面做起来很头疼,CSS 不是万能的,要实现动态效果只能用 JS,于是没看任何书就一头扎进 jQuery 的汪洋。
下面是我为 Rabr 添加的新功能“最新状态”的实现手记,权当记录。
先看看 Twitter 官网输入框下方的 Latest Status:

在点击之后的样子是:

对,状态展开,然后链接变成了可点击的样式。
实现的思路是:用 JS 截断文字,尾部用 … 显示;放置一个隐藏的 span 存放不截断的完整状态,然后为整个区域添加点击 toggle() 事件,控制两个 span 的可见性切换。
同时,因为在 Rabr 中更新状态时这里也会动态变化,因此还需要添加一个内部使用的 function 使推在显示出来的时候就是用 … 截断的,而不是显示出来之后再被截断。