jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
233 lines (196 loc) • 8.46 kB
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" />
<meta name="description" content="This is an example of the settings avaliable in Custom Element Notification." />
<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/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxnotification.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
JQXElements.settings['NotificationSettings'] =
{
position: 'top-right',
opacity: 0.9,
autoOpen: false,
closeOnClick: true,
autoClose: true,
template: 'info',
blink: false,
icon: { width: 25, height: 25, url: '../../../images/smiley.png', padding: 5 }
};
JQXElements.settings['settingsExpander'] =
{
toggleMode: 'none',
showArrow: false
};
JQXElements.settings['topLeft'] =
{
checked: false,
groupName: 'position'
};
JQXElements.settings['bottomLeft'] =
{
checked: false,
groupName: 'position'
};
JQXElements.settings['bottomRight'] =
{
checked: false,
groupName: 'position'
};
JQXElements.settings['topRight'] =
{
checked: true,
groupName: 'position'
};
JQXElements.settings['templateDropDownList'] =
{
source: ['info', 'warning', 'success', 'error', 'mail', 'time', 'null'],
selectedIndex: 0,
autoDropDownHeight: true
};
JQXElements.settings['closeOnClickCheckbox'] =
{
checked: true
};
JQXElements.settings['autoCloseCheckBox'] =
{
checked: true
};
JQXElements.settings['blinkCheckbox'] =
{
checked: false
};
window.onload = function() {
var myNotification = document.querySelector('jqx-notification');
var myButton = document.querySelectorAll('jqx-button');
var myRadioButton = document.querySelectorAll('jqx-radio-button');
var myCheckBox = document.querySelectorAll('jqx-check-box');
var myExpander = document.querySelector('jqx-expander');
var myDropDownList = document.querySelector('jqx-drop-down-list');
myButton[0].addEventListener('click', function() {
myNotification.open();
});
myButton[1].addEventListener('click', function() {
myNotification.closeLast();
});
myButton[2].addEventListener('click', function() {
myNotification.closeAll();
});
myRadioButton[0].addEventListener('checked', function(event) {
myNotification.position = 'top-left';
});
myRadioButton[1].addEventListener('checked', function(event) {
myNotification.position = 'top-right';
});
myRadioButton[2].addEventListener('checked', function(event) {
myNotification.position = 'bottom-left';
});
myRadioButton[3].addEventListener('checked', function(event) {
myNotification.position = 'bottom-right';
});
myDropDownList.addEventListener('change', function(event) {
var choice = event.args.item.label;
var newTemplate;
if (choice != 'null') {
newTemplate = choice;
} else {
newTemplate = null;
}
myNotification.template = newTemplate;
});
myCheckBox[0].addEventListener('change', function(event) {
var checked = event.args.checked;
myNotification.closeOnClick = checked;
});
myCheckBox[1].addEventListener('change', function(event) {
var checked = event.args.checked;
myNotification.autoClose = checked;
});
myCheckBox[2].addEventListener('change', function(event) {
var checked = event.args.checked;
myNotification.blink = checked;
});
};
</script>
</head>
<body>
<div class="example-description">
This demo shows some of the settings available in Custom element Notification's API. Note that changes are applied to new notification instances only.
</div>
<jqx-notification settings="NotificationSettings">Sample notification</jqx-notification>
<div style="float: left; margin-left: 25%;">
<jqx-button style="margin-bottom: 10px;">
Open notification
</jqx-button><br />
<jqx-button style="margin-bottom: 10px;">
Close last notification
</jqx-button><br />
<jqx-button>
Close all notifications
</jqx-button>
</div>
<jqx-expander style="float: left; margin-left: 15px;">
<div>
jqxNotification settings
</div>
<div style="padding: 5px;">
<div>
Position:
</div>
<ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana;
font-size: 12px;">
<li>
<jqx-radio-button settings="topLeft">
Top-left
</jqx-radio-button>
</li>
<li>
<jqx-radio-button style="margin-top: 5px;" settings="topRight">
Top-right
</jqx-radio-button>
</li>
<li>
<jqx-radio-button style="margin-top: 5px;" settings="bottomLeft">
Bottom-left
</jqx-radio-button>
</li>
<li>
<jqx-radio-button style="margin-top: 5px;" settings="bottomRight">
Bottom-right
</jqx-radio-button>
</li>
</ul>
<br />
<div>
Template:
</div>
<jqx-drop-down-list settings="templateDropDownList">
</jqx-drop-down-list>
<br />
<jqx-check-box settings="closeOnClickCheckbox">
Close on click
</jqx-check-box>
<jqx-check-box settings="autoCloseCheckBox">
Auto close
</jqx-check-box>
<jqx-check-box settings="blinkCheckbox">
Blink
</jqx-check-box>
</div>
</jqx-expander>
</body>
</html>