Open In App

jQWidgets jqxLayout unpin Event

Improve
Improve
Like Article
Like
Save
Share
Report

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 unpin event is triggered when a group of the specified jqxLayout widget is unpinned.

Syntax:

$('#jqxLayout').on('unpin', function (event) {
  // Code Section
});

Linked Files: Download https://www.jqwidgets.com/download/  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.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 unpin event.

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 unpin Event
        </h3>
        <div id="jqx_Layout">
            <div data-container="A1">
                <ol>
                    <li>GeeksforGeeks</li>
                    <li>Amazon</li>
                    <li>Capgemini</li>
                </ol>
            </div>
            <div data-container="A2">
                <li>It is a computer science portal.</li>
            </div>
            <div data-container="A3">
                <li>It is a eCommerce platform.</li>
            </div>
            <div data-container="A4">
                <li>It is a service based company.</li>
            </div>
        </div>
        <div id="log"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                var layout = [{
                    items: [{
                        items: [{
                            contentContainer: 'A1',
                            type: 'layoutPanel',
                            title: 'List of Company'
                        }],
                        width: 80,
                        type: 'autoHideGroup',
                        alignment: 'left'
                    }, {
                        items: [{
                            items: [{
                                contentContainer: 'A2',
                                type: 'documentPanel',
                                title: 'GeeksforGeeks',
                            }, {
                                contentContainer: 'A3',
                                type: 'documentPanel',
                                title: 'Amazon',
                            }, {
                                contentContainer: 'A4',
                                type: 'documentPanel',
                                title: 'Capgemini',
                            }],
                            type: 'documentGroup',
                            height: 200,
                        },],
                        width: 370,
                        orientation: 'vertical',
                        type: 'layoutGroup',
                    }],
                    orientation: 'horizontal',
                    type: 'layoutGroup',
                }];
                $('#jqx_Layout').jqxLayout({
                    width: 450,
                    height: 200,
                    layout: layout
                });
                $('#jqx_Layout').on('unpin', function () {
                  $("#log").html('The group has been unpinned.');
                });
            });
        </script>
    </center>
</body>
  
</html>


Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlayout/jquery-layout-api.htm?search=



Last Updated : 13 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads