`
dingherry
  • 浏览: 66176 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Ext.Window滑入滑出效果

 
阅读更多
项目有个模块,进去模块后,页面右下角会滑出一个向上的窗体,窗体内容区提示一些内容。

顿生好奇之心,赶紧去看看源码,,尼玛自己封装的!经过几次修改,想加入自己的元素,但愣是不生效。而且滑出的窗口,拖动后还BUG不断~~~

自己写个简易的好了,供以后设计时用到:

function getMsgWindow(errorInfo){
	msgWindow = msgWindow || new Ext.Window({
		title : '提示窗口',
		width : 210,
		height : 100,
		autoScroll : true,
		autoDestroy : true,
		closable : false, 
		plain : false,
		shadow : false,
		draggable : false ,
		html :errorInfo, iconCls : 'error' 
	});
	//show时窗口自下而上滑动
	msgWindow.on('show',function(){
		msgWindow.setPosition(document.documentElement.scrollWidth , document.documentElement.scrollHeight);
		msgWindow.el.alignTo(document, "br-br", 
				[ -0,-20 - ((msgWindow.getSize().height + 10) * 0.1) ]);
		msgWindow.el.slideIn('b', {
		  	    duration : 1,
		  	    callback : null,
		  	    scope : this
		});
	});
    msgWindow.show();
}

function optionWindow(tipsInfo){
	try{
		if(msgWindow == null){
			getMsgWindow(tipsInfo);
		}else{
			msgWindow.show();
		}
		(new Ext.util.DelayedTask(function(){
			   msgWindow.hide();
		},this)).delay(3000);
	}catch(e){
		getMsgWindow(tipsInfo);	}
}



用法:
调用optionWindow。其中tipsInfo表示窗体内要展示的信息。

注:都是EXT的东东,在msgWindow.on('show'这个监听里,你可以完成自己的事。

扩展:可以做一些改变,使窗体的滑出位置可控。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics