曾经发誓在这个博客不写技术的，嗯。
读这个博客的人估计都知道我是 Rabr 的作者。但是诚实的讲，我不懂 PHP 和 JS，最了解的 CSS 也只是半调子水平。不懂 JS，于是界面做起来很头疼，CSS 不是万能的，要实现动态效果只能用 JS，于是没看任何书就一头扎进 jQuery 的汪洋。
下面是我为 Rabr 添加的新功能“最新状态”的实现手记，权当记录。
先看看 Twitter 官网输入框下方的 Latest Status：
在点击之后的样子是：
对，状态展开，然后链接变成了可点击的样式。
实现的思路是：用 JS 截断文字，尾部用 … 显示；放置一个隐藏的 span 存放不截断的完整状态，然后为整个区域添加点击 toggle() 事件，控制两个 span 的可见性切换。
同时，因为在 Rabr 中更新状态时这里也会动态变化，因此还需要添加一个内部使用的 function 使推在显示出来的时候就是用 … 截断的，而不是显示出来之后再被截断。
首先，构建 DIV 样式：
<div id="currently"> <span id="full_status"><strong>Latest:</strong></span> <span id="latest_text"> <span class="status-text"><strong>What is happening?</strong></span> <span class="full-text"><strong>What is happening?</strong></span> <span id="latest_meta" class="entry-meta"><strong>1 minute ago</strong></span> </span> </div>
然后写 CSS：
#currently { color:#666666; float:left; font-size:11px; margin:3px 8px 0 10px; overflow:hidden; padding:2px 4px 2px 0; text-align:left; width:385px; word-wrap:break-word; cursor:pointer } #latest_meta a{color:#999999} .status-text a{color:#666666} .status-text {display:inline} .full-text {display:none}
最后是 JS 的实现，写的比较粗糙：
//Make this area clickable $(function(){ $("#latest_status").toggle( function () { $("#currently .status-text").css("display","none"); $("#currently .full-text").css("display","inline"); }, function () { $("#currently .status-text").css("display","inline"); $("#currently .full-text").css("display","none"); }); }) //Internal function var limitation = function(text) { if (text.replace(/[^\x00-\xFF]/g,"aa").length > 80) { text = text.substr(0,80) + " ..."; } return text; } //Global function $(function(){ if (document.location.href.indexOf("index") > 0 || document.location.href.indexOf("all") > 0) { var temp = $("#currently .status-text").html(); if (temp.replace(/[^\x00-\xFF]/g,"aa").length > 80) { temp = temp.substr(0,80) + " ..."; } $("#currently .status-text").html(temp); } })
这只是非常初级的一个实现，目前已知的问题有：
1. 展开后的推中包含的链接不可点击
2. URL 会被从内部截断（即PHP中包含的 href 被截断导致整个 a 链接不能显示）
最终样式如下：
点击之后：
继续努力吧 
Update:
所有BUG已修复，重新微调和计算了截断的长度，并且使用了 stopPropagation 防止父子传递，使得链接可点。（感谢 @luosheng）
同时把状态时间也加入了 toggle() 的区域内。
<div id="currently"> <span id="full_status"><strong>Latest:</strong></span> <span id="latest_status"> <span id="latest_text"> <span class="status-text">" . $text . "</span> <span class="full-text" style="display:none">" . $text . "</span> <span class="entry-meta" id="latest_meta"><a href="status.php?id=$status->id" target="_blank">" . $date . "</a></span> <span class="entry-meta" id="full_meta" style="display:none"><a href="status.php?id=$status->id" target="_blank">" . $date . "</a></span> </span> </span> </div>
$(function(){ $("#latest_status").toggle( function () { $("#currently .status-text, #latest_meta").css("display","none"); $("#currently .full-text, #full_meta").css("display","inline"); }, function () { $("#currently .status-text, #latest_meta").css("display","inline"); $("#currently .full-text, #full_meta").css("display","none"); }); $("#full_meta a, .full-text a").click(function(e){e.stopPropagation();}); }) var limitation = function(text) { if (text.length > 60) { text = text.substr(0,60) + " ..."; } return text; } $(function(){ if (document.location.href.indexOf("index") > 0 || document.location.href.indexOf("all") > 0) { var temp = $("#currently .status-text").text(); if (temp.length > 60) { temp = temp.substr(0,60) + " ..."; } $("#currently .status-text").html(temp); } })
目前效果完美
16 Comments
顶消毒水儿~
学习语言，重在实践呐。
@NetPuter: 嘿嘿，谢了奶瓶~
rabr不錯，加油。
@扯: 嗯，谢谢
赞将军大人！
@玛格丽特苏: 我要杀了你…
这个主题有种神秘感！
学贵于应用！
@左岸读书: 这是我的御用主题
在 rabr 里内置了。
原来 RABR.in是你注册的啊？速度不错嘛。
Just to let you know.
我用SVN下载了，上传到我国外的空间，可是打开后提示config.php 和utility.php有问题。
我就用http://code.google.com/p/twitese/ 这里下载的lib文件夹替换了你的lib文件夹。结果就好了。
好奇怪。哪里有问题呢？
@kelvin: 你这叫“Just to let you know.”吗？
你的空间不支持加密模块。
@disinfeqt:
原来如此 谢过了~~
P.S 我只是随便一说 不要介意 呵呵
@kelvin: 嗯~ twitese 加入了 if 判断模块是否存在，我没加。
不过你可以把 config.php 中的 SECRET_KEY 留空。
界面很好看啊，就是我没找到reply和rt的按钮，还望指点一下？
Use non IE browsers
@alanjiang: 嗯，是 Showfom 赠送的。
Post a Comment