jQuery改善网站体验小细节点击改变链接的文本_JavaScript技术

　　jQuery 真是一个非常伟大的 JavaScript library，至少在我不会写 JS 的时候第一时间接触了它，虽然还有其他很多优秀的 JavaScript library，但是目前我还是对其情有独钟，它让你的网站显得更加酷，同时在一定程度上给了用户不错的视觉体验…

　　有时候浏览器变得缓慢或者网络十分缓慢的时候，当你点击了一个链接，你要做的就是对着页面傻看着，页面既不刷新，也没有任何提示，并没有给用户一个好的引导。一些并不是网络从业者的访客可能都不知道你的网站到底怎么了，明明点击了链接却没有反应，从而造成了不好的印象。所以我觉得，为什么不给出一些提示来告诉他们页面正在加载中呢(当他们点击了某个链接的时候)。

$('a').click(function(){
$(this).text('loading...');
});

　　以上这段代码就是改变你所点击的链接的文本为 loading…当然你如果只想让局部的链接有这种效果的话，自己去选择对象吧。

　　也许你也已经注意到本站在点击链接的时候，除了链接文本变为 loading…之外，还会在左上角弹出页面加载的提示，虽然都是些噱头的功能，但是无疑会让用户觉得很眩，多少会吸引用户的注意力从而让等待显得不那么漫长。

　　我的做法是在你的模板里放置如下代码( CSS 自行控制，别忘了让其绝对定位到顶部)：

<div id="clickload">页面假装异步加载中...</div>

　　然后就是使用 jQuery 来控制以上的 Div 的显示：

$('a').click(function(){
$(this).text('loading...');
$('#clickload').show();
});

　　不过有一点要提醒的是，显然你不能对全站的 a 链接都启用这个效果，因为还有一些 a 链接是在新窗口打开外链或者是 # 或者是 JavaScript 的，当你点击那些链接的时候当前页面显然不会跳转到新的页面，那么左上角弹出的提示显然也不会被刷新掉，所以你需要对 a 进行过滤。

　　我只做了简单的过滤，排除了那些新窗口打开的外链

$('a[href*="http://leeiio.me"]')

　　当然具体还得因你自己的站而对 a 进行筛选，你可以选择只针对侧边栏的链接啊或者导航链接啊或者只是文章标题等。

　　增加鼠标中间点击链接的事件捕获处理。

　　当你用鼠标中键新窗口打开链接的时候还是会触发事件，导致文字变成“Loading…”，那么我们就要对鼠标的事件进行处理了，处理的代码如下：

$('a').click(function(e){
if(e.which == 2){
return true;
}else{
$(this).text('loading...');
$('#clickload').show();
}
});

　　页面由window.location打开。

　　不知道为什么，在IE和Opera中用jquery的click(fn)函数，会丢失默认的事件也就是只执行了click(fn)函数里面写的事件，而默认的打开页面的事件丢失了，Firefox和Chrome都是正常的。不知道是不是jQuery函数的问题，往知情者告知哈。现在的解决方案代码如下：

$('a').click(function(e){
if(e.which == 2){
return true;
}else{
$(this).text('loading...');
$('#clickload').show();
window.location = $(this).attr('href');
}
});

类别：JavaScript技术来源：本站原创作者：hpping 日期：2010-03-17 10:54

上一条：最简洁短小的 JavaScript 判定 IE 浏览器
下一条：对现代开发来说，JavaScript是一种垃圾语言

软件产品

HTCMS 4.0.5
专业的旅游营销及内容管理系统
HDCMS 2.0.8
HDUT内容管理系统,为您提供专业建站CMS,原来专业站也不过如此

Hdut.Com