|
animationType
|
string
|
'slide'
|
Sets or gets the animationType property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { animationType: "fade", theme:"light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
arrowPosition
|
string
|
'left'
|
Sets or gets the arrowPosition property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { arrowPosition: "left", theme:"light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
collapseAnimationDuration
|
number
|
400
|
Sets or gets the collapseAnimationDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { collapseAnimationDuration:300, theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { disabled:true, theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
expanded
|
boolean
|
true
|
Sets or gets the expanded property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { expanded:false, theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
expandAnimationDuration
|
number
|
400
|
Sets or gets the expandAnimationDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { expandAnimationDuration:300, theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
height
|
number
|
'auto'
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { height:100, theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
headerPosition
|
string
|
'top'
|
Sets or gets the headerPosition property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { headerPosition: "bottom", theme:"light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
initContent
|
function
|
null
|
Sets or gets the initContent property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { initContent: "initContent", theme:"light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { rtl:true, theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
showArrow
|
boolean
|
true
|
Sets or gets the showArrow property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { showArrow:true, theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
toggleMode
|
string
|
'click'
|
Sets or gets the toggleMode property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { toggleMode: "none", theme:"light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
width
|
number
|
'auto'
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { width:300, theme: "light" } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
|
|
collapsing
|
Event
|
|
Code examples
Bind to the collapsing event of jqxExpander.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").addEventListener("collapsing", function(event) { // Your code here. }); }; </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
collapsed
|
Event
|
|
Code examples
Bind to the collapsed event of jqxExpander.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").addEventListener("collapsed", function(event) { // Your code here. }); }; </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
expanding
|
Event
|
|
Code examples
Bind to the expanding event of jqxExpander.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").addEventListener("expanding", function(event) { // Your code here. }); }; </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
expanded
|
Event
|
|
Code examples
Bind to the expanded event of jqxExpander.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").addEventListener("expanded", function(event) { // Your code here. }); }; </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
|
|
collapse
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").collapse(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
disable
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").disable(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").destroy(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
enable
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").enable(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
expand
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").expand(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
focus
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").focus(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
getContent
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
String
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-expander").getContent(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
getHeaderContent
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
String
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-expander").getHeaderContent(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
invalidate
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").invalidate(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").refresh(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").render(); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
setHeaderContent
|
Method
|
|
| Parameter |
Type |
Description |
| headerContent |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").setHeaderContent( 'header'); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
|
setContent
|
Method
|
|
| Parameter |
Type |
Description |
| content |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Expander Custom Element Settigns</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/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "expanderSettings"] = { } window.onload = function() { document.querySelector( "jqx-expander").setContent( 'content'); } </script></head><body> <jqx-expander settings="expanderSettings"> <div>Data Information </div> <div style="overflow:hidden;"> <table style="height: 100px; padding:10px; margin:10px;"> <tr> <td align="right">Name: </td> <td><input /></td> </tr> <tr> <td align="right">Password: </td> <td><input type="password" /></td> </tr> <tr> <td></td> <td><jqx-button>Submit </jqx-button></td>
|
