我的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.bodydocument.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;}});};
截张效果图:
http://dl.iteye.com/upload/attachment/197009/a501e710-85cc-3a0c-9db3-ed739366932f.jpg
新版本jpopmenu v1.0.1增加了对click、mousedown、mouseup、oneClick等事件的支持。
新版本jpopmenu v1.0.2修复bug,取消了对mouseup事件的支持。
页:
[1]