|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!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">
|
|
height
|
number
|
300
|
Sets or gets the height property.
<!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">
|
|
orientation
|
string
|
'vertical'
|
Sets or gets the orientation property.
<!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">
|
|
panels
|
array
|
[]
|
Sets or gets the panels property.
<!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">
|
|
resizable
|
boolean
|
true
|
Sets or gets the resizable property.
<!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">
|
|
splitBarSize
|
number
|
5
|
Sets or gets the splitBarSize property.
<!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">
|
|
showSplitBar
|
boolean
|
true
|
Sets or gets the showSplitBar property.
<!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">
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!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">
|
|
width
|
number
|
300
|
Sets or gets the width property.
<!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">
|
|
|
|
collapsed
|
Event
|
|
Code examples
Bind to the collapsed event of jqxSplitter.
<!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">
|
|
expanded
|
Event
|
|
Code examples
Bind to the expanded event of jqxSplitter.
<!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">
|
|
resize
|
Event
|
|
Code examples
Bind to the resize event of jqxSplitter.
<!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">
|
|
resizeStart
|
Event
|
|
Code examples
Bind to the resizeStart event of jqxSplitter.
<!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">
|
|
|
|
collapse
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
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">
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
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">
|
|
disable
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
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">
|
|
enable
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
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">
|
|
expand
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
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">
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
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">
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
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">
|
