【Extjs学习二】Extjs2小控件slideplayer

这下子左右上下的tab都可以轻松添加到web页面上去了，目前没有添加自动播放功能，这2天添好了再放新的上来

Ext.onReady(function(){

	Ext.ux.SlideBox = Ext.extend(Object, {
		constructor : function(cfg) {
			Ext.ux.SlideBox.superclass.constructor.call(this, cfg);
			Ext.apply(this,cfg);
			this.aciveIndex = this.aciveIndex || 0;
			this.boxes = Ext.select('li', false, this.boxid);
			this.boxes.each(function(box,sidebox, index) {
				box.set( {
					'sidebox:index' : index
				});
				box.on('mouseover', this.onMouseover,this);
			}, this);
			this.setActiveBox(this.aciveIndex);
		},
		setActiveBox:function(index){			
			this.setClsActiveOrNot(this.aciveIndex,false);
			this.setClsActiveOrNot(index,true);
			this.aciveIndex = index;			
		},
		setClsActiveOrNot:function(index,bvar){
			var boxTitle = this.boxes.item(index);
			var boxConfig = Ext.util.JSON.decode(boxTitle.getAttributeNS('sidebox','config'));	
			var boxBody = Ext.get(boxConfig['bodyId']);
			if(bvar){
				boxTitle.replaceClass(boxConfig['deactivecls'],boxConfig['activecls']);
				boxBody.replaceClass(boxConfig['bodyDeactivecls'],boxConfig['bodyActivecls']);				
			}else{
				boxTitle.replaceClass(boxConfig['activecls'],boxConfig['deactivecls']);
				boxBody.replaceClass(boxConfig['bodyActivecls'],boxConfig['bodyDeactivecls']);				
			}		
		},
		onMouseover:function(e,elm){
			var index = Ext.fly(elm).getAttributeNS('sidebox','index');
			if(!index){
				index = Ext.fly(elm).parent('li').getAttributeNS('sidebox','index');
			}
			if(index){this.setActiveBox(index);}
		}		
	})

	
	var sidebox = new Ext.ux.SlideBox({title:'hello',boxid:'slideBox'});

});

 

 

评论

3 楼 95js 2008-07-04  

顶了再去看，哈

2 楼 ftmouse 2008-07-04  

上下左右？不是很明白楼主的意思。下载来看看

1 楼 jianfeng008cn 2008-07-04  

<pre name='code' class='js'>//已添加自动播放功能：


Ext.onReady(function(){

Ext.ux.SlideBox = Ext.extend(Object, {
constructor : function(cfg) {
Ext.ux.SlideBox.superclass.constructor.call(this, cfg);
Ext.apply(this,cfg);
this.aciveIndex = this.aciveIndex || 0;
this.boxes = Ext.select('li', false, this.boxid);
this.boxes.each(function(box,sidebox, index) {
box.set( {
'sidebox:index' : index
});
box.on('mouseover', this.onMouseover,this);
if(this.enableSideplay){
box.on('mouseout', this.setIntervalFuc, this);
}
}, this);
this.setActiveBox(this.aciveIndex);
if(this.enableSideplay){
this.intervalTime = this.intervalTime || 2000;
this.setIntervalFuc();
this.box = Ext.get(this.boxid);
this.box.on('mouseover', this.clearIntervalFuc, this);
this.box.on('mouseout', this.setIntervalFuc, this);
}
},
setActiveBox:function(index){
this.setClsActiveOrNot(this.aciveIndex,false);
this.setClsActiveOrNot(index,true);
this.aciveIndex = index;
},
setClsActiveOrNot:function(index,bvar){
var boxTitle = this.boxes.item(index);
var boxConfig = Ext.util.JSON.decode(boxTitle.getAttributeNS('sidebox','config'));
var boxBody = Ext.get(boxConfig['bodyId']);
if(bvar){
boxTitle.replaceClass(boxConfig['deactivecls'],boxConfig['activecls']);
boxBody.replaceClass(boxConfig['bodyDeactivecls'],boxConfig['bodyActivecls']);
}else{
boxTitle.replaceClass(boxConfig['activecls'],boxConfig['deactivecls']);
boxBody.replaceClass(boxConfig['bodyActivecls'],boxConfig['bodyDeactivecls']);
}
},
onMouseover:function(e,elm){
if(this.enableSideplay){this.clearIntervalFuc();}
var index = Ext.fly(elm).getAttributeNS('sidebox','index');
if(!index){
index = Ext.fly(elm).parent('li').getAttributeNS('sidebox','index');
}
if(index){this.setActiveBox(index);}
},
setIntervalFuc : function() {
if(!this.intervalFuc){
this.intervalFuc = setInterval(this.showWhich.createDelegate(this),this.intervalTime);
}
},
clearIntervalFuc : function(e, elm, o, p, q) {
clearInterval(this.intervalFuc);
this.intervalFuc = null;
},
showWhich : function() {
var index = this.aciveIndex;
index++;
if (index &gt;= this.boxes.getCount()){
index = 0;
}
this.setActiveBox(index);
}
})


var sidebox = new Ext.ux.SlideBox({title:'hello',boxid:'slideBox',enableSideplay:true});

});


</pre>
<p> </p>
<p>对信息滚动、图片滚动、相册等网页效果有兴趣的可以一起学习，打算做些常用的用到自己的网站上去，感觉ext只使用jquery等小js库的功能，文件也不大，用起来更顺手.</p>