jQuery tipbox pluginV0.1.0发布

lxy19791111

        接触jQuery也有一段时间了，但利用它来写一些项目中需要用到的插件却还是第一次。最近在一个项目中，要求点击链接时用AJAX方式获取内容并显示到链接的附近，当鼠标移开时自动隐藏此内容。由于项目中还有许多地方要采用这种方式，因此干脆将它写成了一个jQuery的plugin。现在也贴出来与大家Show一下，哈哈...当然它的使用由于是在内部使用，肯定有不适用的地方，在此也推荐另一个好的类似插件：jQuery clueTip plugin 。
 
       我的这个插件的名字叫：jQuery tipbox plugin，它的源代码如下：
    
/* * jQuery tipbox plugin * Version 0.1.0  (12/21/2008) * @requires jQuery v1.1.4+ * @requires Dimensions plugin (for jQuery versions < 1.2.5) * */;(function($) {/*** @name tipbox* @type jQuery* @cat Plugins/tooltip* @return jQuery* @author   li xiangyang <lxy19791111@163.com>* @param    options 可选参数，参数包含如下：*    showEventName:显示DIV的事件名(可选) *    hideEventName:隐藏DIV的事件名(可选) *    offsetX:下拉框的X坐标偏移量(可选)*    offsetY:下拉框的Y坐标偏移量(可选)*    loadingMsg:加载中的提示信息* @example html: <a class="tipMsg" href="../msg.jsp?id=123">test</a>*          javascript: $("a.tipMsg").tipbox({'showEventName':'click',,'hideEventName':'mouseout','offsetX':13,'offsetY':0}); */$.fn.tipbox = function(options) {options = options || {};//默认参数var defaults = {showEventName: 'click',hideEventName: 'mouseout',loadingMsg: '系统正在处理相关信息，请稍候...'};options = jQuery.extend(defaults, options);//数据容器var $tipContainer = jQuery('<div class="tipContainer" style="display:none;position:absolute;z-index:1005;"></div>');$tipContainer.appendTo(jQuery('body')[0]);//添加显示和隐藏事件处理函数return this.each(function(){var $this = jQuery(this);var url = $this.attr('href');var offset = $this.offset();$this.bind(options.showEventName, function(){$tipContainer.empty().html(options.loadingMsg)$tipContainer.css("top",offset.top+13+(options['offsetY']?options['offsetY']:0));        $tipContainer.css("left",offset.left+(options['offsetX']?options['offsetX']:0));        $tipContainer.show();jQuery.get(url,{t:Math.random()},function(msg){$tipContainer.empty().html(msg);});return false;}).bind(options.hideEventName, function(){$tipContainer.hide();});});};})(jQuery);         用法都在源代码的注释中有说明，相应大家一看就能明白。