|
appendContainer
|
string
|
null
|
Sets or gets the appendContainer property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', appendContainer: "#container", theme:"light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
autoOpen
|
boolean
|
false
|
Sets or gets the autoOpen property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', autoOpen:true, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
animationOpenDelay
|
number
|
400
|
Sets or gets the animationOpenDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', animationOpenDelay:600, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
animationCloseDelay
|
number
|
800
|
Sets or gets the animationCloseDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', animationCloseDelay:1000, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
autoClose
|
boolean
|
true
|
Sets or gets the autoClose property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', autoClose:true, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
autoCloseDelay
|
number
|
3000
|
Sets or gets the autoCloseDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', autoCloseDelay:5000, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
blink
|
boolean
|
false
|
Sets or gets the blink property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', blink:true, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
browserBoundsOffset
|
number
|
5
|
Sets or gets the browserBoundsOffset property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', browserBoundsOffset:10, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
closeOnClick
|
boolean
|
true
|
Sets or gets the closeOnClick property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', closeOnClick:false, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', disabled:true, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
height
|
number
|
'auto'
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', height:200, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
hoverOpacity
|
number
|
1
|
Sets or gets the hoverOpacity property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', hoverOpacity:2, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
icon
|
object
|
null
|
Sets or gets the icon property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', icon: "icon", theme:"light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
notificationOffset
|
number
|
5
|
Sets or gets the notificationOffset property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', notificationOffset:10, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
opacity
|
number
|
0.9
|
Sets or gets the opacity property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', opacity:1, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
position
|
string
|
'top-right'
|
Sets or gets the position property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', position: "top-left", theme:"light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', rtl:true, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
showCloseButton
|
boolean
|
true
|
Sets or gets the showCloseButton property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', showCloseButton:false, theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
template
|
string
|
'info'
|
Sets or gets the template property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', template: "info", theme:"light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
width
|
number
|
'auto'
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', theme: "light" } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
|
|
close
|
Event
|
|
Code examples
Bind to the close event of jqxNotification.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").addEventListener("close", function(event) { // Your code here. }); }; </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
click
|
Event
|
|
Code examples
Bind to the click event of jqxNotification.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").addEventListener("click", function(event) { // Your code here. }); }; </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
open
|
Event
|
|
Code examples
Bind to the open event of jqxNotification.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").addEventListener("open", function(event) { // Your code here. }); }; </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
|
|
closeAll
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").closeAll(); } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
closeLast
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").closeLast(); } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").destroy(); } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
open
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").open(); } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").refresh(); } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Notification 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/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> window.onload = function () { var button = document.getElementById( "checkMail"); var notification = document.getElementById( "notification"); button.onclick = function () { notification.open(); } }; JQXElements.settings[ "notificationSettings"] = { position: 'top-right', appendContainer: '#container', } window.onload = function() { document.querySelector( "jqx-notification").render(); } </script></head><body> <jqx-notification id="notification" settings="notificationSettings"> <div> You have <b>2 </b> new messages. </div> <div style="font-size: smaller; text-align: center;"> Click to view. </div> </jqx-notification> <jqx-button id="checkMail"> Check mail </jqx-button> <div style="float:right; width:300px;" id="container"></div>
|
