|
contextMenu
|
boolean
|
false
|
Sets or gets the contextMenu property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout,contextMenu:true, theme: "light" } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
height
|
number
|
null
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
layout
|
array
|
[]
|
Sets or gets the layout property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
minGroupHeight
|
number
|
100
|
Sets or gets the minGroupHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light",minGroupHeight:200 } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
minGroupWidth
|
number
|
100
|
Sets or gets the minGroupWidth property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light",minGroupWidth:150 } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
resizable
|
boolean
|
true
|
Sets or gets the resizable property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light",resizable:false } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light",rtl:true } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
|
|
create
|
Event
|
|
Code examples
Bind to the create event of jqxDockingLayout.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } window.onload = function() { document.querySelector( "jqx-docking-layout").addEventListener("create", function(event) { // Your code here. }); }; </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
dock
|
Event
|
|
Code examples
Bind to the dock event of jqxDockingLayout.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } window.onload = function() { document.querySelector( "jqx-docking-layout").addEventListener("dock", function(event) { // Your code here. }); }; </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
floatGroupClosed
|
Event
|
|
Code examples
Bind to the floatGroupClosed event of jqxDockingLayout.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } window.onload = function() { document.querySelector( "jqx-docking-layout").addEventListener("floatGroupClosed", function(event) { // Your code here. }); }; </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
float
|
Event
|
|
Code examples
Bind to the float event of jqxDockingLayout.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } window.onload = function() { document.querySelector( "jqx-docking-layout").addEventListener("float", function(event) { // Your code here. }); }; </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
pin
|
Event
|
|
Code examples
Bind to the pin event of jqxDockingLayout.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } window.onload = function() { document.querySelector( "jqx-docking-layout").addEventListener("pin", function(event) { // Your code here. }); }; </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
resize
|
Event
|
|
Code examples
Bind to the resize event of jqxDockingLayout.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } window.onload = function() { document.querySelector( "jqx-docking-layout").addEventListener("resize", function(event) { // Your code here. }); }; </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
unpin
|
Event
|
|
Code examples
Bind to the unpin event of jqxDockingLayout.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { layout:layout, theme: "light" } window.onload = function() { document.querySelector( "jqx-docking-layout").addEventListener("unpin", function(event) { // Your code here. }); }; </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
|
|
addFloatGroup
|
Method
|
|
| Parameter |
Type |
Description |
| width |
number |
|
| height |
number |
|
| position |
object |
position.x and position.y |
| panelType |
string |
'layoutPanel' or 'documentPanel' |
| title |
string |
|
| content |
string |
|
| initContent |
object |
Function which initializes the content |
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { width:850,height:600 } window.onload = function() { document.querySelector( "jqx-docking-layout").addFloatGroup(200,200,{x:10, y:10}, 'layoutPanel','Title','Content'); } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { width:850,height:600 } window.onload = function() { document.querySelector( "jqx-docking-layout").destroy(); } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
loadLayout
|
Method
|
|
| Parameter |
Type |
Description |
| layout |
object |
the object returned from saveLayout |
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { width:850,height:600 } window.onload = function() { document.querySelector( "jqx-docking-layout").loadLayout(layout); } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { width:850,height:600 } window.onload = function() { document.querySelector( "jqx-docking-layout").refresh(); } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { width:850,height:600 } window.onload = function() { document.querySelector( "jqx-docking-layout").render(); } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
|
saveLayout
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DockingLayout Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script> <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script> var layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '50%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '50%', pinnedHeight: '10%', items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }, { type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] }] }, { type: 'tabbedGroup', width: '40%', items: [{ type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel' }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'floatGroup', width: 500, height: 300, position: { x: 350, y: 250 }, items: [{ type: 'layoutPanel', title: 'Output', contentContainer: 'OutputPanel', selected: true }] } ] }]; JQXElements.settings[ "layoutSettings"] = { width:850,height:600 } window.onload = function() { var result = document.querySelector( "jqx-docking-layout").saveLayout(); } </script></head><body> <jqx-docking-layout settings="layoutSettings"> <!--The panel content divs can have a flat structure--> <!--documentGroup--> <div data-container="Document1Panel"> Document 1 content </div> <div data-container="Document2Panel"> Document 2 content </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <div data-container="OutputPanel"> Output </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> Solution structure </div> <div data-container="PropertiesPanel">
|
