Ext.Fx類
對(duì)于我這樣的懶鬼而言,F(xiàn)x類是核心類庫(kù)中最激動(dòng)人心的一個(gè)類,它不是最重要的,卻是最實(shí)用的一個(gè)類
定義了一些常用的特效方法,不妨自己多動(dòng)手試試下面的方法,很有趣的
fadeIn( [Object options] ) : Ext.Element
漸顯 options參數(shù)有以下屬性
callback:Function 完成后的回叫方法
scope:Object 目標(biāo)
easing:String 行為方法 默認(rèn)值是:easeOut,可選值在ext_base中找到,但沒(méi)有說(shuō)明,以下內(nèi)容從yahoo ui中找到的
easeNone:勻速
easeIn:開(kāi)始慢且加速
easeOut:開(kāi)始快且減速
easeBoth:開(kāi)始慢且減速
easeInStrong:開(kāi)始慢且加速,t的四次方
easeOutStrong:開(kāi)始快且減速,t的四次方
easeBothStrong:開(kāi)始慢且減速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢體會(huì)吧
afterCls:String 事件完成后元素的樣式
duration:Number 事件完成時(shí)間(以秒為單位)
remove:Boolean 事件完成后元素銷毀?
useDisplay:Boolean 隱藏元素是否使用display或visibility屬性?
afterStyle:String/Object/Function 事件完成后應(yīng)用樣式
block:Boolean 塊狀化?
concurrent:Boolean 順序還是同時(shí)執(zhí)行?
stopFx :Boolean 當(dāng)前效果完成后隨合的效果是否將停止和移除
fadeOut( [Object options] ) : Ext.Element
漸隱 fadeOut和fadeIn能使用一個(gè)特別的endOpacity屬性以指示結(jié)束時(shí)的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
frame( [String color], [Number count], [Object options] ) : Ext.Element
邊框變亮擴(kuò)展然后漸隱
例:el.frame("ff0000", 10, { duration: 3 })
ghost( [String anchor], [Object options] ) : Ext.Element
漸漸滑出視圖,anchor定義
tl 左上角(默認(rèn))
t 上居中
tr 右上角
l 左邊界的中央
c 居中
r 右邊界的中央
bl 左下角
b 下居中
br 右下角
例:
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
hasActiveFx() : Boolean
指示元素是否當(dāng)前有特效正在活動(dòng)
hasFxBlock() : Boolean
是否有特效阻塞了
highlight( [String color], [Object options] ) : Ext.Element
高亮顯示當(dāng)前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
pause( Number seconds ) : Ext.Element
暫停
puff( [Object options] ) : Ext.Element
吹,吹,吹個(gè)大氣球,元素漸大并隱沒(méi)
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
scale( Number width, Number height, [Object options] ) : Ext.Element
縮放
例:el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
});
sequenceFx()
排隊(duì)特效
shift( Object options ) : Ext.Element
位移,并可重置大小,透明度等
例:
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
slideIn( [String anchor], [Object options] ) : Ext.Element
slideOut( [String anchor], [Object options] ) : Ext.Element
滑入/滑出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
stopFx() : Ext.Element
停止特效
switchOff( [Object options] ) : Ext.Element
收起并隱沒(méi)
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element
異步特效
ExtJS教程- Hibernate教程-Struts2 教程-Lucene教程
對(duì)于我這樣的懶鬼而言,F(xiàn)x類是核心類庫(kù)中最激動(dòng)人心的一個(gè)類,它不是最重要的,卻是最實(shí)用的一個(gè)類
定義了一些常用的特效方法,不妨自己多動(dòng)手試試下面的方法,很有趣的
fadeIn( [Object options] ) : Ext.Element
漸顯 options參數(shù)有以下屬性
callback:Function 完成后的回叫方法
scope:Object 目標(biāo)
easing:String 行為方法 默認(rèn)值是:easeOut,可選值在ext_base中找到,但沒(méi)有說(shuō)明,以下內(nèi)容從yahoo ui中找到的
easeNone:勻速
easeIn:開(kāi)始慢且加速
easeOut:開(kāi)始快且減速
easeBoth:開(kāi)始慢且減速
easeInStrong:開(kāi)始慢且加速,t的四次方
easeOutStrong:開(kāi)始快且減速,t的四次方
easeBothStrong:開(kāi)始慢且減速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢體會(huì)吧
afterCls:String 事件完成后元素的樣式
duration:Number 事件完成時(shí)間(以秒為單位)
remove:Boolean 事件完成后元素銷毀?
useDisplay:Boolean 隱藏元素是否使用display或visibility屬性?
afterStyle:String/Object/Function 事件完成后應(yīng)用樣式
block:Boolean 塊狀化?
concurrent:Boolean 順序還是同時(shí)執(zhí)行?
stopFx :Boolean 當(dāng)前效果完成后隨合的效果是否將停止和移除
fadeOut( [Object options] ) : Ext.Element
漸隱 fadeOut和fadeIn能使用一個(gè)特別的endOpacity屬性以指示結(jié)束時(shí)的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
frame( [String color], [Number count], [Object options] ) : Ext.Element
邊框變亮擴(kuò)展然后漸隱
例:el.frame("ff0000", 10, { duration: 3 })
ghost( [String anchor], [Object options] ) : Ext.Element
漸漸滑出視圖,anchor定義
tl 左上角(默認(rèn))
t 上居中
tr 右上角
l 左邊界的中央
c 居中
r 右邊界的中央
bl 左下角
b 下居中
br 右下角
例:
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
hasActiveFx() : Boolean
指示元素是否當(dāng)前有特效正在活動(dòng)
hasFxBlock() : Boolean
是否有特效阻塞了
highlight( [String color], [Object options] ) : Ext.Element
高亮顯示當(dāng)前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
pause( Number seconds ) : Ext.Element
暫停
puff( [Object options] ) : Ext.Element
吹,吹,吹個(gè)大氣球,元素漸大并隱沒(méi)
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
scale( Number width, Number height, [Object options] ) : Ext.Element
縮放
例:el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
});
sequenceFx()
排隊(duì)特效
shift( Object options ) : Ext.Element
位移,并可重置大小,透明度等
例:
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
slideIn( [String anchor], [Object options] ) : Ext.Element
slideOut( [String anchor], [Object options] ) : Ext.Element
滑入/滑出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
stopFx() : Ext.Element
停止特效
switchOff( [Object options] ) : Ext.Element
收起并隱沒(méi)
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element
異步特效
ExtJS教程- Hibernate教程-Struts2 教程-Lucene教程