jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › How to enable/disable a menu item ?
This topic contains 6 replies, has 4 voices, and was last updated by Dimitar 11 years, 6 months ago.
-
Author
-
Hi,
According to the jqxMenu API documentation I can only enable or disable the entire menu. Yet for my application I must enable/disable single menu items at application runtime depending on application states. Is there a way of doing this with jqxMenu ?
Regards,
StephanHello Stephan,
Unfortunately, menu items cannot be disabled separately.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
Could you please consider adding this as a feature to jqxMenu ? If an application has a menu bar it is (at least in my experience) quite often necessary to enable or disable menu entries depending on certain application conditions, e.g. if something has been selected, or the user has enetered something into a specific control or enabled a certain switch, etc
My requriement is that I want to display a menu that (amongst other things) offers actions for a grid: in the menu there are entries for “New”, “Delete”, “Edit”, etc. Specifically I want to disable “Delete” and “Edit” menu entries if the user has not selected a grid row, because these two actions shall operate on the current slected grid row.
How about setting the “disabled” attribute on the HTML “li” element ? Would that work correvtly in combination with an already created jqxMenu ?
Regards,
StephanHi Stephan,
Yes, this can be achieved. Sorry I didn’t post it earlier. You can disable a menu item by changing the disabled attribute dynamically, e.g.:
$("#button").click(function () { $("#item").attr("disabled", "true");});
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
I’m attempting to do this in a popup context menu, and it doesn’t appear to work. If I set the attribute ‘disabled’ to true, the li element does get a disabled=’disabled’ attribute, it just doesn’t seem actually be… disabled. I can still click on it.This is a feature I would like to have also. Without it I’ll need to use a different context menu plugin…
Hello timtate and williamsc29,
You can disable single elements of the menu with the disable method, which takes two arguments – the item’s id and true/false depending on whether you disable/enable the item. Here is an example based on the demo Context Menu.
<!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> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.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 = ""; // 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; } $("#button").click(function () { $("#jqxMenu").jqxMenu("disable", "home", true); }); }); </script> <button id="button"> Disable Home</button> <div id='jqxWidget' style='vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 400px;'> <div id='jqxMenu'> <ul> <li id="home"><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 disabled="true"><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 & 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 & 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>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.