LearningExtJS_new 之 effect 的使用学习(八)
日期：2014-05-16 浏览次数：20462 次
LearningExtJS_new 之 effect 的应用学习(八)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Effect Test</title> <link rel="stylesheet" type="text/css" href="../pubjs/ext/resources/css/ext-all.css"> <script type="text/javascript" src="../pubjs/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../pubjs/ext/ext-all-debug.js"></script> <script type="text/javascript" src="./effectTest.js"></script> </head> <body> <br/> <div id="target" style="background:#00ff00;width:200px;height:300px;overflow-y: hidden;">This is the target here!!!</div> <input type="text" ext:qtitle="information" ext:qtip="this is input field" ext:qwdith="100px"> </body> </html>
//一.淡入淡出效果 fading.
//1.element的fadeOut进行淡出,fadeIn方法谈入
//2.option选项中的endOpacity理论上可以展示最后的透明度.1是全部展示.
//二.框架效果,framing effect
//1.element的frame(arg1,arg2)进行展示,可以增加参数arge1表示颜色,arg2表示展示次数
//三.移动效果 ghost effect
//1.element的ghost效果,使用参数anchoring参数,默认值为bl.
//四.高亮显示 highlight effect
//1.element的effect效果,使用参数color.默认为黄色
//第二个参数是个json对象,可以配置attr 子元素的样式,endColor等属性
//五.消失,puff effect
//1.element的puff效果,使用其它一些配置选项如easing,duration...
//六.收缩效果 scaling effect
//1.参数,宽跟高.
//七.滑动消失或显示效果 sliding effect
//1.slideIn,slideOut.使用参数anchoring参数
//八.关闭效果 switchOff effect 渐渐关闭消失
//九.渐渐收缩移动 shift efffect
//1.必须加参数,否则没有效果,参数为 x,y,width,height
//十.配置参数
//@duration 多长时间完成动作.默认时间为s(秒).
//@remove 动作操作后,在dom中移除元素
//@useDisplay 是否展现
//@afterCls 动画后应用的类名
//@afterStyle 动作后应用的样式名
//@callback 动画后的回调方法
//@easing 作用效果,说明动作开始与结束之间应用的效果 如用easeBoth,easeNone,easeIn,easeOut,easeInStrong
//@stopFx && @concurrent 停止和并行
//十一.多重效果 mutiple effect
//1.chaining 链式效果 queuing 队列效果 concurrency 并行效果
//2.stopFx 阻止队列中动作
//十二.使用组件
//1.loadMask.
// 1>定义loadMask,使用show来显示,hide来隐藏
// 2>直接取元素 loadMask(msg,cls).
// 3>对于store,加载时可以用参数来实例化loadMask类
//2.quickTips && toolTip
// 1>必须先初始化 Ext.QuickTips.init();在input或其它元素中增加qtitle,qtip,qwidth等参数值配置
// 2>使用toolTip时,配置参数target,html,showDelay,title等
var effectObj = {
init : function(){
// this._testFading();
// this._testFraming();
// this._testGhost();
// this._testHighlight();
// this._testPuff();
// this._testScale();
// this._testSlide();
// this._testSwitchOff();
// this._testShift();
// this._testMutipleEffect();
// this._testCustomerAnimate();
Ext.QuickTips.init();
this._testMask();
new Ext.ToolTip({target:"target",html:"<b>this is Target!!!</b>",showDelay:1000,hideDelay:2000,title:"title"});
},
_testFading : function() {
//淡入淡出
//消失
Ext.get("target").fadeOut({endOpacity:0.25});
//3秒后显示
window.setTimeout(function() {
Ext.get("target").fadeIn({endOpacity:0.75});
}, 3000);
},
_testFraming : function(){
//框架效果
//直接展示
Ext.get("target").frame("ff00ff",3);
},
_testGhost : function(){
//移动效果
Ext.get("target").ghost("tr");
},
_testHighlight : function(){
Ext.get("target").highlight("ffffff",{attr:"color",endColor:"00ff00"});
},
_testPuff : function(){
Ext.get("target").puff({
easing : 'easeOut',
duration : .5,
remove : false,
useDisplay : false
});
},
_testScale : function(){
Ext.get("target").scale(50,100,{easing:'none'});
},
_testSlide : function(){
Ext.get("target").slideOut();
window.setTimeout(function() {
Ext.get("target").slideIn("tr");
}, 3000);
},
_testSwitchOff : function(){
Ext.get("target").switchOff();
},
_testShift : function(){
Ext.get("target").shift({
x : 0,
y : 0,
width : 100,
height : 100,
duration : 2,
remove : false,
useDisplay : false,
afterStyle : "background:red",
callback : function() {
alert("Done!!!");
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
