Javascript

Javascript, 内容管理系统, 随笔

小试Prototype:为静态文章列表加上标志

昨天,用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 : , ,

Javascript, 随笔

比较郁闷的MM_preloadImages问题

最近工作的过程中发现用Javascript做图片预读取总是出问题:

  1. 做个展开菜单,展开项目的底图总是不能直接显示出来。
  2. 做个缩略图切换,左右切换的时候,新换出来的图片总是不显示,非得使用鼠标右键选显示图片才行
  3. ……

代码逻辑应该没问题,所以最后归结到使用的MM_preloadImages()上,不知道为什么好像没起作用,没能在页面显示之前预读取所需图片。

简述一下我的用法,需要预读的图片有10张,我使用的是Dreamweaver 8.0提供的v3.0版本的代码,代码如下:

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

自动生成的预读调用是在body的onload上,我将它改为.js文件,在head里调用,又编写了一个预读函数用window.onload调用,代码如下:

function doPreload(){
for (var index=0; index<10; index++){
url1 = path_prefix+'TN_'+index+path_ext;
MM_preloadImages(url1);}
}

window.onload = doPreload;

运行时并没有得到预期效果,Firefox正常,IE出错,于是我改回body调用,还是失败。我以为是函数和循环的问题,就改成MM_preloadImages(‘img1.gif’, ‘img2.gif’, …)的调用,结果还是不行。

参考了一下Google Group里的文章,说有可能是缓存图片容量太大,可是回头想想一共10张图片,每张3、4K,全读出来也就30、40K,现在的带宽肯定不成问题。

所以我现在很郁闷,不知道其他人是不是也遇到这种问题,欢迎大家来与我交流,同时希望Javascript高手可以不吝赐教,指点我一下。

UPDATE:多谢Reg提醒,让我找到了问题的方向,看样子不是MM_preloadImages预读的问题,而是调用时候的问题,上面的懒得改了,就在下面继续更新。

UPDATE2:看到一篇讲CSS在IE里面的重复渲染问题,说DIV的显隐会影响CSS重新渲染,我不知道做的那个菜单是不是这种情况。

Technorati : ,

Javascript, 随笔

Prototype1.4.0说明文档showLocalLinks例子有问题

链接在这里:http://www.sergiopereira.com/articles/prototype.js.html#EnumeratingArrays

这个showLocalLinks例子有问题,在哪个浏览器里都显示不出结果。

<script>
function showLocalLinks(paragraph){
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName('a'));
//find links that do not start with 'http'
var localLinks = links.findAll( function(link){
var start = link.href.substring(0,4);
return start !='http';
});
//now the link texts
var texts = localLinks.pluck('innerHTML');
//get them in a single string
var result = texts.inspect();
alert(result);
}

</script>
<p id=”someText”>
This <a href=”http://othersite.com/page.html”>text</a> has
a <a href=”#localAnchor”>lot</a> of
<a href=”#otherAnchor”>links</a>. Some are
<a href=”http://wherever.com/page.html”>external</a>
and some are <a href=”#someAnchor”>local</a>
</p>
<input type=button value=”Find Local Links” onclick=”showLocalLinks’someText’)”>

这个例子的意思应该是取出段落里面的本地链接,原理是链接开头不是http的就算,但是段落里面使用的#链接形式,无论在IE还是firefox里,都会被解释为带有http的形式,所以这个例子的结果永远都是空。

解决方法是把其中#开头的链接改为”javascript:;”,就可以看到效果了。

后话,也有可能是因为我用Apache调试的原因,#xxx全被解释为”http://localhost/#xxx”了。

Technorati : ,

Javascript, Wiki, 互联网, 随笔

本地的Wiki记事本:TiddlyWiki

TiddlyWiki是一个好玩的Wiki记事本,支持Tag,支持丰富的Wiki语法,还支持搜索,用来做记事本不错。

它很简单,界面简单、操作简单,文件简单到所有内容只有一个html文件,所以最适合随身携带,想起了以前U盘携带的Wordpress,再带上TiddlyWiki就齐了,hoho~

TiddlyWiki是一个纯Javascript操作的Wiki,所有动作都是AJAX的,感觉好酷,要研究AJAX的又多了一个对象。

我只放在自己的电脑上玩了玩,还没研究怎么放在服务器上玩。

需要的朋友可以去TiddlyWiki下载。

Technorati : , , ,

Javascript

Google自定义新闻出了,有些东西需要扔掉吗?

以前我的习惯,基本是打开lilina.94smart.com和news.94smart.com,接着上Gmail收Google News Alerts,再看看其他人的Blog,基本上一天的信息源已经很多了。

今天凌晨,Google推出了它的第一个个性化服务–自定义新闻,可能因为流量太大,起初都打不开,下午的时候这个页面终于打开了,自定义关键字的新闻还算符合我的标准。

我想今后的习惯是,打开预设的Google新闻首页,因为添加了足够多的关键字,我基本上已经不需要区别的地方看新闻了。

但是这样也有弊端,我不能把我的Google新闻首页发给别人看,如果是用lilina架的新闻站,我完全可以把地址发给我的朋友,让他们了解我都在注意什么。

不过不管怎么样,我已经决定试着改变我的习惯了,因为Google News对我来说太方便了~

Javascript

对桌面搜索、硬盘搜索的想法

大家都知道Google和MSN的Desktop Search都已经处在Beta阶段了,最近又传出百度近日将推硬盘搜索 抗衡Google桌面搜索,说明今年各搜索巨头已经开始争抢硬盘搜索市场了。

Google的桌面搜索用过后觉得还不错,用起来像Google的网页搜索一样方便、快捷。这里还要说明的是,程序会在后台不停的为本机的文件加索引,来提高搜索的正确率,不过硬盘会不停的响,机器速度也会受一定影响。

不过同时我发现了一个细节,搜索页面的地址栏里面有个参数“s=123456789”,这说明Google给每个安装桌面搜索的机器分配了一个独一无二的ID,我的猜想是Google的桌面搜索程序同时收集本机上的文档数据,然后以这个ID发送到Google的搜索服务器上,为Google以后的P2P搜索或者文件搜索提供数据,也许哪天Google就出了一个“电狗”。:-)

另外,Google桌面搜索的隐私条款里面写了“Your computer’s content is not made accessible to Google or anyone else without your explicit permission.”,但是总觉得不够安全,也许是我多心了,但是如果哪天你在Google上搜到了自己机器上的文档(或其他文件),请不要太意外,是Google跟你开的小玩笑~

今天的胡写八写到此为止,下次见~