ui.list.js

简单博客功能实现

//列表的默认样式定义
X2.Style.List={
	base:'X2List'
	,itemStyle:X2.Style.ListItem
};

//列表类
X2.UI.List=Class.create();
//继承于枚举类
Object.extend(X2.UI.List.prototype, Enumerable);
Object.extend(X2.UI.List.prototype, {
	initialize:function(style){
		this.style=style||X2.Style.List;
		this.items=[];
		this.box=$se('dl');
		this.singleSelect=false;
		this.hoverEffect=true;
		Element.addClassName(this.box,this.style.base);
	}
		//枚举接口
	,_each:function(iterator){
		this.items._each(iterator);
	}
	,bindData:function(arr){
		var self=this;
		arr.each(function(value){
			var li=new X2.UI.ListItem(self.style.itemStyle);
			li.hoverEffect=self.hoverEffect;
			li.init.apply(li,value);
			self.addItem(li);
		});
	}
		//添加一个列表项对象
	,addItem:function(li){
		this.box.appendChild(li.box);
		this.items.push(li);
		if(this.singleSelect)this._setLiSelectEvent(li);
		li.host=this;
	}
		//插入一个列表项
	,insertItem:function(li,i){
		//如果是添加在最后
		if(i==this.items.length){
			this.addItem(li);
			return;
		}
		this.box.insertBefore(li.box,this.items[i].box);
		this.items.splice(i,0,li);
		if(this.singleSelect)this._setLiSelectEvent(li);
		li.host=this;
	}
		//删除一个菜单项
	,removeItem:function(i){
		if(typeof(i)=='object'){
			this.removeItem(this.items.indexOf(i));
			return;
		}
		if(i>=this.items.length)return;
		var item=this.items[i];
		Element.remove(this.items[i].box);
		this.items.splice(i,1);
		return item;
	}
	,clearSelect:function(){
		this.items.each(function(value){
			value.unselect();
		});
	}
	,getSelectedItem:function(){
	    return this.lastSelected?this.lastSelected:null;
	}
	,selectOne:function(i){
		if(i<0 || i>=this.items.length)return;
		this.items[i].select();
	}
	,selectNext:function(){
		if(!this.singleSelect)return;
		if(this.lastSelected)this.selectOne(this.items.indexOf(this.lastSelected)+1);
		else this.items.first().select();
	}
	,selectPrevious:function(){
		if(!this.singleSelect)return;
		if(this.lastSelected)this.selectOne(this.items.indexOf(this.lastSelected)-1);
		else this.items.last().select();
	}
		//设置仅允许单选
	,setSingleSelect:function(){
		this.singleSelect=true;
		this.items.each(this._setLiSelectEvent.bind(this));
	}
		//为菜单项添加单选事件
	,_setLiSelectEvent:function(li){
		this._selectEvent=function(){
			if(li==this.lastSelected)return;
			if(this.lastSelected)this.lastSelected.unselect();
			this.lastSelected=li;
		}
		X2.Observer.observe(this,'_selectEvent',li,'onselect');
	}
	,clear:function(){
	    this.lastSelected=null;
	    this.items.length=0;
		this.box.innerHTML='';
	}
	,show:function(){
		this.visible=true;
		this.box.style.display='block';
		this.onshow();
	}
	,hide:function(){
		this.visible=false;
		this.box.style.display='none';
		this.onhide();
	}
	,onshow:function(){}
	,onhide:function(){}
});