yqb
Version:
Static Package Manager
417 lines (409 loc) • 12.6 kB
JavaScript
/*
* tips
* author: <%= author %>
* version: <%= version %>
* website: http://www.431103.com
*/
;
(function($, window, document, undefined) {
var pluginName = "tips",
defaults = {
speed: 400,
background: 'rgba(255, 0, 36, .6)',
color: '#ffffff',
position: 'bottom',
width: '100%',
delay: 200,
offsetX: '-50%',
offsetY: -10,
content: null,
ajaxContentUrl: null,
useTitle: true,
onBeforeShow: null,
onShow: null,
onHide: null
};
function Plugin(element, options) {
this.element = $(element);
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this._title = this.element.attr('title');
this.mode = 'hide';
this.init();
}
$.extend(Plugin.prototype, {
init: function() {
var obj = this,
$e = this.element;
$e.addClass('tips_style').removeAttr('title');
obj.mode == 'hide' ? obj.show() : obj.hide();
$(document).on('click', function() {
if (obj.mode == 'show') {
obj.hide();
}
});
},
tooltip: function() {
if (!this.tips_bubble) {
this.tips_bubble = $(
'<div class="tips_bubble"><div class="tips_content"></div><div class="tips_arrow"></div></div>'
);
}
return this.tips_bubble;
},
show: function() {
var tips_bubble = this.tooltip(),
obj = this,
$win = $(window);
if ($.isFunction(obj.settings.onBeforeShow)) {
obj.settings.onBeforeShow($(this));
}
tips_bubble.css({
background: obj.settings.background,
color: obj.settings.color,
width: obj.settings.width
}).hide();
tips_bubble.find('.tips_content').html(obj.content());
reposition(obj);
$win.resize(function() {
reposition(obj);
});
obj.timeout = window.setTimeout(function() {
tips_bubble.appendTo('body').stop(true, true).fadeIn(obj.settings
.speed,
function() {
obj.mode = 'show';
if ($.isFunction(obj.settings.onShow)) {
obj.settings.onShow($(this));
}
});
}, obj.settings.delay);
},
hide: function() {
var obj = this,
tips_bubble = this.tooltip();
window.clearTimeout(obj.timeout);
obj.timeout = null;
tips_bubble.stop(true, true).fadeOut(obj.settings.speed,
function() {
$(this).remove();
if ($.isFunction(obj.settings.onHide) && obj.mode == 'show') {
obj.settings.onHide($(this));
}
obj.mode = 'hide';
});
},
destroy: function() {
var $e = this.element;
$e.off('.' + pluginName);
$e.removeData(pluginName);
$e.removeClass('tips_style').attr('title', this._title);
},
content: function() {
var content,
$e = this.element,
obj = this,
title = this._title;
if (obj.settings.ajaxContentUrl) {
content = $.ajax({
type: "GET",
url: obj.settings.ajaxContentUrl,
async: false
}).responseText;
} else if (obj.settings.content) {
content = obj.settings.content;
} else {
if (obj.settings.useTitle === true) {
content = title;
} else {
content = $e.data('tips');
}
}
return content;
},
update: function(key, value) {
var obj = this;
if (value) {
obj.settings[key] = value;
} else {
return obj.settings[key];
}
}
});
function isTouchSupported() {
var msTouchEnabled = window.navigator.msMaxTouchPoints;
var generalTouchEnabled = "ontouchstart" in document.createElement(
"div");
if (msTouchEnabled || generalTouchEnabled) {
return true;
}
return false;
}
function realHeight(obj) {
var clone = obj.clone();
clone.css("visibility", "hidden");
$('body').append(clone);
var height = clone.outerHeight();
clone.remove();
return height;
}
function reposition(thisthat) {
var tips_bubble = thisthat.tooltip(),
$e = thisthat.element,
obj = thisthat,
$win = $(window),
arrow = 10,
pos_top, pos_left, diff;
switch (obj.settings.position) {
case 'top':
pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tips_bubble
.outerWidth() / 2);
pos_top = $e.offset().top - realHeight(tips_bubble) - arrow;
tips_bubble.find('.tips_arrow').css({
marginLeft: -8
});
if (pos_top < $win.scrollTop()) {
pos_top = $e.offset().top + $e.outerHeight() + arrow;
tips_bubble.find('.tips_arrow').css({
'border-bottom-color': obj.settings.background,
'border-top-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('bottom');
} else {
tips_bubble.find('.tips_arrow').css({
'border-top-color': obj.settings.background,
'border-bottom-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('top');
}
break;
case 'bottom':
pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tips_bubble
.outerWidth() / 2);
pos_top = $e.offset().top + $e.outerHeight() + arrow;
tips_bubble.find('.tips_arrow').css({
marginLeft: -8
});
if (pos_top + realHeight(tips_bubble) > $win.scrollTop() + $win.outerHeight()) {
pos_top = $e.offset().top - realHeight(tips_bubble) - arrow;
tips_bubble.find('.tips_arrow').css({
'border-top-color': obj.settings.background,
'border-bottom-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('top');
} else {
tips_bubble.find('.tips_arrow').css({
'border-bottom-color': obj.settings.background,
'border-top-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass(obj.settings.position);
}
break;
case 'left':
pos_left = $e.offset().left - tips_bubble.outerWidth() - arrow;
pos_top = $e.offset().top + ($e.outerHeight() / 2) - (realHeight(
tips_bubble) / 2);
tips_bubble.find('.tips_arrow').css({
marginTop: -8,
marginLeft: ''
});
if (pos_left < $win.scrollLeft()) {
pos_left = $e.offset().left + $e.outerWidth() + arrow;
tips_bubble.find('.tips_arrow').css({
'border-right-color': obj.settings.background,
'border-left-color': 'transparent',
'border-top-color': 'transparent',
'border-bottom-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('right');
} else {
tips_bubble.find('.tips_arrow').css({
'border-left-color': obj.settings.background,
'border-right-color': 'transparent',
'border-top-color': 'transparent',
'border-bottom-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass(obj.settings.position);
}
break;
case 'right':
pos_left = $e.offset().left + $e.outerWidth() + arrow;
pos_top = $e.offset().top + ($e.outerHeight() / 2) - (realHeight(
tips_bubble) / 2);
tips_bubble.find('.tips_arrow').css({
marginTop: -8,
marginLeft: ''
});
if (pos_left + arrow + obj.settings.width > $win.scrollLeft() +
$win.outerWidth()) {
pos_left = $e.offset().left - tips_bubble.outerWidth() - arrow;
tips_bubble.find('.tips_arrow').css({
'border-left-color': obj.settings.background,
'border-right-color': 'transparent',
'border-top-color': 'transparent',
'border-bottom-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('left');
} else {
tips_bubble.find('.tips_arrow').css({
'border-right-color': obj.settings.background,
'border-left-color': 'transparent',
'border-top-color': 'transparent',
'border-bottom-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass(obj.settings.position);
}
break;
}
if (pos_left < $win.scrollLeft() && (obj.settings.position == 'bottom' ||
obj.settings.position == 'top')) {
tips_bubble.find('.tips_arrow').css({
marginLeft: pos_left - 8
});
pos_left = 0;
}
if (pos_left + obj.settings.width > $win.outerWidth() && (obj.settings.position ==
'bottom' || obj.settings.position == 'top')) {
diff = $win.outerWidth() - (pos_left + obj.settings.width);
tips_bubble.find('.tips_arrow').css({
marginLeft: -diff - 8,
marginTop: ''
});
pos_left = pos_left + diff;
}
if (pos_left < $win.scrollLeft() && (obj.settings.position == 'left' ||
obj.settings.position == 'right')) {
pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tips_bubble.outerWidth() /
2);
tips_bubble.find('.tips_arrow').css({
marginLeft: -8,
marginTop: ''
});
pos_top = $e.offset().top - realHeight(tips_bubble) - arrow;
if (pos_top < $win.scrollTop()) {
pos_top = $e.offset().top + $e.outerHeight() + arrow;
tips_bubble.find('.tips_arrow').css({
'border-bottom-color': obj.settings.background,
'border-top-color': 'transparent',
'border-left-color': 'transparent',
'border-right-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('bottom');
} else {
tips_bubble.find('.tips_arrow').css({
'border-top-color': obj.settings.background,
'border-bottom-color': 'transparent',
'border-left-color': 'transparent',
'border-right-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('top');
}
if (pos_left + obj.settings.width > $win.outerWidth()) {
diff = $win.outerWidth() - (pos_left + obj.settings.width);
tips_bubble.find('.tips_arrow').css({
marginLeft: -diff - 8,
marginTop: ''
});
pos_left = pos_left + diff;
}
if (pos_left < $win.scrollLeft()) {
tips_bubble.find('.tips_arrow').css({
marginLeft: pos_left - 8
});
pos_left = 0;
}
}
if (pos_left + obj.settings.width > $win.outerWidth() && (obj.settings.position ==
'left' || obj.settings.position == 'right')) {
pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tips_bubble.outerWidth() /
2);
tips_bubble.find('.tips_arrow').css({
marginLeft: -8,
marginTop: ''
});
pos_top = $e.offset().top - realHeight(tips_bubble) - arrow;
if (pos_top < $win.scrollTop()) {
pos_top = $e.offset().top + $e.outerHeight() + arrow;
tips_bubble.find('.tips_arrow').css({
'border-bottom-color': obj.settings.background,
'border-top-color': 'transparent',
'border-left-color': 'transparent',
'border-right-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('bottom');
} else {
tips_bubble.find('.tips_arrow').css({
'border-top-color': obj.settings.background,
'border-bottom-color': 'transparent',
'border-left-color': 'transparent',
'border-right-color': 'transparent'
});
tips_bubble.removeClass('top bottom left right');
tips_bubble.addClass('top');
}
if (pos_left + obj.settings.width > $win.outerWidth()) {
diff = $win.outerWidth() - (pos_left + obj.settings.width);
tips_bubble.find('.tips_arrow').css({
marginLeft: -diff - 8,
marginTop: ''
});
pos_left = pos_left + diff;
}
if (pos_left < $win.scrollLeft()) {
tips_bubble.find('.tips_arrow').css({
marginLeft: pos_left - 8
});
pos_left = 0;
}
}
tips_bubble.css({
left: pos_left + obj.settings.offsetX,
top: pos_top + obj.settings.offsetY
});
}
$[pluginName] = $.fn[pluginName] = function(options) {
var args = arguments;
if (options === undefined || typeof options === 'object') {
if (!(this instanceof $)) {
$.extend(defaults, options);
}
return this.each(function() {
// if (!$.data(this, 'plugin_' + pluginName)) {
// $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
// }
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
});
} else if (typeof options === 'string' && options[0] !== '_' && options !==
'init') {
var returns;
this.each(function() {
var instance = $.data(this, 'plugin_' + pluginName);
if (!instance) {
instance = $.data(this, 'plugin_' + pluginName, new Plugin(
this, options));
}
if (instance instanceof Plugin && typeof instance[options] ===
'function') {
returns = instance[options].apply(instance, Array.prototype.slice
.call(args, 1));
}
if (options === 'destroy') {
$.data(this, 'plugin_' + pluginName, null);
}
});
return returns !== undefined ? returns : this;
}
};
})(jQuery, window, document);