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.
<!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: