/* pop-up menu/*
No sword, 2008-07-03.
Http://regedit.cnblogs.com
/* Parameter Description * *
Showobj: The menu ID to display
Timeout: Delay time, mouse stay/leave after how long to start show/Hide Menu
Speed: Menu display speed, the larger the number, the slower the display, the default is 100
Call Example: $ ("#button"). Dmenu ("#content");
Jquery.fn.dmenu=function (showobj,timeout,speed) {
timeout=timeout?timeout:300;
speed=speed?speed:100;
Button Object
var button=$ (this);
Delay counter
var timer=null;
Hidden floating Layer
var hidediv=$ ("<div></div>");
Container Object
var container=$ ("<div id=\" Container\ "></div>");
Container.hide ();
Hidediv.append (Container);
Menu Object
var jqshowobj=$ (showobj);
Hide Menu
Jqshowobj.hide ();
The status of the menu display
var Display=false;
Offset of the button
var offset=button.offset ();
High Menu Area
var height=jqshowobj.height ();
Menu Area Width
var width=jqshowobj.width ();
The height of the button
var btnheight=button.height ();
Width of the button
var btnwidth=button.width ();
Position the layer to the front
$ (document.body). prepend (Hidediv);
Put it in a container
Container.append (Jqshowobj);
Show Menu method Start ****//
var showmenu=function () {
If the menu is displayed, exit the operation
if (display)
{
return false;
}
Set container Properties
Container.css ({
Margin: "0 Auto",
width:btnwidth+ "px",
height:btnheight+ "px"
});
Locating hidden layers
Hidediv.css ({
Position: "Absolute",
top:offset.top+ "px",
left:offset.left+ (BTNWIDTH/2)-(WIDTH/2) + "px",
height:height+ "px",
width:width+ "px"
). Show ();
Add a black border to the container
Container.css ({
border: "1px solid #666666"
});
Show positioning layer
Width slowly increase
Container.animate ({
Margintop:btnheight+4,
Height:height+4,
Width:width+4,
Opacity: '},speed,function ' () {
start//at the end of the animation
Show Menu
Jqshowobj.show ();
Add menu into Container
Container.append (Jqshowobj);
Remove border
Container.css ({
border: "0px"
});
Show status to True
Display=true;
Mouse move into
Jqshowobj.mouseover (function () {
Cleartimeout (timer);
});
Mouse move away
Jqshowobj.mouseout (function () {
Hidemenu ();
});
end//at the end of the animation
});
};
Show Menu Method End ****//
Hide Menu Method Start ****//
var hidemenu=function () {
Cleartimeout (timer);
Delay hidden Menu
Timer=settimeout (function () {
Show border
Container.css ({
border: "1px solid #666666"
});
Empty container
Container.empty ();
Shrink Container
Container.animate ({
Width:btnwidth,height:btnheight,margintop: ' 0 ', opacity: ' 0 '
}, Speed,function () {
start//at the end of the animation
Hide Container
Container.hide ();
Positioning Layer Hide
Hidediv.hide ();
Show status to False
Display=false;
end//at the end of the animation
});
}, timeout);
};
Hide Menu Method End ****//
Bind Button Mouse past event
Button.hover (function (e) {
Delay Display Menu
Cleartimeout (timer);
Timer=settimeout (function () {
ShowMenu ();
}, timeout);
},function () {
Cleartimeout (timer);
When the mouse leaves the button, if the menu or display state is hidden
if (display) {
Timer=settimeout (function () {
Hidemenu ();
},timeout);
}
});
};
Note: For the Select Block pop-up menu problem, because it has nothing to do with the plug-in, so here, I did not solve, where to put the select is just want to remind you to use pop-up menu to notice this problem, the specific solution can be automatically searched, or in typesetting adjustment.
