jQuery插件初识:Title提示插件jTipsShow

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插件的基础知识,导致两种方法弄混了,怎么调试都出错,不会走,就想跑了,呵呵,惭愧下。这个插件还是可以继续拓展的,而且效率方面可能也不是最优的,因为我还没学习到这块的内容,以后再看看能不能优化,也希望你能停下脚步,帮俺看看。

下载插件JShttp://jucelin.com/wp-content/uploads/2012/01/jQuery-tipsShow1.js

在线演示文档:http://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

本文固定链接: http://jucelin.com/jquery-jtipsshow.html | Jucelin

该日志由 jucelin 于2012年01月13日发表在 前端设计 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery插件初识:Title提示插件jTipsShow | Jucelin
关键字: , , , , , ,

jQuery插件初识:Title提示插件jTipsShow:目前有3 条留言

  1. 沙发
    大猪:

    木有演示地址啊。

    2012-01-14 11:07 [回复]
    • jucelin:

      出现了个BUG,就撤了,刚修改完,可是公司网络不支持SSL,悲催的不知道怎么上传了。

      2012-01-14 11:12 [回复]
      • jucelin:

        顺便想你求助,你看下在IE6下的效果,中英文自动换行了。其他浏览器都没有。什么强制不换行,似乎都没效果。【解决了,呵呵】

        2012-01-14 11:34 [回复]

发表评论


快捷键:Ctrl+Enter
更多