我的jQuery插件：jpopmenu

    最近都不知道在忙些什么，没什么项目可做的，一天一天照样过的很快，昨天下午写了个jpopmenu插件，今天把这个jQuery插件整理了下放到je博客上，大家参考下:arrow:

来看看代码吧：

// / <reference path="jquery.js"/>
/*
 * jpopmenu version: 1.0.0 (2010-01-21) @ jQuery v1.3.*
 * 
 * css style:
 * .containerClass{position:absolute;z-index:999;padding:2px;background-color:white;border:1px #B1B1B1 solid;}
 * .containerClass a{display:block;width:80px;padding:3px 10px;text-decoration:none;overflow:hidden;
 *			white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;color:#525252;}
 * 
 * usage as:
 * $('#dom_id').jpopmenu({
 * 				containerClass:"containerClass",	// 容器样式
 * 				domObject:dom,					// dom对象 或 html代码
 * 				triggerEvent:'dblclick'			// 触发事件,支持：mouseover、dblclick、hover
 * 		});
 * 
 * Copyright 2009 LYM [ [e-mail] ]
 */
jQuery.fn.jpopmenu = function(setting) {

	// 默认参数
	var options = {
		containerClass : "containerClass", // 容器样式
		domObject : "请设置domObject参数!", // dom对象		
		triggerEvent : "mouseover" // 触发事件,支持：mouseover、dblclick、hover
	};
	// 使用用户设置的参数
	if (setting) {
		jQuery.extend(options, setting);
	}

	var _this = this;

	// 初始化每个对象
	return this.each(function() {
				var documentClick = null;
				// 创建容器
				var container = document.createElement("div");
				container.className = options.containerClass;
				container.style.display = "none";
				// 添加容器到document.body
				document.body.appendChild(container);
				/**
				 * 显示
				 */
				_this.show = function() {
					_this.hide();
					var offset = jQuery(_this).offset();
					with (container.style) {
						left = offset.left + "px";
						top = offset.top + jQuery(_this).height() + "px";
						display = "block";
						position = "absolute";
					}
					jQuery(document).click(documentClick = function() {
						_this.hide();
					});
				}
				/**
				 * 隐藏
				 */
				_this.hide = function() {
					jQuery(document).unbind("click", documentClick);
					jQuery("." + options.containerClass).css("display", "none");
				};
				/**
				 * 设置容器内容
				 */
				_this.setContent = function(obj) {
					if (typeof obj == "string") {
						container.innerHTML = obj;
					} else {
						container.innerHTML = "";
						container.appendChild(obj);
					}
				};
				// 把domObject添加到容器container中
				_this.setContent(options.domObject);
				//事件选择
				switch (options.triggerEvent) {
					case 'mouseover' :
						jQuery(_this).mouseover(function() {
									_this.show();
								});
						break;
					case 'dblclick' :
						jQuery(_this).dblclick(function() {
									_this.show();
								});
						break;
					case 'hover' :
						jQuery(_this).hover(function() {
									_this.show();
								});
						break;
					default :
						alert("请设置triggerEvent触发事件类型!支持：mouseover、dblclick、hover等事件。");
						break;
				}

			});
};

截张效果图：



新版本jpopmenu v1.0.1增加了对click、mousedown、mouseup、oneClick等事件的支持。

新版本jpopmenu v1.0.2修复bug，取消了对mouseup事件的支持。

评论

3 楼 lym6520 2010-02-01  

新版本jpopmenu v1.0.2修复bug，取消了对mouseup事件的支持。

2 楼 lym6520 2010-01-29  

新版本jpopmenu v1.0.1增加了对click、mousedown、mouseup、oneClick等事件的支持。

1 楼 lym6520 2010-01-23  

上传个demo！