jQuery.niceTitle.js 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /*
  2. * jQuery niceTitle plugin
  3. * Version 1.00 (1-SEP-2009)
  4. * @author leeo(IT北瓜)
  5. * @requires jQuery v1.2.6 or later
  6. *
  7. * Examples at: http://imleeo.com/jquery-example/jQuery.niceTitle.html
  8. * Copyright (c) 2009-2010 IT北瓜www.imleeo.com
  9. * Dual licensed under the MIT and GPL licenses:
  10. * http://www.opensource.org/licenses/mit-license.php
  11. * http://www.gnu.org/licenses/gpl.html
  12. *History:
  13. *Version 1.00 (1-SEP-2009) The first release
  14. *Version 1.10 (7-SEP-2009) Fixed the bug in IE when change parameter "bgColor"(add code: line: 68,69)
  15. */
  16. ;(function($) {
  17. $.fn.niceTitle = function(options){
  18. var opts = $.extend({}, $.fn.niceTitle.defaults, options);
  19. var _self = this;
  20. this.initialize = function(_opts){
  21. var htmlStr = "";
  22. if(jQuery.browser.msie){//如果是IE浏览器,则通过css来产生圆角效果
  23. htmlStr = '<div id="niceTitle">' +
  24. '<span>' +
  25. '<span class="r1"></span>' +
  26. '<span class="r2"></span>' +
  27. '<span class="r3"></span>' +
  28. '<span class="r4"></span>' +
  29. '</span>' +
  30. '<div id="niceTitle-ie"><p><em></em></p></div>' +
  31. '<span>' +
  32. '<span class="r4"></span>' +
  33. '<span class="r3"></span>' +
  34. '<span class="r2"></span>' +
  35. '<span class="r1"></span>' +
  36. '</span>' +
  37. '</div>';
  38. }else{
  39. htmlStr = '<div id="niceTitle"><p><em></em></p></div>';
  40. }
  41. $(_self).mouseover(function(e){
  42. this.tmpTitle = this.title;//等价于$(this).attr("title");
  43. this.tmpHref = this.href;//等价于$(this).attr("href");
  44. var _length = _opts.urlSize;
  45. this.tmpHref = (this.tmpHref.length > _length ? this.tmpHref.toString().substring(0,_length) + "..." : this.tmpHref);
  46. this.title = "";//等价于$(this).attr("title", "");
  47. $(htmlStr).appendTo("body").find("p").prepend(this.tmpTitle + "<br />").css({"color": _opts.titleColor}).find("em").text(this.tmpHref).css({"color": _opts.urlColor});
  48. var obj = $('#niceTitle')
  49. obj.css({
  50. "position":"absolute",
  51. "text-align":"left",
  52. "padding":"5px",
  53. "opacity": _opts.opacity,
  54. "top": (e.pageY + _opts.y) + "px",
  55. "left": (e.pageX + _opts.x) + "px",
  56. "z-index": _opts.zIndex,
  57. "max-width": _opts.maxWidth + "px",
  58. "width": "auto !important",
  59. "width": _opts.maxWidth + "px",
  60. "min-height": _opts.minHeight + "px",
  61. "-moz-border-radius": _opts.radius + "px",
  62. "-webkit-border-radius": _opts.radius + "px"
  63. });
  64. if(!jQuery.browser.msie){//如果不是IE浏览器
  65. obj.css({"background": _opts.bgColor});
  66. }else{//Version 1.10修正IE下改变背景颜色
  67. $('#niceTitle span').css({"background-color": _opts.bgColor, "border-color": _opts.bgColor});
  68. $('#niceTitle-ie').css({"background": _opts.bgColor, "border-color": _opts.bgColor});
  69. }
  70. obj.show('fast');
  71. }).mouseout(function(){
  72. this.title = this.tmpTitle;
  73. $('#niceTitle').remove();
  74. }).mousemove(function(e){
  75. $('#niceTitle').css({
  76. "top": (e.pageY + _opts.y) + "px",
  77. "left": (e.pageX + _opts.x) + "px"
  78. });
  79. });
  80. return _self;
  81. };
  82. this.initialize(opts);
  83. };
  84. $.fn.niceTitle.defaults = {
  85. x: 10,
  86. y: 20,
  87. urlSize: 30,
  88. bgColor: "#000",
  89. titleColor: "#FFF",
  90. urlColor: "#F60",
  91. zIndex: 999,
  92. maxWidth: 250,
  93. minHeight: 30,
  94. opacity: 0.8,
  95. radius: 8
  96. };
  97. })(jQuery);