<!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/jqxdocking.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxwindow.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
jQWidgets jqxDocking importLayout() Method
</
h3
>
<
div
id
=
"jqxdock"
style
=
"float: left;"
>
<
div
style
=
"overflow: hidden;"
>
<
div
id
=
"F0"
style
=
"height: 50px"
>
<
div
>Name</
div
>
<
div
>Nidhi Singh</
div
>
</
div
>
<
div
id
=
"F1"
style
=
"height: 50px"
>
<
div
>Subject</
div
>
<
div
>Data Structure</
div
>
</
div
>
</
div
>
<
div
style
=
"overflow: hidden;"
>
<
div
id
=
"F2"
style
=
"height: 50px"
>
<
div
>Works At</
div
>
<
div
>GeeksforGeeks</
div
>
</
div
>
</
div
>
<
input
type
=
"button"
style
=
"float: left;"
id
=
"jqxbtn"
value
=
"Click here"
/>
<
br
>
<
div
id
=
"log"
></
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$('#jqxdock').jqxDocking({
theme: 'energublue',
width: 150,
mode: 'default'
});
$("#jqxbtn").jqxButton({
width: 150
});
$("#jqxbtn").on("click", function () {
var op = $('#jqxdock').jqxDocking(
'importLayout',
'{"panel0": {"F0":{"collapsed":false}},
"panel1": {"F1":{"collapsed":false}},
"floating":{"F2":{"x":"100px","y":"200",
"width":"200px","height":"auto",
"collapsed":false}},
"orientation": "vertical"}');
if (op === null) {
$('#log').text("Layout not imported!");
}
else {
$('#log').text("Layout imported!");
}
});
});
</
script
>
</
center
>
</
body
>
</
html
>