Custom Elements
Show Demo List
|
|
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Notification Custom Element TimerNotification</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" /> <meta name="description" content="This demo shows how to create a Custom Element Timer Notification. It also showcases a variety of notification templates." /> <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/jqxnotification.js"></script> <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> JQXElements.settings['timerNotification'] = { position: 'top-right', width: 300, autoOpen: true, closeOnClick: false, autoClose: false, showCloseButton: false, template: 'time' }; JQXElements.settings['timeOutNotification'] = { position: 'top-right', width: 300, autoOpen: false, closeOnClick: true, autoClose: false, template: 'time' }; JQXElements.settings['correctNotification'] = { position: 'top-right', width: 300, autoOpen: false, closeOnClick: true, autoClose: true, template: 'success' }; JQXElements.settings['wrongNotification'] = { position: 'top-right', width: 300, autoOpen: false, closeOnClick: true, autoClose: true, template: 'error' }; JQXElements.settings['errorTimeOutNotification'] = { position: 'top-right', width: 300, autoOpen: false, closeOnClick: true, autoClose: true, template: 'error' }; window.onload = function() { var myNotifications = document.querySelectorAll('jqx-notification'); var myButton = document.querySelector('jqx-button'); var myInput = document.querySelector('jqx-input'); myNotifications[0].addEventListener('close', function() { if (myInput.val() != 8) { myNotifications[1].open(); } }); myButton.addEventListener('click', function() { if (seconds > 1) { if (myInput.val() == 8) { myNotifications[2].open(); clearInterval(interval); myNotifications[0].closeLast(); } else { myNotifications[3].open(); } } else { myNotifications[4].open(); } }); var seconds = 30; var interval = setInterval( function() { if (seconds > 1) { seconds--; document.querySelectorAll('.timer')[1].innerHTML = seconds; } else { clearInterval(interval); myNotifications[0].closeLast(); } }, 1000); }; </script> </head> <body> <div class="example-description"> This demo shows how to create a timer notification. It also showcases a variety of notification templates. </div> <jqx-notification settings="timerNotification"> <div> Hurry, you have <span class="timer">30</span> seconds left! </div> </jqx-notification> <jqx-notification settings="timeOutNotification"> <div>Time is up!</div> </jqx-notification> <jqx-notification settings="correctNotification"> <div>Your answer is correct.</div> </jqx-notification> <jqx-notification settings="wrongNotification"> <div>Your answer is incorrect.</div> </jqx-notification> <jqx-notification settings="errorTimeOutNotification"> <div>Time is up!</div> </jqx-notification> <div> Solve the equasion in 30 seconds: </div> <div> <span>20 - 3 4 =</span> <jqx-input></jqx-input> </div> <br /> <jqx-button id="submitAnswer"> Submit answer </jqx-button> </body> </html>
appendContainer | string | null | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
autoOpen | boolean | false | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
animationOpenDelay | number | 400 | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
animationCloseDelay | number | 800 | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
autoClose | boolean | true | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
autoCloseDelay | number | 3000 | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
blink | boolean | false | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
browserBoundsOffset | number | 5 | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
closeOnClick | boolean | true | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
disabled | boolean | false | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
height | number | 'auto' | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
hoverOpacity | number | 1 | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
icon | object | null | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
notificationOffset | number | 5 | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
opacity | number | 0.9 | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
position | string | 'top-right' | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
rtl | boolean | false | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
showCloseButton | boolean | true | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
template | string | 'info' | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
theme | string | '' | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
width | number | 'auto' | ||||||
Sets or gets the <!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> </body> </html> |
||||||||
Events |
||||||||
close | Event | |||||||
Code examples
Bind to the
<!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> </body> </html> |
||||||||
click | Event | |||||||
Code examples
Bind to the
<!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> </body> </html> |
||||||||
open | Event | |||||||
Code examples
Bind to the
<!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> </body> </html> |
||||||||
Methods |
||||||||
closeAll | Method | |||||||
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> </body> </html> |
||||||||
closeLast | Method | |||||||
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> </body> </html> |
||||||||
destroy | Method | |||||||
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> </body> </html> |
||||||||
open | Method | |||||||
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> </body> </html> |
||||||||
refresh | Method | |||||||
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> </body> </html> |
||||||||
render | Method | |||||||
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> </body> </html> |