ui.listitem.js

简单博客功能实现

//列表项的默认样式定义
X2.Style.ListItem={
	base:'base'
	,hover:'hover'
	,selected:'selected'
	,icon:'icon'
	,sep:'sep'
	,more:'more'
};

//一个列表项
X2.UI.ListItem=Class.create();
X2.UI.ListItem.prototype={
	initialize:function(style){
		this.style=style || X2.Style.ListItem;
		this.visible=true;
		this.selected=false;
		this.host=null;
		this.hoverEffect=true;
	}
	,init:function(text,link,target,allowSelected,icon,value,more,className,noHoverEffect,title){
		this.box=$se('dd');
		this.text=text;
		this.value=value || text;
		this.arguments=arguments;
		this.hoverEffect=!noHoverEffect;
		Element.addClassName(this.box,this.style.base);

		if(arguments.length==1 && text=='/'){
			this.box.className=this.style.sep;
			return;
		}
		if(className)Element.addClassName(this.box,className);

		
		if(icon)text='<img src="'+icon+'" alt="" align="absmiddle" />'+text;
		var _span=$se("span");
		if(title)this.box.title=title;
		this.box.appendChild(_span);
		if(more)Element.addClassName(this.box,this.style.more);
		if(link){
			if(typeof(link)=='string'){
				var _a=$se('a');
				_a.innerHTML=text;
				if(target)_a.target=target;
				_a.href=link;
				_a.onfocus=function(){this.blur();}
				_span.appendChild(_a);
			}else if(typeof(link)=='function'){
				this.onclick=link;
				Event.observe(this.box,'click',this.onclick.bind(this,this));
				_span.innerHTML=text;
			}
		}else{
			_span.innerHTML=text;
		}
		
		if(icon){
			Element.addClassName(this.box,this.style.icon);
		}
		
		
		var self=this;
		//点击选中的事件
		this.clickEvent=function(){
			if(self.selected){
				self.unselect();
			}else{
				self.select();
			}
		}
		
		if(this.hoverEffect){
		//处理鼠标事件效果
			Event.observe(this.box,'mouseover',function(){
				Element.addClassName(self.box,self.style.hover);
			});
			Event.observe(this.box,'mouseout',function(){
				Element.removeClassName(self.box,self.style.hover);
			});
		}
		if(allowSelected)this.enableAllowSelected();
		
	}
	

		//设置允许选中
	,enableAllowSelected:function(){
		Event.observe(this.box,'click',this.clickEvent);
	}
		//设置不允许选中
	,disableAllowSelected:function(){
		Event.stopObserve(this.box,'click',this.clickEvent);
	}
	,getText:function(){
		return this.arguments[0];
	}
	,getLink:function(){
		return this.arguments[1];
	}
	
		//使自己被选中
	,select:function(){
		if(this.selected)return;
		Element.addClassName(this.box,this.style.selected);
		this.selected=true;
		this.onselect();
	}
		//取消自己的选中
	,unselect:function(){
		if(!this.selected)return;
		Element.removeClassName(this.box,this.style.selected);
		this.selected=false;
		this.onunselect();
	}
		//选中事件
	,onselect:Prototype.emptyFunction
		//取消选中事件
	,onunselect:Prototype.emptyFunction
		//显示本菜单项
	,show:function(){
		this.visible=true;
		Element.show(this.box);
	}
		//隐藏本菜单项
	,hide:function(){
		this.visible=false;
		Element.hide(this.box);
	}
	,clickEvent2:function(){
		this.onclick(this);
	}
	,onclick:Prototype.emptyFunction
}