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> |