94smart's Blog » 内容管理系统 http://blog.94smart.com 移动或移不动的互联网 Sat, 11 Feb 2012 02:48:18 +0000 en hourly 1 http://wordpress.org/?v=3.3 小试Prototype：为静态文章列表加上标志 http://blog.94smart.com/cache/2006/0726_826.html http://blog.94smart.com/cache/2006/0726_826.html#comments Wed, 26 Jul 2006 06:49:59 +0000 94smart http://blog.94smart.com/2006/07/26/826.html 您可能也喜欢：
用XHTML+CSS实现文章列表标题时间对齐
Prototype1.4.0说明文档showLocalLinks例子有问题
美味书签和Delicious Soup
比较郁闷的MM_preloadImages问题
拿什么来拯救你，我的电脑~ 无觅 ]]> 昨天，用Prototype.js解决了一个以前一直解决不了的问题，即静态文章列表加上New标志。

工作上一直使用静态的CMS（内容发布系统），好处是发布的内容全部都有静态页面、唯一地址，访问速度也比较稳定，缺点是放弃了动态的效果，比如文章动态链接、列表更新等等，以及今天要说的根据文章发布时间给标题加New标志。

原理是用Javascript分析列表代码里面带有时间的条目，时间是不是在时间限制之后，如果是，就在这个条目的时间代码段前面加上New的标志代码。

首先对文章列表进行改造，发布系统生成<ul>，每篇文章都是一个<li>，每个<li>里面用<a>包含标题，用<samp>来包含发布时间（还可以选择<span>或其他标签，我特意选了不常用的<samp>），最外层用<div>包含（看具体使用来定，也可以使用<table>等），并增加ID属性。以下是列表的代码：

<div id="News">
<ul>
<li><a href="link" target="_blank">Title</a><samp>2006-07-26 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-25 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-25 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-24 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-23 10:20</samp></li>
</ul>
</div>

Javascript脚本部分，我设定的时间限制是前天0点，也就是说前天发的内容都会加上New的标志。shownew.js代码如下：

//shownew.js
//email: 94smart(AT)gmail.com
//url: http://blog.94smart.com

var TheDay = new Date(); //初始化时间
TheDay.setDate(TheDay.getDate()-2); //将时间设定为前天，看实际需要而定
TheDay.setHours(0,0,0); //将时间设定为前天0点
var newImage = '<img src="images/icon_new.gif" border="0" alt="New" />'; //New字样图片的代码

function showNew(listId){ //参数listId是要处理列表的ID
var thisList = $(listId).getElementsByTagName('li');
var listArray = $A(thisList);
listArray.each(function(listItem){
theSamp = listItem.getElementsByTagName('samp'); //取li里面的samp标签的内容
theSamp = theSamp[0];
theTime = theSamp.innerHTML; //得到文章的发布时间
theTime = new Date(theTime.replace(/\-/g, "/")); //替换时间格式为yyyy/mm/dd h:m:s，如果正好是Javascript的时间格式就不需要这行
if (theTime>=TheDay) {
new Insertion.Before(theSamp, newImage); //如果发布时间比设定的时限晚就在samp标签前面插入New图片代码
}
});
}

使用的时候在<head>区插入代码：<script src="prototype.js" type="text/javascript"></script>和
<script src="shownew.js" type="text/javascript"></script>，在列表的HTML代码下方加入：<script type="text/javascript">showNew('News');</script>，ok，刷新你的页面，看到New了吗？没有的话看这里。

上面的代码还可以再挖掘一下，这里就不继续了，希望我的代码对其他人有所帮助。

需要说明的是，用的Prototype是Prototype v1.4.0，别的版本没试，应该也可以。Prototype库真的很强大，尤其是对于我这样的懒人，懒得自己写底层的业余JS人员。

Technorati : , ,

您可能也喜欢：

用XHTML+CSS实现文章列表标题时间对齐
Prototype1.4.0说明文档showLocalLinks例子有问题
美味书签和Delicious Soup
比较郁闷的MM_preloadImages问题
拿什么来拯救你，我的电脑~
无觅
]]> http://blog.94smart.com/cache/2006/0726_826.html/feed 0