98 lines
3.5 KiB
JavaScript
Executable File
98 lines
3.5 KiB
JavaScript
Executable File
/*
|
|
* jQuery niceTitle plugin
|
|
* Version 1.00 (1-SEP-2009)
|
|
* @author leeo(IT北瓜)
|
|
* @requires jQuery v1.2.6 or later
|
|
*
|
|
* Examples at: http://imleeo.com/jquery-example/jQuery.niceTitle.html
|
|
* Copyright (c) 2009-2010 IT北瓜www.imleeo.com
|
|
* Dual licensed under the MIT and GPL licenses:
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* http://www.gnu.org/licenses/gpl.html
|
|
|
|
*History:
|
|
*Version 1.00 (1-SEP-2009) The first release
|
|
*Version 1.10 (7-SEP-2009) Fixed the bug in IE when change parameter "bgColor"(add code: line: 68,69)
|
|
*/
|
|
;(function($) {
|
|
$.fn.niceTitle = function(options){
|
|
var opts = $.extend({}, $.fn.niceTitle.defaults, options);
|
|
var _self = this;
|
|
this.initialize = function(_opts){
|
|
var htmlStr = "";
|
|
if(jQuery.browser.msie){//如果是IE浏览器，则通过css来产生圆角效果
|
|
htmlStr = '<div id="niceTitle">' +
|
|
'<span>' +
|
|
'<span class="r1"></span>' +
|
|
'<span class="r2"></span>' +
|
|
'<span class="r3"></span>' +
|
|
'<span class="r4"></span>' +
|
|
'</span>' +
|
|
'<div id="niceTitle-ie"><p><em></em></p></div>' +
|
|
'<span>' +
|
|
'<span class="r4"></span>' +
|
|
'<span class="r3"></span>' +
|
|
'<span class="r2"></span>' +
|
|
'<span class="r1"></span>' +
|
|
'</span>' +
|
|
'</div>';
|
|
}else{
|
|
htmlStr = '<div id="niceTitle"><p><em></em></p></div>';
|
|
}
|
|
$(_self).mouseover(function(e){
|
|
this.tmpTitle = this.title;//等价于$(this).attr("title");
|
|
this.tmpHref = this.href;//等价于$(this).attr("href");
|
|
var _length = _opts.urlSize;
|
|
this.tmpHref = (this.tmpHref.length > _length ? this.tmpHref.toString().substring(0,_length) + "..." : this.tmpHref);
|
|
this.title = "";//等价于$(this).attr("title", "");
|
|
$(htmlStr).appendTo("body").find("p").prepend(this.tmpTitle + "<br />").css({"color": _opts.titleColor}).find("em").text(this.tmpHref).css({"color": _opts.urlColor});
|
|
var obj = $('#niceTitle')
|
|
obj.css({
|
|
"position":"absolute",
|
|
"text-align":"left",
|
|
"padding":"5px",
|
|
"opacity": _opts.opacity,
|
|
"top": (e.pageY + _opts.y) + "px",
|
|
"left": (e.pageX + _opts.x) + "px",
|
|
"z-index": _opts.zIndex,
|
|
"max-width": _opts.maxWidth + "px",
|
|
"width": "auto !important",
|
|
"width": _opts.maxWidth + "px",
|
|
"min-height": _opts.minHeight + "px",
|
|
"-moz-border-radius": _opts.radius + "px",
|
|
"-webkit-border-radius": _opts.radius + "px"
|
|
});
|
|
if(!jQuery.browser.msie){//如果不是IE浏览器
|
|
obj.css({"background": _opts.bgColor});
|
|
}else{//Version 1.10修正IE下改变背景颜色
|
|
$('#niceTitle span').css({"background-color": _opts.bgColor, "border-color": _opts.bgColor});
|
|
$('#niceTitle-ie').css({"background": _opts.bgColor, "border-color": _opts.bgColor});
|
|
}
|
|
obj.show('fast');
|
|
}).mouseout(function(){
|
|
this.title = this.tmpTitle;
|
|
$('#niceTitle').remove();
|
|
}).mousemove(function(e){
|
|
$('#niceTitle').css({
|
|
"top": (e.pageY + _opts.y) + "px",
|
|
"left": (e.pageX + _opts.x) + "px"
|
|
});
|
|
});
|
|
return _self;
|
|
};
|
|
this.initialize(opts);
|
|
};
|
|
$.fn.niceTitle.defaults = {
|
|
x: 10,
|
|
y: 20,
|
|
urlSize: 30,
|
|
bgColor: "#000",
|
|
titleColor: "#FFF",
|
|
urlColor: "#F60",
|
|
zIndex: 999,
|
|
maxWidth: 250,
|
|
minHeight: 30,
|
|
opacity: 0.8,
|
|
radius: 8
|
|
};
|
|
})(jQuery); |