jQuery插件多如牛毛,jQuery的高手也是随处可见,作为目前主流javascript框架,jQuery已经是无孔不入。咱也跟上时髦,做点特效,自己观赏观赏,并作为以后参考。高手有时间帮忙指导指导,先谢过。
一、写在前面的话:
jucelin也是初学者,写这么个小插件用了一个上午的时间,真是会者不难,难者不会。虽说Title提示类插件已经有很多高手写出来了,如张鑫旭的jQuery万能浮动框插件,功能很强大,但就是有些代码还看不懂,所以自己用最简单的方法,自己学习写了个。
再者工作中经常要用到使用表格来显示数据,但苦于界面宽度及页面美观的限制,一些内容只能显示部分,显示全部则用title来显示,可惜的是IE的一个怪毛病,鼠标放上去之后一段时间后显示,显示一段时间后就会消失,如果内容较多,使用者准备仔细阅读时,显示的title就消失了。鉴此需求,写个脚本,应该还算值,原本用在单页面的,在对jQuery插件的好奇心下,就封装成一个插件。
二、jQuery插件的基础知识
jQuery为开发插件提拱了两个方法,分别是jQuery自身类的拓展和给jQuery对象添加方法。
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法
//插件定义
(function() {.extend({
trim: function(obj) {
return (obj + ' trim');
}
})
})(jQuery);
//调用
alert($.trim('aa'));
2.jQuery.fn.extend(object);给jQuery对象添加方法
//插件定义
(function() {.fn.alertWhileClick = function() {
(this).click(function (){
alert((this).val() + "2");
});
}
})(jQuery); //页面上为:<input id="input1" type="button" value="test"/>
//调用
$('#input1').alertWhileClick();
三、上代码
请直接访问这里:jQuery-tipsShow
四、插件使用方法
1.先引入jQuery,在引入jTipsShow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-tipsshow.js"></script>
2.调用插件
<script language="javascript">
(document).ready(function(){
//span-title,根据情况自己选择("#tipcontain").jTipsShow({
delaytime:200,
tipsTag: 'span',
tipsTitle: 'title'
});
//span-rel,根据情况自己选择
("#tipcontain").jTipsShow({
delaytime:200,
tipsTag: 'span',
tipsTitle: 'rel'
});
//td=title,根据情况自己选择("#tipcontain").jTipsShow({
delaytime:200,
tipsTag: 'td',
tipsTitle: 'title'
});
});
</script>
3.初始化参数说明
titleValue: '',//title的默认值,这个基本上没什么用,初始化了也会被替换掉,添加在插件中主要是全局使用
tipsTag: 'span',//需要显示内容的容器
tipsTitle: 'title',//显示框中要显示的内容
delaytime:500//延时,特效用的
另外被查找的容器tipcontain会被定义成position:relative,所以需要注意样式。
五、总结下
原本参考着别人的插件写的,没有查看jQuery插件的基础知识,导致两种方法弄混了,怎么调试都出错,不会走,就想跑了,呵呵,惭愧下。这个插件还是可以继续拓展的,而且效率方面可能也不是最优的,因为我还没学习到这块的内容,以后再看看能不能优化,也希望你能停下脚步,帮俺看看。
下载插件JS:https://jucelin.com/wp-content/uploads/2012/01/jQuery-tipsShow1.js
在线演示文档:https://jucelin.com/wp-content/uploads/2012/01/jTipsShow.html
六、参考资料:
jQuery插件开发:http://www.zhuoda.org/irini/112855.html
jQuery插件开发全解析:http://www.iteye.com/topic/545971
jquery插件开发范例—A Plugin Development Pattern:http://www.iteye.com/topic/349020
更多参考资料请google:http://www.google.com