jQuery tipbox pluginV0.1.0发布

最新推荐文章于 2018-11-19 17:02:00 发布

最新推荐文章于 2018-11-19 17:02:00 发布 · 172 阅读

标签

#jQuery #CSS #Ajax #JavaScript #JSP

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个自定义的jQuery插件TipBox，用于实现AJAX加载内容并显示为提示框的功能。该插件允许通过点击或鼠标悬停事件显示内容，并在鼠标离开时自动隐藏。

接触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);

用法都在源代码的注释中有说明，相应大家一看就能明白。