首页 > jQuery, 原创插件 > 原创插件之jQuery niceTitle plugin

原创插件之jQuery niceTitle plugin

历史版本:

Version 1.00  2009年9月1日  第一个发布版本

Version 1.10  2009年9月7日  修正在IE浏览器下改变背景颜色无效的bug

Version 1.20  2009年9月14日  更新后,当a标签之间的内容为一张图片时,不显示图片的alt和title,这样更美观。

Version 2.00 2009年9月19日 更新到v2.0.0,现在niceTitle能够对所有HTML标签起作用,感谢来自捷克的Macek提出的建议。v1版本只对a标签起作用。

Version 2.10 2009年9月29日 更新到v2.1.0,增加了一个showLink参数,修正了当niceTitle靠右超出屏幕显示范围时导致出现X轴滚动条的bug。感谢来自捷克的Macek的热心测试。

Version 2.20 2009年10月16日 更新到v2.1.0,增加了一个brFlag参数用于控制标题换行显示。感谢来自捷克的Macek。

History:

Version 1.00 (1-SEP-2009) The first release version

Version 1.10 (7-SEP-2009) Amendments in the IE browser to change the background color of the bug is invalid (add code: line: 68,69)

Version 1.20 (14-SEP-2009) Hide the “img” tag’s alt and title attributes if  ”a” tag includes an image.(code line: 21,46-53,84-87)

Version 2.00 (19-SEP-2009) Update to v2.0.0,Now niceTitle can works for all HTML tags. Thanks Macek for his advice.

Version 2.10 (29-SEP-2009) Add a parameter “showLink” to show or hide tag a’s href and tag img’s src. Fixed the bug, now niceTitle never marks scroll bar appears.Thanks Macek!

Version 2.20 (16-Oct-2009) Add a parameter “brFlag” to make title content multi-line display. Thanks Macek.

最近由于一个项目客户要求鼠标经过链接的时候显示一个美观一些的提示信息,因此就花了点时间写了这个小插件。效果如下:

niceTitle

虽然之前也写过几个插件,但都还没正式的去整理出来,这次是我第一次发布自己的插件,同时也将这个插件发布到jQuery官方网站上了,有兴趣的童鞋可以点击这里jQuery niceTitle plugin进行访问。

插件功能:

这个小插件只要是用来替换<a>标签title属性的默认显示效果,可以看这里的实际效果Demo

插件的使用也很简单:

<script type="text/javascript">
    $(document).ready(function(){
	    $("a, input, img, div, span").niceTitle();//要排除一些例外的元素,例如可以用a:not([class='nono'])来排除calss为"nono"的a元素
    });
</script>

该插件在IE6、IE7、Chrome、Firefox3下测试通过,如果各位童鞋发现什么bug,请给我留言以便使插件更完善,谢谢~~~






原创文章:
原创插件之jQuery niceTitle plugin

转载请注明:
转载自IT北瓜

本文链接地址:
http://imleeo.com/jquery/jquery-nicetitle-plugin.html






  1. 2010年3月6日15:52 | #1

    @小鸟
    直接从博客上复制代码会有问题,因为博客自动将英文引号转成中文的了,我想肯能是这个原因。。。背景图案是个不错的建议,考虑一下。。。到时真的做了会发布出来。。。最近半年项目实在太忙。。。

  2. 小鸟
    2010年3月6日15:02 | #2

    谢谢 你修改的文件可以使用
    我明明是直接复制你所写的判断语句啊
    郁闷了
    问题解决了
    很感谢
    这个插件很喜欢

    有个小意见:
    加一个控制语句,是否启用背景图案,这样就可以美化提示了
    类似 是否显示link 那个判断
    :daxiao:

  3. 2010年3月6日14:56 | #3

    @小鸟
    我用IE8看了一下,没有出现什么错误,具体什么错误信息呢?我已经把修改的文件通过邮箱发给你了。。。你试试看。。。

  4. 小鸟
    2010年3月6日12:02 | #4

    您好,感谢您回答我的问题可是
    可是加了代码以后
    浏览器(IE8)提示错误
    如果去除那段代码,又能正常显示
    code:
    if($.trim(this.tmpTitle).length == 0){$(’#niceTitle’).hide();}
    return false;//阻止事件冒泡StopPagation()
    麻烦您再看看

  5. 2010年3月6日11:36 | #5

    @小鸟
    嗯。。。这个确实有点影响美观,只要简单加一个判断就行了。。。在源代码的95行(return false;//阻止事件冒泡StopPagation())之前加上if($.trim(this.tmpTitle).length == 0){$(’#niceTitle’).hide();}这样就可以了。。。 :daxiao:

  6. 小鸟
    2010年3月6日01:14 | #6

    感谢您,现在还有一个问题
    如果没有title 标签,即title标签为空的时候,鼠标后面会有一个常常的圆角长方形
    很不好看,不知道改css哪里才能即不影响 有title标签时的显示效果,又能在无title时消失呢

  7. 2010年3月5日23:48 | #7

    @小鸟
    $(”a:not([class='nono'])”).niceTitle();是用于将a标签含有class名字为“nono”的给排除掉,就是说你可以在不需要这个效果的那些a标签中加上class=”nono”,如果所有的都要有这个效果,那么就$(”a”).niceTitle();

评论分页
  1. 本文目前尚无任何 trackbacks 和 pingbacks.

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。