jQWidgets jqxLayout contextMenu Property

Last Updated : 10 Dec, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxLayout is used for representing a jQuery widget that is used for the creation of complex layouts with nested, resized, pinned, unpinned, and closed panels.

The contextMenu property is used for setting or getting whether a custom context menu of the specified jqxLayout widget will appear when certain elements of the widget are right-clicked.

Syntax:

For setting the contextMenu property.

$("#jqxLayout").jqxLayout({ contextMenu: true });

For getting the contextMenu property.

var contextMenu = $('#jqxLayout').jqxLayout('contextMenu');

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxribbon.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlayout.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxLayout contextMenu property. In the below example, the value for the contextMenu property has been set to true.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" 
          href="jqwidgets/styles/jqx.base.css" 
          type="text/css"/> 
    <script type="text/javascript" 
            src="scripts/jquery.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxribbon.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxlayout.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            jQWidgets jqxLayout contextMenu Property 
        </h3> 
        <div id="jqx_Layout"> 
            <div data-container="A1"> 
                <li>It is a computer science portal.</li> 
            </div> 
            <div data-container="A2"> 
                <li>It is a eCommerce platform.</li> 
            </div> 
            <div data-container="A3"> 
                <li>It is a service based company.</li> 
            </div> 
        </div> 
        <input type="button" style="margin: 5px;" 
               id="button_for_contextMenu" 
               value="Value of the contextMenu property" /> 
        <div id="log"></div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                var jqx_Layout = [{ 
                    items: [{ 
                        items: [{ 
                            items: [{ 
                                contentContainer: 'A1', 
                                type: 'documentPanel', 
                                title: 'GeeksforGeeks', 
                            }, { 
                                contentContainer: 'A2', 
                                type: 'documentPanel', 
                                title: 'Amazon', 
                            }, { 
                                contentContainer: 'A3', 
                                type: 'documentPanel', 
                                title: 'Capgemini', 
                            }], 
                            type: 'documentGroup', 
                            height: 100, 
                        },], 
                        type: 'layoutGroup', 
                        height: 100, 
                    }], 
                    orientation: 'vertical', 
                    type: 'layoutGroup' 
                }]; 
                $('#jqx_Layout').jqxLayout({ 
                    width: 370, 
                    height: 100, 
                    layout: jqx_Layout, 
                    contextMenu: true 
                }); 
                $("#button_for_contextMenu").jqxButton({ 
                    width: 300 
                }); 
                $('#button_for_contextMenu').jqxButton(). 
                    click(function () { 
                        var value = 
                      $('#jqx_Layout').jqxLayout('contextMenu'); 
                        $("#log").html(value); 
                    }) 
            }); 
        </script> 
    </center> 
</body> 
</html>