`

ext右下角浮动窗口

阅读更多
第一种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css">	
	<script type="text/javascript" src="Ext/ext-base.js"></script>
	<script type="text/javascript" src="Ext/ext-all.js"></script>
	<script type="text/javascript" src="Ext/ext-lang-zh_CN.js"></script>  
<title>无标题文档</title>
</head>
<style type="text/css">
#test {  
width:250px;  
height:0px;  
position:absolute;  
right:0;  
bottom:0;  
border:1px solid #999999;  
margin:0;  
padding:1px;  
overflow:hidden;
background:#FFFFFF
}
</style>
<script type="text/javascript">
Ext.onReady(function (){

var divObj = Ext.get("test");
divObj.setBounds(divObj.getX(),divObj.getY()-120,divObj.getWidth()+0,divObj.getHeight()+120,{duration:1.0});
});
</script>
</head>
<body>
<div id = "test"> test </div>
</body>
</html>

第二种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css">	
	<script type="text/javascript" src="Ext/ext-base.js"></script>
	<script type="text/javascript" src="Ext/ext-all.js"></script>
	<script type="text/javascript" src="Ext/ext-lang-zh_CN.js"></script>  
<title>无标题文档</title>
</head>

<script type="text/javascript">
Ext.namespace("Ext.ux");
Ext.ux.ToastWindowMgr = {
    positions: [] 
};
Ext.ux.ToastWindow = Ext.extend(Ext.Window, {
    initComponent: function(){
          Ext.apply(this, {
              iconCls: this.iconCls || 'information',
            width: 250,
            height: 150,
            autoScroll: true,
            autoDestroy: true,
            plain: false,
            shadow:false
          });
        this.task = new Ext.util.DelayedTask(this.hide, this);
        Ext.ux.ToastWindow.superclass.initComponent.call(this);
    },
    setMessage: function(msg){
        this.body.update(msg);
    },
    setTitle: function(title, iconCls){
        Ext.ux.ToastWindow.superclass.setTitle.call(this, title, iconCls||this.iconCls);
    },
    onRender:function(ct, position) {
        Ext.ux.ToastWindow.superclass.onRender.call(this, ct, position);
    },
    onDestroy: function(){
        Ext.ux.ToastWindowMgr.positions.remove(this.pos);
        Ext.ux.ToastWindow.superclass.onDestroy.call(this);
    },
    afterShow: function(){
        Ext.ux.ToastWindow.superclass.afterShow.call(this);
        this.on('move', function(){
               Ext.ux.ToastWindowMgr.positions.remove(this.pos);
            this.task.cancel();}
        , this);
        this.task.delay(4000);
    },
    animShow: function(){
        this.pos = 0;
        while(Ext.ux.ToastWindowMgr.positions.indexOf(this.pos)>-1)
            this.pos++;
        Ext.ux.ToastWindowMgr.positions.push(this.pos);
        this.setSize(250,150);
        this.el.alignTo(document, "br-br", [ -20, -20-((this.getSize().height+10)*this.pos) 

]);
        this.el.slideIn('b', {
            duration: 2,
            callback: this.afterShow,
            scope: this
        });    
    },
    animHide: function(){
           Ext.ux.ToastWindowMgr.positions.remove(this.pos);
        this.el.ghost("b", {
            duration: 2,
            remove: true,
         scope: this,
         callback: this.destroy
        });    
    }
}); 
Ext.onReady(function(){
 new Ext.ux.ToastWindow({
  title: '提示窗口',
  html: '测试信息',
  iconCls: 'error'
}).show(document);
})
</script>
</head>
<body>
<div id = "test"> test </div>
</body>
</html>
分享到:
评论

相关推荐

    Ext.window从右下角弹出/隐藏

    本文将详细探讨如何在ExtJS中实现一个窗口(`Ext.window`)从右下角动态弹出并隐藏的功能,类似于即时通讯软件(如MSN)中的登录提醒。 #### 二、关键技术点 ##### 1. **自定义窗口类** 为了实现上述需求,首先...

    silverlight浮动窗口FloatableWindow控件

    《Silverlight浮动窗口FloatableWindow控件详解》 在现代软件开发中,用户界面的交互性和灵活性成为衡量应用质量的重要标准。Silverlight作为一款强大的富客户端开发平台,为开发者提供了丰富的UI控件和动画效果。...

    在windows下使用Ext2Fsd访问EXT4分区

    2. **挂载和卸载**:用户可以通过Ext2Fsd将EXT4分区挂载到Windows的某个目录下,以便像操作普通NTFS或FAT分区一样操作EXT4分区。挂载和卸载的操作可以在Ext2Fsd的图形界面或者通过命令行进行。 3. **权限管理**:...

    各种弹出窗口 ext窗口

    EXT 2.0 MessageBox 和 JavaScript 弹出窗口是两种在 Web 应用程序中常见的用户交互方式。它们允许开发者向用户展示信息、询问问题或获取输入。EXT 是一个流行的 JavaScript 框架,特别是它的 EXT JS 库,用于构建富...

    Windows 7下使用Ext2Fsd读取写入Linux Ext3&Ext4分区文件

    本文将详细介绍如何在Windows 7环境下使用Ext2Fsd来处理Linux Ext3和Ext4分区。 **Ext2Fsd是什么?** Ext2Fsd(Extended File System for Windows)是一款免费的开源软件,它为Windows提供了对Linux Ext2、Ext3和...

    WindowLite 基于EXT的可拖动改变大小的提示窗口 v2.0

    总之,WindowLite v2.0是EXT框架下的一款实用工具,它为Web应用提供了易于使用的提示窗口解决方案,具备可拖动和可调整大小的特性,极大地提升了用户体验。通过EXT的强大功能和WindowLite的灵活配置,开发者可以轻松...

    ext3.jar ext使用非常多

    EXT框架的核心在于其丰富的组件库,包括数据网格、表单、窗口、工具栏、菜单等,这些组件具有高度可定制性和交互性,使得开发者可以轻松创建出功能强大、界面美观的Web应用。EXT3是EXT发展中的一个重要阶段,它引入...

    ext下载包,ext,ext包,ext下载

    3. 创建并配置EXT组件,如窗口、面板、表格等。 4. 加载和处理数据,使用EXT的数据模型和store。 5. 如果需要,添加适配器以与其他库兼容。 6. 在页面加载完成后初始化EXT应用。 EXT是一个功能强大的前端框架,特别...

    Windows读取Ext4分区的工具 Ext2Read

    虽然Ext2Read提供了对EXT分区的读取能力,但请注意,它并不支持写入操作,这意味着你不能在Windows下修改Linux分区的内容,以防止数据损坏。如果需要对EXT分区进行写操作,需要在Linux环境中进行,或者使用其他支持...

    ExtJs消息提示框

    `Ext.ux.window.Notification`是一个特定的扩展,它提供了灵活的、可自定义的弹出通知窗口,可以在屏幕的各个方向展示。这个组件允许开发者创建浮动的、可定位的消息框,可以自动消失,也可以通过用户操作关闭,增加...

    ext教程、ext核心API 、ext中文教程

    EXT的组件化思想是其核心,通过各种组件如表格(Grid)、面板(Panel)、窗口(Window)等,可以构建出复杂的UI结构。教程会详细讲解这些组件的属性、方法和事件,帮助初学者快速上手。 "EXT核心API"则深入介绍了...

    Windows读写Ext2/Ext3/Ext4文件系统

    可以读写Ext2,以Ext2方式挂载Ext3文件系统(不支持Ext3日志),不支持中文! It provides Windows NT4.0/2000/XP/2003/Vista/2008 with full access to Linux Ext2 volumes (read access andwrite access). This ...

    js实现Ext方式的将左表格中的数据移动至右表格

    本话题主要讨论如何利用Ext实现一个特定的功能:将左表格中的数据移动到右表格。这通常涉及到表格操作、数据处理和用户交互。 首先,我们需要了解Ext中的两个关键组件:`Ext.grid.Panel`(表格面板)和`Ext.data....

    ext UI效果模板

    4. 导航和布局:如选项卡面板、 accordion布局、浮动窗口、弹出对话框等,帮助构建层次分明的页面结构。 5. 图标和图像:EXT内置了丰富的图标库,可以轻松美化界面。 6. 树形视图:用于展现层级关系的数据,支持展开...

    这是关于EXT框架代码的登录窗口相关资源文件

    在给定的资源文件中,"EXT代码-登陆窗口.rar"显然是主要的关注点,它包含了EXT框架用于创建登录窗口的相关代码。 登录窗口是Web应用中的常见功能,通常包括用户名输入框、密码输入框、登录按钮以及可能的记住密码、...

    ext-2.0 ext-2.0 ext-2.0 ext-2.0 ext-2.0

    ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0

    Ext下解决无弹出窗口的设计办法.docx

    本文将探讨如何在Ext环境下解决无弹出窗口的设计问题,主要涉及“卡片式布局(Card Layout)”和“延迟加载(Lazy Loading)”这两个核心概念。 首先,我们分析传统的弹出窗口或新开标签页的方式。通常,当用户触发...

    Eclipse下Ext插件.rar

    Eclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件....

    win下查看ext3、ext4磁盘格式的小工具

    win下查看ext3、ext4磁盘格式的小工具

    Ext入门-详细教程

    Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-...

Global site tag (gtag.js) - Google Analytics