`

【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>

相关推荐

    extjs3.2、3.3 时间控件 日期控件扩展

    2. **日期控件(DateField)** - 日期控件允许用户选择日期,通常使用`Ext.form.DateField`类创建。 - 日期控件支持多种日期格式,如'YYYY-MM-DD'、'MM/DD/YYYY'等,可通过`format`属性设置。 - 用户可以设置日期...

    extjs时间控件精确秒

    在EXTJS这个强大的JavaScript框架中,时间控件是开发者经常使用的组件之一,尤其在构建复杂的Web应用程序时。...在项目实践中,结合提供的压缩包文件,开发者可以进一步学习和实践EXTJS时间控件的秒级精确使用。

    extjs struts2 多图片批量上传控件

    在本场景中,"extjs struts2 多图片批量上传控件"是一个集成解决方案,允许用户通过ExtJS前端框架批量上传多张图片,并通过Struts2后端框架进行处理。 **ExtJS** 是一个基于JavaScript的UI库,它提供了丰富的组件和...

    extjs年份控件(只显示年,无月日时分秒)

    Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)

    Extjs与C#完美接合写法控件源代码

    这个“Extjs与C#完美接合写法控件源代码”是一个示例项目,展示了如何将这两者结合,以创建功能丰富的交互式Web应用。下面我们将深入探讨这两个技术的结合及其关键知识点。 1. **ExtJS 控件和布局**: - ExtJS ...

    ExtJs:收集基于ExtJs扩展的一些控件

    接着是“ExtJs:收集基于ExtJs扩展的一些控件2”。这可能是对另一批ExtJs扩展控件的介绍,可能包含了一些新的或更新的组件。例如,可能有用于地图集成的地图控件,或者用于数据分析的复杂表格组件。这些控件的引入有...

    extjs 微调控件,时间微调控件,微调,javascript 微调

    通过研究这些文件,你可以学习如何配置和使用微调控件,包括如何设置增量、如何限制数值范围,以及如何与其他UI组件(如时间字段)集成。 以下是一些关于ExtJS微调控件的关键知识点: 1. **创建微调控件**:首先,...

    ExtJS时间控件、IP输入控件【控件】

    2. **IP输入控件**:这是一个定制的文本输入框,专为输入IPv4地址设计。它通常会根据用户输入的每个数字自动跳转到下一个输入框,并进行验证,确保输入的IP地址格式正确。例如,当用户在第一个输入框中输入一个数字...

    Extjs4.1日期年月控件

    使用Extjs4.1编写了只能选择年月的日期控件

    Extjs4.1 小例子(适合extjs初学者学习使用)

    标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码,旨在帮助初学者快速入门。通过这些小例子,你可以了解如何使用ExtJS 4.1来创建用户界面,包括布局管理、组件系统、数据绑定、事件处理等核心...

    extjs日期+时间控件

    2. **日期时间控件(DateTime Field)**:在ExtJS中,日期和时间的输入通常通过`Ext.form.field.Date`和`Ext.form.field.Time`实现,但为了同时处理日期和时间,可以使用`Ext.picker.DateTime`或自定义组合控件。...

    Extjs4.1可用的日期时间选择控件

    在EXTJS 4.1框架中,日期时间选择控件是开发者经常需要用到的组件,用于在用户界面中方便地输入和选择日期与时间。本文将详细介绍EXTJS 4.1中的日期时间选择控件,并针对可能存在的不合理之处进行讨论。 首先,...

    extjs网页控件开发

    2. **数据绑定**:通过ExtJS的双向数据绑定机制,使得视图(控件)与模型之间的数据自动同步。 3. **事件处理**:利用ExtJS的事件系统,如change事件,来监听用户的选择并触发相应的行为。 4. **Store配置**:配置...

    extjs资料以及extjs学习指南

    extjs资料以及extjs学习指南,extjs资料以及extjs学习指南

    一个相当不错的extjs入门文档,整个ext的控件,上边很多实例。有助于新手学习。

    本文将详细介绍EXTJS中的EXT.MessageBox组件,这是EXTJS提供的一种用于弹出提示、确认和输入对话框的工具,对于新手学习EXTJS极其有用。 1. **EXT.MessageBox.alert()** `EXT.MessageBox.alert()` 方法用于创建一...

    EXTJS时间控件年月日时分秒

    学习这个组件,你可以查看源码,了解如何组合EXTJS的基本组件和配置,实现一个完整的时间选择功能。 总之,EXTJS时间控件是其组件库中的一个重要部分,它通过灵活的配置和扩展机制,能够满足各种复杂的时间选择需求...

    extjs3.0 日期时间控件

    标题中的"extjs3.0 日期时间控件"指的是ExtJS 3.0框架中的DateTimeField组件,这是一个组合了日期选择器和时间选择器的控件,允许用户以交互的方式选择精确的日期和时间。这个控件通常用于表单中,提供了一种直观且...

    ExtJS4学习笔记十一 树控件的使用

    在本篇《ExtJS4学习笔记十一:树控件的使用》中,我们将深入探讨ExtJS框架中的树形控件(TreePanel),这是一种强大的UI组件,用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强,使其更加灵活且易于使用。...

    Extjs6 日期时间控件

    在EXTJS6中,日期时间控件是一种强大的用户界面组件,它将传统的日期选择器与时间选择器结合在一起,提供了一种便捷的方式来输入和编辑日期和时间数据。这个控件在许多应用程序中都非常实用,特别是在那些需要精确...

    ExtJs5.1或ExtJs6.0日期时间控件

    Ext5.1或Ext6.0测试通过。 拷贝文件: 将DateTimeField.js 和 DateTimePicker.js放在ext/src/ux目录下 页面引用 requires : [ 'Ext.ux.DateTimeField' ] 使用方式: { fieldLabel:'开始时间', ...}

Global site tag (gtag.js) - Google Analytics