一个国外大牛写的Extjs4消息提示框
浏览数：29 /
时间：2015年06月09日
一、使用要求
extjs4要求的版本：extjs4.0.2+
浏览器要求：IE8+
二、代码
这里贴上我的代码层次架构
页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Ext.ux.window.Notification - Examples and documentation</title>
<link rel="stylesheet" type="text/css" href="../ext-4.0.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-4.0.2/bootstrap.js"></script>
<script type="text/javascript" src="../ext-4.0.2/locale/ext-lang-zh_CN.js"></script>
<link href="style/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/notification.js"> </script>
</head>
<body>
<div id="instructionsDiv" class="x-hide-display" style="padding: 10px">
<div style="float: left; width: 45%; margin-right: 5px">
<h3>Notification extension for Ext JS 4.0.2+ (version: 2.1.3)</h3>
<p>新改进的功能包括:</p>
<ul>
<li>多个栈管理器和通知<br />
静态管理器对象完全消除,让通知附加到不同的组件使用x和y坐标滑的通知。</li>
<li>所有八个角落和边缘的文档/管理器可以使用:“tl”,“tr”,“br”,“bl”、”t“,”l“、”b“,”r“。</li>
<li>可以使用x和y轴上的角落。通知可以在横向滑动。</li>
<li>当一个通知任何通知后再次自动关闭。</li>
<li>将鼠标停留在通知延迟自动关闭。</li>
<li>容易定制的css、动画、持续时间、空隙/填充等。</li>
</ul>
</div>
<div style="width: 45%; float: right">
<h3>安装指示:</h3>
<p>检查这个演示页面的来源和自己做相应修改</p>
<ul>
<li>包括: <a href="Notification.js">Notification.js</a><br /> </li>
<li>
设定一个标准的填充和文本对齐通知页面上包含这个css:
<code><pre>
.ux-notification-window .x-window-body {
text-align: center;
padding: 15px 5px 15px 5px;
}
</pre></code>
</li>
<li>如果你想添加图标窗口标题你可以包括<a href="images/icon16_info.png">info</a>and<a href="images/icon16_error.png">error</a>图标和添加这个css样式表:<br/>
<code><pre>
.ux-notification-icon-information {
background-image: url(‘images/icon16_info.png‘);
}
.ux-notification-icon-error {
background-image: url(‘images/icon16_error.png‘);
}
</pre></code>
然后设置iconCls属性“ux-notification-icon-information”或“ux-notification-icon-error”启用通知上的图标。<br />
</li>
<li>如果你想风格然后通知如下演示2中包括<a href="images/fader.png">fader.png</a> 并添加css样式表如下:<br/>
<code><pre>
.ux-notification-light .x-window-header {
background-color: transparent;
}
body .ux-notification-light {
background-image: url(‘images/fader.png‘);
}
.ux-notification-light .x-window-body {
text-align: center;
padding: 15px 5px 20px 5px;
background-color: transparent;
border: 0px solid white;
}
</pre></code>
然后设置cls属性“ux-notification-light”。 注意,这个样式有点新浏览器和不同 >=IE8.<br />
</li>
</ul>
</div>
</div>
</body>
</html>样式代码
#instructions ul li {
list-style-type:disc;
list-style-position:outside;
font-size:12px;
margin:0px 0px 0px 20px;
}
/* Icons */
.ux-notification-icon-information {
background-image: url(‘../images/icon16_info.png‘);
}
.ux-notification-icon-error {
background-image: url(‘../images/icon16_error.png‘);
}
/* Using standard theme */
.ux-notification-window .x-window-body {
text-align: center;
padding: 15px 5px 15px 5px;
}
/* Custom styling */
.ux-notification-light .x-window-header {
background-color: transparent;
}
body .ux-notification-light {
background-image: url(‘../images/fader.png‘);
}
.ux-notification-light .x-window-body {
text-align: center;
padding: 15px 5px 20px 5px;
background-color: transparent;
border: 0px solid white;
}js控制代码
Ext.Loader.setConfig({
enabled: true
});
var reusable = null;
Ext.application({
name: ‘NotificationDemo‘,
paths: {
‘Ext.ux.window‘: ‘.‘
},
requires: [
‘Ext.ux.window.Notification‘
],
launch: function() {
Ext.create(‘Ext.container.Viewport‘, {
layout: ‘fit‘,
title: ‘Ext.ux.window.Notification - 示例 和文档‘,
items: [{
layout: ‘border‘,
id: ‘fullscreen‘,
items: [{
xtype: ‘panel‘,
region: ‘north‘,
layout: ‘fit‘,
title: ‘说明‘,
contentEl: ‘instructionsDiv‘,
id: ‘instructions‘,
height: ‘40%‘,
autoScroll: true
},{
xtype: ‘panel‘,
region: ‘west‘,
layout: ‘fit‘,
title: ‘Demo 1 - 标准主题‘,
width: ‘50%‘,
items: [{
xtype: ‘panel‘,
id: ‘demo1‘,
border: false,
padding: 20,
items: [{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘BR - autoCloseDelay‘,
handler: function () {
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘, //标题
position: ‘br‘, //弹出起始位置
manager: ‘demo1‘, //组管理器
iconCls: ‘ux-notification-icon-information‘,
autoCloseDelay: 3000,//延时多久自动关闭弹出框
spacing: 40, //弹出框的间距
html: ‘Entering from the component\‘s br corner. 3000 milliseconds autoCloseDelay.<br />Increasd spacing.‘
}).show();
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘br‘,
manager: ‘demo1‘,
iconCls: ‘ux-notification-icon-error‘,
autoCloseDelay: 3000,
spacing: 20,
html: ‘Entering from the component\‘s br corner. 3000 milliseconds autoCloseDelay.<br />Increased spacing.‘
}).show();
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘br‘,
manager: ‘demo1‘,
iconCls: ‘ux-notification-icon-information‘,
autoCloseDelay: 3000,
spacing: 20,
html: ‘Entering from the component\‘s br corner. 3000 milliseconds autoCloseDelay.<br />Increased spacing.‘
}).show();
}
},{
xtype: ‘component‘,
border: false,
padding: 5
},{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘BL - stickOnClick‘,
handler: function () {
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
corner: ‘bl‘,
stickOnClick: false,
manager: ‘demo1‘,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Entering from the component\‘s bl corner. stickOnClick set to false.‘
}).show();
}
},{
xtype: ‘component‘,
border: false,
padding: 5
},{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘B - stickWhileHover‘,
handler: function () {
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘b‘,
manager: ‘demo1‘,
stickWhileHover: false,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Entering from the component\‘s b edge. stickWhileHover set to false.‘
}).show();
}
},{
xtype: ‘component‘,
border: false,
padding: 5
},{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘TL - useXAxis‘,
handler: function () {
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘tl‘,
manager: ‘demo1‘,
useXAxis: true,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Entering from the component\‘s tl corner. Using the x-axis.‘
}).show();
}
},{
xtype: ‘component‘,
border: false,
padding: 5
},{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘BR - reuse‘,
handler: function () {
if (!reusable) {
reusable = Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
closeAction: ‘hide‘,
position: ‘br‘,
manager: ‘demo1‘,
useXAxis: false,
iconCls: ‘ux-notification-icon-information‘
});
}
reusable.update(‘Entering from the component\‘s bl corner. Reusing a single notification with closeAction set to hide.<br />Random number: ‘ + Math.floor(Math.random()*10000));
reusable.show();
}
}]
}]
},{
xtype: ‘panel‘,
region: ‘center‘,
title: ‘Demo 2 - Styled‘,
items: [{
xtype: ‘panel‘,
id: ‘demo2‘,
border: false,
padding: 20,
items: [{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘T - Document as manager‘,
handler: function () {
Ext.create(‘widget.uxNotification‘, {
position: ‘t‘,
cls: ‘ux-notification-light‘,
closable: false,
title: ‘标题‘,
autoCloseDelay: 3000,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Using document as manager. No title and closable: false. Entering from the t edge.‘
}).show();
}
},{
xtype: ‘component‘,
border: false,
padding: 5
},{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘TR - Animation‘,
handler: function () {
Ext.create(‘widget.uxNotification‘, {
position: ‘tr‘,
useXAxis: true,
cls: ‘ux-notification-light‘,
iconCls: ‘ux-notification-icon-information‘,
closable: false,
title: ‘标题‘,
html: ‘Using elasticIn animation effect. No title and closable: false.‘,
slideInDuration: 800,
slideBackDuration: 1500,
autoCloseDelay: 3000,
slideInAnimation: ‘elasticIn‘,
slideBackAnimation: ‘elasticIn‘
}).show();
Ext.create(‘widget.uxNotification‘, {
position: ‘tr‘,
useXAxis: true,
cls: ‘ux-notification-light‘,
iconCls: ‘ux-notification-icon-information‘,
closable: false,
title: ‘标题‘,
html: ‘Using elasticIn animation effect. No title and closable: false.‘,
slideInDuration: 800,
slideBackDuration: 1500,
slideInAnimation: ‘elasticIn‘,
slideBackAnimation: ‘elasticIn‘
}).show();
}
},{
xtype: ‘component‘,
border: false,
padding: 5
},{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘TL - Variable size‘,
handler: function () {
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘tl‘,
manager: ‘fullscreen‘,
cls: ‘ux-notification-light‘,
width: 250,
height: 115,
autoCloseDelay: 3000,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Using document as manager. Specifying width and height will override the css as long as the value is higher then the css value.‘
}).show();
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘tl‘,
manager: ‘fullscreen‘,
cls: ‘ux-notification-light‘,
width: 200,
height: 130,
autoCloseDelay: 3000,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Using document as manager. Specifying width and height will override the css as long as the value is higher then the css value.‘
}).show();
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘tl‘,
manager: ‘fullscreen‘,
cls: ‘ux-notification-light‘,
width: 300,
height: 150,
autoCloseDelay: 3000,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Using document as manager. Specifying width and height will override the css as long as the value is higher then the css value.‘
}).show();
}
},{
xtype: ‘component‘,
border: false,
padding: 5
},{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘TR - Animation‘,
handler: function () {
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘tr‘,
manager: ‘instructions‘,
cls: ‘ux-notification-light‘,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Using bounceOut/easeIn animation effect.‘,
autoCloseDelay: 4000,
slideBackDuration: 500,
slideInAnimation: ‘bounceOut‘,
slideBackAnimation: ‘easeIn‘
}).show();
Ext.create(‘widget.uxNotification‘, {
title: ‘Notification‘,
position: ‘tr‘,
manager: ‘instructions‘,
cls: ‘ux-notification-light‘,
iconCls: ‘ux-notification-icon-information‘,
html: ‘Using bounceOut/easeIn animation effect.‘,
slideBackDuration: 500,
slideInAnimation: ‘bounceOut‘,
slideBackAnimation: ‘easeIn‘
}).show();
}
},{
xtype: ‘component‘,
border: false,
padding: 5
},{
xtype: ‘button‘,
iconCls: ‘ux-notification-icon-information‘,
text: ‘ALL - All possible combinations‘,
handler: function () {
var notificationConfig = {
position: ‘tl‘,
cls: ‘ux-notification-light‘,
closable: false,
html: ‘All positions‘,
slideInAnimation: ‘bounceOut‘,
slideBackAnimation: ‘easeIn‘
};
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.useXAxis = true;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.position = ‘tr‘;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.useXAxis = false;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.position = ‘br‘;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.useXAxis = true;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.position = ‘bl‘;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.useXAxis = false;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.position = ‘t‘;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.position = ‘r‘;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.position = ‘b‘;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
notificationConfig.position = ‘l‘;
Ext.create(‘widget.uxNotification‘, notificationConfig).show();
}
}]
}]
}]
}]
});
}
});
三、效果图
效果1
效果2
还有其他效果，及动画效果这里就不展示了，感兴趣的同学可以自己弄好看效果。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
