已经不记得是怎样发现Learning jQuery这个博客了。首先看到的是关于在网页中加载 jQuery的几篇博文，非常不错，而且改进后的版本挺人性化的。所给链接上有小书签的链接，这里这不再给出了（不懂e文的童鞋请在页面上搜索“jQuerify”）。
觉得这个博客非常不错，当然不能看完一走了之了。于是订阅之，然后就发现了这个简单的jQuery插件——eztip，这里有作者写的demo，效果图如下：
点击这里，然后把鼠标移到本页的链接上，你也可以看到类似的提示哦！
这是所用到的代码，很简单呵：
$(document).ready(function() {
$('.tips').eztip('a', {contentAttrs: ['title','href'], opacity: .75});
});
样式还得自己定义一下：
.simple-tip { position: absolute; background-color: #cec; border: 1px solid #393; padding: 6px;}
这个插件有点小问题：当链接位于页面右边缘或者下边缘时，提示仍然会出现在右下方（或者你定义的其它位置），造成出现滚动条并且看不到提示的情况。
不过，既然能在任意页面通过小书签加载 jQuery，何不通过小书签把这个提示也加上呢？于是，仿照 jQuerify 小书签，我自己也写了一个给链接加上提示的小书签。调试它花了我一个小时左右呢，这还是有Vim和jsbeautify这个清理 Javascript 的 Vim 插件的帮助的情况下。注意，使用前要先确定页面已加载 jQuery，如果网页没有使用 jQuery 的话就用上面介绍的小书签啦。下面给出这个小书签的代码：
javascript: (function() {
var el = document.createElement('div'),
b = document.getElementsByTagName('body')[0];
msg = '';
el.style.position = 'fixed';
el.style.height = '32px';
el.style.width = '220px';
el.style.marginLeft = '-110px';
el.style.top = '0';
el.style.left = '50%';
el.style.padding = '5px 10px 5px 10px';
el.style.zIndex = 1001;
el.style.fontSize = '12px';
el.style.color = '#222';
el.style.backgroundColor = '#f99';
if (typeof jQuery == 'undefined') {
msg = 'This page is not using jQuery, sorry!';
return showMsg();
}
function getScript(url, success) {
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
success();
}
};
head.appendChild(script);
}
getScript('http://plugins.learningjquery.com/eztip/jquery.eztip.js', function() {
jQuery('body').eztip('a', {
contentAttrs: ['href', 'title'],
opacity: .9
});
jQuery('.simple-tip').css({
position: 'absolute',
zIndex: 9999,
backgroundColor: '#cec',
color: '#131',
border: '1px solid #393',
padding: '6px'
});
msg = 'link tip ready!';
return showMsg();
});
function showMsg() {
el.innerHTML = msg;
b.appendChild(el);
window.setTimeout(function() {
if (typeof jQuery == 'undefined') {
b.removeChild(el);
} else {
jQuery(el).fadeOut('slow', function() {
jQuery(this).remove();
});
if (otherlib) {
$jq = jQuery.noConflict();
}
}
},
2500);
}
})();
