萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery顯示類似提醒框

jQuery顯示類似提醒框

  (function($) {   $.fn.tooltip = function(settings) {     // Configuration setup     config = {       'dialog_content_selector' : 'div.tooltip_description',       'animation_distance' : 50,       'opacity' : 0.85,       'arrow_left_offset' : 70,       'arrow_top_offset' : 50,       'arrow_height' : 20,       'arrow_width' : 20,       'animation_duration_ms' : 300,       'event_in':'mouseover',       'event_out':'mouseout'     };     if (settings) $.extend(config, settings);     /**      * Apply interaction to all the matching elements      **/     this.each(function() {       $(this).bind(config.event_in,function(){         _show(this);       })       .bind(config.event_out,function(){         _hide(this);       })     });     /**      * Positions the dialog box based on the target      * element's location      **/     function _show(target_elm) {       var dialog_content = $(target_elm).find(config.dialog_content_selector);       var dialog_box = _create(dialog_content);       var is_top_right = $(target_elm).hasClass("tooltiptopright");       var is_bottom_right = $(target_elm).hasClass("tooltipbottomright");       var is_top = $(target_elm).hasClass("tooltiptop");       var is_bottom = $(target_elm).hasClass("tooltipbottom");       var has_position = is_top_right || is_bottom_right || is_top || is_bottom;       var position;       var target_elm_position = $(target_elm).offset();       // coming from the top right       if (is_top_right || !has_position && (target_elm_position.top < $(dialog_box).outerHeight() && target_elm_position.top >= config.arrow_top_offset)) {         position = {           start : {             left : target_elm_position.left + $(target_elm).outerWidth() + config.animation_distance,             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) - config.arrow_top_offset           },           end : {             left : target_elm_position.left + $(target_elm).outerWidth(),             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) - config.arrow_top_offset           },           arrow_class : "div.left_arrow"         }       }       // coming from the bottom right       else if (is_bottom_right || !has_position && (target_elm_position.left < config.arrow_left_offset + $(target_elm).outerWidth() && target_elm_position.top > $(dialog_box).outerHeight())) {         position = {           start : {             left : target_elm_position.left + $(target_elm).outerWidth() + config.animation_distance,             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) + config.arrow_top_offset - $(dialog_box).outerHeight() + config.arrow_height           },           end : {             left : target_elm_position.left + $(target_elm).outerWidth(),             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) + config.arrow_top_offset - $(dialog_box).outerHeight() + config.arrow_height           },           arrow_class : "div.left_arrow"         }         $(dialog_box).find("div.left_arrow").css({ top: $(dialog_box).outerHeight() - (config.arrow_top_offset * 2) + "px" });       }       // coming from the top       else if (is_top || !has_position &&(target_elm_position.top + config.animation_distance > $(dialog_box).outerHeight() && target_elm_position.left >= config.arrow_left_offset)) {         position = {           start : {             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,             top  : target_elm_position.top - config.animation_distance - $(dialog_box).outerHeight()           },           end : {             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,             top  : target_elm_position.top - $(dialog_box).outerHeight() + config.arrow_height           },           arrow_class : "div.down_arrow"         }       }              // coming from the bottom       else if (is_bottom || !has_position &&(target_elm_position.top + config.animation_distance < $(dialog_box).outerHeight())) {         position = {           start : {             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,             top  : target_elm_position.top + $(target_elm).outerHeight() + config.animation_distance           },  &nb

copyright © 萬盛學電腦網 all rights reserved