当前位置:首页 > 开发 > Web前端 > Ext > 正文

ext右下角浮动窗口

发表于: 2013-10-13   作者:知了ing   来源:转载   浏览:
摘要: 第一种 <!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/
第一种
<!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右下角浮动窗口

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
类似qq消息弹窗的窗口 也是在网上找到但是消失的时候有一个黑色的阴影很讨厌,查了些资料稍作修改,只
Alert提示框 Ext的对话框都封装在Ext.MessageBox类,该类还有一个简写形式即Ext.Msg,可以直接通过E
效果地址: 首先 脚本创建需要弹出的窗体 function create_float_window() { var float_window_html
<script type="text/javascript" src="styles/js/jquery-1.10.1.min.js"></script> <
先看效果 未扩展 扩展后 代码说明 AndroidManifest..xml <?xml version="1.0" encoding="utf-8"?
private void 帮助ToolStripMenuItem_Click(object sender, EventArgs e) { frmNotices f = new frm
原文: Jquery--仿制360右下角弹出窗口 先发浏览器效果图,给大家看。 要实现这样的效果,按照思路,
先发浏览器效果图,给大家看。 要实现这样的效果,按照思路,第一步,写好CSS布局,将图片放到浏览
$title=“title” $message="hello,world" 有时候,要使用的实例的类保存在独立的库文件中,PowerSh
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号