消息弹出框之 Ext和Jquery

最新推荐文章于 2018-02-26 16:34:52 发布

原创最新推荐文章于 2018-02-26 16:34:52 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js消息弹出框 #消息弹出框

Javascript相关及调优专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Ext4.2+的Notification.js插件及JQuery的jquery.messager插件实现在网页不同位置显示消息提示框。通过具体代码示例展示了如何设置弹窗的位置、样式、关闭延迟等属性。

1. 使用Ext4.2 + 实现各个屏幕位置消息弹出框，这是老外写的一个EXT插件Notification.js

插件下载位置如下：

https://github.com/EirikLorentsen/Ext.ux.window.Notification（插件下载位置）

http://www.eirik.net/Ext/ux/window/Demo.html（作者提供的demo）

以一个经典例子：右下角弹出消息框，然后调用下面showMessage方法（修改自带例子按钮点击方法"ALL - All possible combinations"）

function showMessage(data) {
    Ext.create('widget.uxNotification', {
        title: '消息提醒',
        position: 'br',
        cls: 'ux-notification-light',
        iconCls: 'ux-notification-icon-information',
        html: data,
        width: 200,
        height: 90,
        autoCloseDelay: 4000,
        slideBackDuration: 500,
        slideInAnimation: 'bounceOut',
        slideBackAnimation: 'easeIn'
    }).show();
}

2. 使用Jquery插件jquery.messager实现右下角弹出消息，这是国人写的插件

具体如何使用，

http://dl.iteye.com/topics/download/92c775a2-609c-35b5-85d7-5f61cf68e01f

下载附件!!!