我的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 [ lym6520@qq.com ]
*/
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;
}

});
};

截张效果图:
[img]http://dl.iteye.com/upload/attachment/197009/a501e710-85cc-3a0c-9db3-ed739366932f.jpg[/img]


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

[b]新版本jpopmenu v1.0.2修复bug,取消了对mouseup事件的支持。[/b]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值