Custom Elements Documentation

Properties

columns

array

[]

Sets or gets the columns property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			 columns:columns, theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

disabled

boolean

false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			disabled:true, theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

height

number

null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

minimized

boolean

false

Sets or gets the minimized property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			minimized:true, theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

minimizeButtonPosition

string

'left'

Sets or gets the minimizeButtonPosition property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			minimizeButtonPosition:"right", theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

minimizedHeight

number

Sets or gets the minimizedHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			minimizedHeight:40, theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

minimizedTitle

string

Sets or gets the minimizedTitle property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			minimizedTitle:"custom element", theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

orientation

string

"horizontal"

Sets or gets the orientation property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			orientation:"vertical", theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

popupAnimationDelay

number

250

Sets or gets the popupAnimationDelay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			popupAnimationDelay:400, theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

rtl

boolean

false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			rtl:true, theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

selection

boolean

true

Sets or gets the selection property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			selection:false, theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

selectedItem

number

Sets or gets the selectedItem property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			selectedItem:1, theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

theme

string

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

width

number

'100%'

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			theme:"light"        }    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

change

Event

Code examples

Bind to the change event of jqxNavBar.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-nav-bar").addEventListener("change", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-nav-bar").close();								}    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

destroy

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-nav-bar").destroy();								}    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

getSelectedIndex

Method

Parameter	Type	Description
None

Return Value
Number

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			        }	window.onload = function() {		var result = document.querySelector("jqx-nav-bar").getSelectedIndex();								}    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

open

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-nav-bar").open();								}    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

selectAt

Method

Parameter	Type	Description
index	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>NavBar 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/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/jqxnavbar.js"></script>    <script>		var columns = ['30%', '70%'];        JQXElements.settings["navBarSettings"] =        {			        }	window.onload = function() {		document.querySelector("jqx-nav-bar").selectAt(1);								}    </script></head><body>    <jqx-nav-bar settings="navBarSettings">        <ul>            <li>1</li>            <li>2</li>        </ul>    </jqx-nav-bar></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Methods