Custom Elements
Show Demo List
|
|
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element SimpleContainer</title>
<meta name="description" content="This is an example of Splitter Custom Element with simple container." />
<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="../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/jqxsplitter.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script type="text/javascript">
JQXElements.settings['splitter1Settings'] =
{
orientation: 'horizontal', panels: [{ size: '20%' }, { size: '80%' }]
};
JQXElements.settings['splitter2Settings'] =
{
panels: [{ size: '30%' }, { size: '60%' }]
};
</script>
</head>
<body>
<div class="example-description">
In this sample is demonstrated how to add a Vertical Splitter Custom Element inside a split panel of a Horizontal Splitter Custom Element.
</div>
<jqx-splitter settings="splitter1Settings">
<div>
North
</div>
<div>
<jqx-splitter settings="splitter2Settings">
<div>
West
</div>
<div>
East
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
| disabled | boolean | false | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600,disabled:true, theme:"light"
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| height | number | 300 | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| orientation | string | 'vertical' | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light", orientation:"horizontal"
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| panels | array | [] | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| resizable | boolean | true | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light",resizable:false
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| splitBarSize | number | 5 | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light",splitBarSize:10
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| showSplitBar | boolean | true | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light",showSplitBar:false
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| theme | string | '' | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| width | number | 300 | ||||||
|
Sets or gets the <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
Events |
||||||||
| collapsed | Event | |||||||
Code examples
Bind to the
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").addEventListener("collapsed", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| expanded | Event | |||||||
Code examples
Bind to the
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").addEventListener("expanded", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| resize | Event | |||||||
Code examples
Bind to the
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").addEventListener("resize", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| resizeStart | Event | |||||||
Code examples
Bind to the
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").addEventListener("resizeStart", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
Methods |
||||||||
| collapse | Method | |||||||
void <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").collapse();
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| destroy | Method | |||||||
void <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").destroy();
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| disable | Method | |||||||
void <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").disable();
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| enable | Method | |||||||
void <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").enable();
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| expand | Method | |||||||
void <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").expand();
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| render | Method | |||||||
void <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").render();
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
| refresh | Method | |||||||
void <!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Splitter Custom Element Settings</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/site.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/jqxsplitter.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings["splitterSettings"] =
{
width:600,height:600, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-splitter").refresh();
}
</script>
</head>
<body>
<jqx-splitter settings="splitterSettings">
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
West - North
</div>
<div>
West - South
</div>
</jqx-splitter>
</div>
<div>
<jqx-splitter style="width:100%; height:100%;" orientation="horizontal">
<div>
East - North
</div>
<div>
East - South
</div>
</jqx-splitter>
</div>
</jqx-splitter>
</body>
</html>
|
||||||||
