jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by lopez306 12 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Context menu doesn't want to hide Posts

April 4, 2013 at 2:39 pm Context menu doesn't want to hide #18604

Participant

jquery – 1.9.1
jqwidgets – 2.8 – not minified version

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="jQuery Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" /> 
    <meta name="description" content="This demo demonstrates how to use the jqxMenu widget as a Context Menu. In order to display the jqxMenu as Context Menu, you need to set the 'mode' property to 'popup'. "/>
    <title id='Description'>
    This demo demonstrates how to use the jqxMenu widget as a Context Menu. In order to display the jqxMenu as Context Menu, you need to set the 'mode' property to 'popup'. 
    </title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="js/ext/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'clasic';
                // Create a jqxMenu
                var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '140px', autoOpenPopup: false, mode: 'popup', theme: theme });
                // open the context menu when the user presses the mouse right button.
                $("#jqxWidget").on('mousedown', function (event) {
                    var rightClick = isRightClick(event);
                    if (rightClick) {
                        var scrollTop = $(window).scrollTop();
                        var scrollLeft = $(window).scrollLeft();
                        contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                        return false;
                    }
                });
                // disable the default browser's context menu.
                $(document).on('contextmenu', function (e) {
                    return false;
                });
                function isRightClick(event) {
                    var rightclick;
                    if (!event) var event = window.event;
                    if (event.which) rightclick = (event.which == 3);
                    else if (event.button) rightclick = (event.button == 2);
                    return rightclick;
                }
            });
        </script>
        <div id='jqxWidget' style='vertical-align: middle; text-align: center; background: #eee;
            height: 400px; width: 400px;'>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>About Us
                        <ul>
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                            <li><a href="#">The Team</a>
                                <ul>
                                    <li><a href="#">Brigita</a></li>
                                    <li><a href="#">John</a></li>
                                    <li><a href="#">Michael</a></li>
                                    <li><a href="#">Peter</a></li>
                                    <li><a href="#">Sarah</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Clients</a></li>
                            <li><a href="#">Testimonials</a></li>
                            <li><a href="#">Press</a></li>
                            <li><a href="#">FAQs</a></li>
                        </ul>
                    </li>
                    <li>Services
                        <ul>
                            <li><a href="#">Product Development</a></li>
                            <li><a href="#">Delivery</a></li>
                            <li><a href="#">Shop Online</a></li>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Training &amp; Consulting</a></li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li><a href="#">New</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Used</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Featured</a></li>
                            <li><a href="#">Top Rated</a></li>
                            <li><a href="#">Prices</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact Us</a>
                        <ul>
                            <li><a href="#">Enquiry Form</a></li>
                            <li><a href="#">Map &amp; Driving Directions</a></li>
                            <li><a href="#">Your Feedback</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <span style='font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;'>
                Right-Click here to Open the Menu </span>
        </div>
    </div>
</body>
</html>

April 6, 2013 at 9:47 pm Context menu doesn't want to hide #18719

Peter Stoev

Keymaster

Hi lopez306,

In order to hide the menu, you may call its “close” method. If you need auto-close like behavior, you can trigger the document’s mousedown event and call the ‘close’ method inside the event handler.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 7, 2013 at 7:13 am Context menu doesn't want to hide #18728

lopez306

Participant

I know I can hide context menu manually.
I’m wondering why there is a different in behaviour between free and non-free version of your product (in free version auto-close works perfectly).

April 7, 2013 at 8:42 am Context menu doesn't want to hide #18731

Peter Stoev

Keymaster

Hi lopez306,

There is no difference between the versions as the one is a minimized copy of the other. If there’s some typo anywhere in our code, we will investigate and fix it. The version that you can distribute with your products should be minimized.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 7, 2013 at 10:32 am Context menu doesn't want to hide #18738

lopez306

Participant

So please try to run included example (in my first post) with non minified version (2.8) available on your download page for customers with license.

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.