jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Open Menu in Code
Tagged: Button, click, jqxMenu, Menu, onclick, open, open direction, pop-up, popup, setItemOpenDirection
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years ago.
-
AuthorOpen Menu in Code Posts
-
Hi I would like add an an on-click event to a button that opens a menu. Is there a way to do that? Here is the code
<script type=”text/javascript”>
$(document).ready(function () {
$(“#popHeadMenu”).jqxMenu({ height: ’15px’, theme: ‘darkblue’ });
$(“#popHeadMenu”).css(‘visibility’, ‘visible’);
$(“#popHeadMenu”).jqxMenu(‘setItemOpenDirection’, ‘lstMenu1’, ‘left’, ‘down’);
$(“#popHeadMenu”).jqxMenu({ autoOpen: false });$(‘#liAddRequest’).click(function () {
window.location.href = ‘VRRAddRequest.aspx’;
});$(‘#liViewRequests’).click(function () {
window.location.href = ‘VRRViewRequests.aspx’;
});$(‘#btnHeadMenu’).click(function () {
$(“#popHeadMenu”).jqxMenu(‘open’);
});});
</script>
<div data-role=”header” data-theme=”b”>
Portal
<h1>Current Requests</h1>
<div id=”popHeadMenu” style=’visibility: hidden; height: 20px; background-color: #336699; padding: 0px 0px 0px 0px; border: 0px 0px 0px 0px; margin-top: 0px;’ data-theme=”b”>
<ul id=”lstHeadMenu” data-mini=”true” style=’height: 20px; padding: 0px 0px 0px 0px; border: 0px 0px 0px 0px; margin-top: -2px’ data-theme=”b”>
<li id=’lstMenu1′ style=’color:White; font-weight:normal; height: 20px; padding: 0px 0px 0px 0px; border: 0px 0px 0px 0px;’>Menu
<ul style=’width: 150px;’>
<li id=’liAddRequest’>Add Request
<li id=’liViewRequests’>View Requests</div>
</div>
…Hello Gopre400,
If you are refering to the button btnHeadMenu, you have already added an on-click event to it:
$(‘#btnHeadMenu’).click(function () { $(“#popHeadMenu”).jqxMenu(‘open’); });
You can add your desired code before or after the jqxMenu open method, e.g.:
$(‘#btnHeadMenu’).click(function () { $(“#popHeadMenu”).jqxMenu(‘open’); alert("Menu is opened"); });
If you meant something else, please share more information on the matter.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar, when I put the $(“#popHeadMenu”).jqxMenu(‘open’); in the onclick event it didn’t work. Here is what I did instead…
<div data-role=”page” data-theme=”b”>
<div data-role=”header” data-theme=”b”>
Portal
<h1>Current Requests</h1>
Menu
</div>
<div data-role=”content” data-theme=”b”>
<div id=’jqxWidget’>
<div id=’jqxMenu’ >
<ul id=’ulHeadMenu’>
<li id=’liAddRequest’>Add Request
<li id=’liViewRequests’>View Current Requests
<li id=’liViewVehicleRequests’>View Vehicle Requests</div>
</div>
</div>
</div>
<script type=”text/javascript”>
$(“#jqxMenu”).jqxMenu({
width: ‘200px’,
height: ‘140px’,
autoOpenPopup: false,
mode: ‘popup’
});
$(“#jqxMenu”).jqxMenu(‘setItemOpenDirection’, ‘jqxMenu’, ‘left’, ‘down’);$(“#btnHeadMenu”).bind(‘mousedown’, function (event) {
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
$(“#jqxMenu”).jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
return false;
});
</script>However I can’t change the direction the menu opens. I have tried adjusting the variable in this method with no luck…
$(“#jqxMenu”).jqxMenu(‘setItemOpenDirection’, ‘jqxMenu’, ‘left’, ‘down’);Hi Gopre400,
Unfortunately, it is not possible to change the open direction of a popup menu. The method setItemOpenDirection is supported only when mode is set to “vertical” or “horizontal”.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.