/* Pop-up menu */
// No sword 2008-07-03
// Http://regedit.cnblogs.com
/* Parameter description */
// Showobj: the ID of the menu to be displayed.
// Timeout
// Speed: the menu display speed. The longer the number is, the slower the display speed. The default value 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 );
// Latency 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 the menu
Jqshowobj. Hide ();
// Menu display status
VaR display = false;
// Button offset
VaR offset = button. offset ();
// Menu height
VaR Height = jqshowobj. Height ();
// Menu area width
VaR width = jqshowobj. Width ();
// Button height
VaR btnheight = button. Height ();
// Button width
VaR btnwidth = button. Width ();
// Place the positioning layer at the beginning
$ (Document. Body). prepend (hidediv );
// Put it in the container
// Container. append (jqshowobj );
// ***** Display menu method start ****//
VaR showmenu = function (){
// Exit the operation if the menu is displayed
If (Display)
{
Return false;
}
// Set container Properties
Container.css ({
Margin: "0 auto ",
Width: btnwidth + "PX ",
Height: btnheight + "PX"
});
// Locate the hidden layer
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"
});
// Display the positioning Layer
// Increase the height and width slowly
Container. animate ({
Margintop: btnheight + 4,
Height: height + 4,
Width: width + 4,
Opacity: '000000'}, speed, function (){
// Start when the animation ends //
// Display menu
Jqshowobj. Show ();
// Add a menu to the container
Container. append (jqshowobj );
// Remove the border
Container.css ({
Border: "0px"
});
// Set the display status to true.
Display = true;
// Move the cursor in
Jqshowobj. Mouseover (function (){
Cleartimeout (timer );
});
// Move the mouse away
Jqshowobj. mouseout (function (){
Hidemenu ();
});
// End at animation end //
});
};
// ***** Display the menu method end ****//
// ***** Hide the start of the menu method ****//
VaR hidemenu = function (){
Cleartimeout (timer );
// Hide the delayed menu
Timer = setTimeout (function (){
// Display the border
Container.css ({
Border: "1px solid #666666"
});
// Clear the container
Container. Empty ();
// Contract the container
Container. animate ({
Width: btnwidth, height: btnheight, margintop: '0', opacity: '0'
}, Speed, function (){
// Start when the animation ends //
// Hide the container
Container. Hide ();
// Hide the positioning Layer
Hidediv. Hide ();
// Set the display status to false.
Display = false;
// End at animation end //
});
}, Timeout );
};
// ***** Hide the menu method end ****//
// Bind the button and mouse to the event
Button. Hover (function (e ){
// Delayed display menu
Cleartimeout (timer );
Timer = setTimeout (function (){
Showmenu ();
}, Timeout );
}, Function (){
Cleartimeout (timer );
// When the mouse leaves the button, the menu is hidden if it is still displayed.
If (Display ){
Timer = setTimeout (function (){
Hidemenu ();
}, Timeout );
}
});
};
Demo
NOTE: For the problem that select blocks the pop-up menu, because it has nothing to do with the plug-in, it is not resolved here, when you use the pop-up menu, you need to pay attention to this problem. The specific solution can be automatically searched or adjusted on the layout.
