<!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 orientation Property
</
h3
>
<
div
id
=
"jqx_Docking"
style
=
"margin: 25px;"
align
=
"left"
>
<
div
>
<
div
id
=
"Window"
>
<
div
>Window</
div
>
<
div
>
<
h8
>Content of the window</
h8
>
<
ul
>
<
li
>GFG</
li
>
<
li
>CSE</
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
<
input
type
=
"button"
style
=
"margin: 29px;"
id
=
"jqxbutton_for_orientation"
value
=
"Value of the orientation property"
/>
<
div
id
=
"log"
></
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#jqx_Docking").jqxDocking({
width: 250,
orientation: 'horizontal'
});
$("#jqxbutton_for_orientation").
jqxButton({
width: 300
});
$('#jqxbutton_for_orientation').on(
'click', function () {
var Value_of_orientation =
$('#jqx_Docking').jqxDocking(
'orientation');
$("#log").html(JSON.stringify(
Value_of_orientation));
});
});
</
script
>
</
center
>
</
body
>
</
html
>