基于JQUERY 很灵活的TIP 工具 qTip2

/* * qTip2 - Pretty powerful tooltips * http://craigsworks.com/projects/qtip2/ * * Version: nightly * Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com * * Dual licensed under MIT or GPLv2 licenses * http://en.wikipedia.org/wiki/MIT_License * http://en.wikipedia.org/wiki/GNU_General_Public_License * * Date: Thu Dec 15 11:17:28.0000000000 2011 */ /*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */ /*global window: false, jQuery: false, console: false */ (function($, window, undefined) { "use strict"; // Enable ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ // Munge the primitives - Paul Irish tip var TRUE = true, FALSE = false, NULL = null, // Shortcut vars QTIP, PLUGINS, MOUSE, usedIDs = {}, uitooltip = 'ui-tooltip', widget = 'ui-widget', disabled = 'ui-state-disabled', selector = 'div.qtip.'+uitooltip, defaultClass = uitooltip + '-default', focusClass = uitooltip + '-focus', hoverClass = uitooltip + '-hover', fluidClass = uitooltip + '-fluid', hideOffset = '-31000px', replaceSuffix = '_replacedByqTip', oldtitle = 'oldtitle', trackingBound; /* Thanks to Paul Irish for this one: http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/ */ function log() { log.history = log.history || []; log.history.push(arguments); // Make sure console is present if('object' === typeof console) { // Setup console and arguments var c = console[ console.warn ? 'warn' : 'log' ], args = Array.prototype.slice.call(arguments), a; // Add qTip2 marker to first argument if it's a string if(typeof arguments[0] === 'string') { args[0] = 'qTip2: ' + args[0]; } // Apply console.warn or .log if not supported a = c.apply ? c.apply(console, args) : c(args); } } // Option object sanitizer function sanitizeOptions(opts) { var content; if(!opts || 'object' !== typeof opts) { return FALSE; } if(opts.metadata === NULL || 'object' !== typeof opts.metadata) { opts.metadata = { type: opts.metadata }; } if('content' in opts) { if(opts.content === NULL || 'object' !== typeof opts.content || opts.content.jquery) { opts.content = { text: opts.content }; } content = opts.content.text || FALSE; if(!$.isFunction(content) && ((!content && !content.attr) || content.length < 1 || ('object' === typeof content && !content.jquery))) { opts.content.text = FALSE; } if('title' in opts.content) { if(opts.content.title === NULL || 'object' !== typeof opts.content.title) { opts.content.title = { text: opts.content.title }; } content = opts.content.title.text || FALSE; if(!$.isFunction(content) && ((!content && !content.attr) || content.length < 1 || ('object' === typeof content && !content.jquery))) { opts.content.title.text = FALSE; } } } if('position' in opts) { if(opts.position === NULL || 'object' !== typeof opts.position) { opts.position = { my: opts.position, at: opts.position }; } } if('show' in opts) { if(opts.show === NULL || 'object' !== typeof opts.show) { if(opts.show.jquery) { opts.show = { target: opts.show }; } else { opts.show = { event: opts.show }; } } } if('hide' in opts) { if(opts.hide === NULL || 'object' !== typeof opts.hide) { if(opts.hide.jquery) { opts.hide = { target: opts.hide }; } else { opts.hide = { event: opts.hide }; } } } if('style' in opts) { if(opts.style === NULL || 'object' !== typeof opts.style) { opts.style = { classes: opts.style }; } } // Sanitize plugin options $.each(PLUGINS, function() { if(this.sanitize) { this.sanitize(opts); } }); return opts; } /* * Core plugin implementation */ function QTip(target, options, id, attr) { // Declare this reference var self = this, docBody = document.body, tooltipID = uitooltip + '-' + id, isPositioning = 0, isDrawing = 0, tooltip = $(), namespace = '.qtip-' + id, elements, cache; // Setup class attributes self.id = id; self.rendered = FALSE; self.elements = elements = { target: target }; self.timers = { img: {} }; self.options = options; self.checks = {}; self.plugins = {}; self.cache = cache = { event: {}, target: $(), disabled: FALSE, attr: attr }; /* * Private core functions */ function convertNotation(notation) { var i = 0, obj, option = options, // Split notation into array levels = notation.split('.'); // Loop through while( option = option[ levels[i++] ] ) { if(i < levels.length) { obj = option; } } return [obj || options, levels.pop()]; } function setWidget() { var on = options.style.widget; tooltip.toggleClass(widget, on).toggleClass(defaultClass, options.style.default && !on); elements.content.toggleClass(widget+'-content', on); if(elements.titlebar){ elements.titlebar.toggleClass(widget+'-header', on); } if(elements.button){ elements.button.toggleClass(uitooltip+'-icon', !on); } } function removeTitle(reposition) { if(elements.title) { elements.titlebar.remove(); elements.titlebar = elements.title = elements.button = NULL; // Reposition if enabled if(reposition !== FALSE) { self.reposition(); } } } function createButton() { var button = options.content.title.button, isString = typeof button === 'string', close = isString ? button : 'Close tooltip'; if(elements.button) { elements.button.remove(); } // Use custom button if one was supplied by user, else use default if(button.jquery) { elements.button = button; } else { elements.button = $('<a />', { 'class': 'ui-state-default ui-tooltip-close ' + (options.style.widget ? '' : uitooltip+'-icon'), 'title': close, 'aria-label': close }) .prepend( $('<span />', { 'class': 'ui-icon ui-icon-close', 'html': '&times;' }) ); } // Create button and setup attributes elements.button.appendTo(elements.titlebar) .attr('role', 'button') .click(function(event) { if(!tooltip.hasClass(disabled)) { self.hide(event); } return FALSE; }); // Redraw the tooltip when we're done self.redraw(); } function createTitle() { var id = tooltipID+'-title'; // Destroy previous title element, if present if(elements.titlebar) { removeTitle(); } // Create title bar and title elements elements.titlebar = $('<div />', { 'class': uitooltip + '-titlebar ' + (options.style.widget ? 'ui-widget-header' : '') }) .append( elements.title = $('<div />', { 'id': id, 'class': uitooltip + '-title', 'aria-atomic': TRUE }) ) .insertBefore(elements.content) // Button-specific events .delegate('.ui-tooltip-close', 'mousedown keydown mouseup keyup mouseout', function(event) { $(this).toggleClass('ui-state-active ui-state-focus', event.type.substr(-4) === 'down'); }) .delegate('.ui-tooltip-close', 'mouseover mouseout', function(event){ $(this).toggleClass('ui-state-hover', event.type === 'mouseover'); }); // Create button if enabled if(options.content.title.button) { createButton(); } // Redraw the tooltip dimensions if it's rendered else if(self.rendered){ self.redraw(); } } function updateButton(button) { var elem = elements.button, title = elements.title; // Make sure tooltip is rendered and if not, return if(!self.rendered) { return FALSE; } if(!button) { elem.remove(); } else { if(!title) { createTitle(); } createButton(); } } function updateTitle(content, reposition) { var elem = elements.title; // Make sure tooltip is rendered and if not, return if(!self.rendered || !content) { return FALSE; } // Use function to parse content if($.isFunction(content)) { content = content.call(target, cache.event, self); } // Remove title if callbac