|
autoOpen
|
boolean
|
false
|
Sets or gets the autoOpen property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { autoOpen:true, theme: "light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
height
|
number
|
150
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { theme: "light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
html
|
string
|
null
|
Sets or gets the html property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { html: "custom HTML string", theme:"light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
isModal
|
boolean
|
false
|
Sets or gets the isModal property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { isModal:true, theme: "light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
imagePosition
|
string
|
'center'
|
Sets or gets the imagePosition property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { imagePosition: "top", theme:"light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { rtl:true, theme: "light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
text
|
string
|
"Loading..."
|
Sets or gets the text property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { text: "Loading files...", theme:"light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
textPosition
|
string
|
"bottom"
|
Sets or gets the textPosition property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { textPosition: "left", theme:"light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { theme: "light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
width
|
number
|
150
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { theme: "light" } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
|
|
create
|
Event
|
|
Code examples
Bind to the create event of jqxLoader.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { } window.onload = function() { document.querySelector( "jqx-loader").addEventListener("create", function(event) { // Your code here. }); }; function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
|
|
close
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { } window.onload = function() { document.querySelector( "jqx-loader").close(); } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
|
open
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Loader Custom Element Overview</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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxloader.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings[ "loaderSettings"] = { } window.onload = function() { document.querySelector( "jqx-loader").open(); } function open(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'openLoader').onclick = function () { loader.open(); } } function close(){ var loader = document.querySelector( 'jqx-loader'); document.getElementById( 'closeLoader').onclick = function () { loader.close(); } } </script></head><body> <jqx-loader settings="loaderSettings"></jqx-loader> <jqx-button type="button" onclick="open()" value="Open Loader" id="openLoader">Open </jqx-button> <jqx-button type="button" onclick="open()" value="Close" id="closeLoader">Close </jqx-button>
|
