brocade.js

使用php+js编写的brocade简单demo

bc.w.MenuItems = function(){};bc.w.MenuItems.prototype={ 	version: "0.1.003", 	type: "bc.w.MenuItems", 		crtc:function(n,t,o){	this._e = document.createElement("li"); 	this._e.id=this.type+":"+n; 	this._n=t; 	this._o=o; 	this._e.style.padding="1px"; 
	this.addClass = function (c){ 	Element.addClassName(this._e,c); 	} 	}, 	toString:function(){ 	return this.type + ':' + this.id; 	} } 
bc.w.MenuItem = Class.create(); bc.w.MenuItem.prototype = Object.extend(new bc.w.MenuItems(),{ 	version: "0.1.003", 	type: "bc.w.MenuItem", 	initialize: function(n,t,o) { 	this.crtc(n,t,o); 	this.crt(); 	}, 	crt:function(){ 	this.item=document.createElement("div"); 		this.ibx = null; 	if(this._o && this._o.icon){ 	this.ibx=document.createElement("img"); 	this.ibx.style.border = "0px"; 	this.ibx.src=this._o.icon; 	}else{ 		this.ibx = document.createElement("label"); 	this.ibx.innerHTML = "&nbsp;&nbsp;"; 	Element.setStyle(this.ibx,{width:16,border:0,padding:0}); 	} 	this.item.appendChild(this.ibx); 	if(this._o && this._o.activeIcon){ 	Event.observe(this._e,"mouseover",function(e){ 	this.ibx.src=this._o.activeIcon; 	}.bind(this)); 	Event.observe(this._e,"mouseout",function(e){ 	this.ibx.src=this._o.icon; 	}.bind(this)); 	} 	this.ibx.style.marginRight="5px"; 	var l = document.createElement("label"); 	l.innerHTML = this._n; 	this.item.appendChild(l); 		this._e.appendChild(this.item); 	}, 	remove:function(){ 	Element.remove(this._e); 	}, 	addEventListener:function(t,f){	Event.observe(this._e,t,f); 	if(!this._lisnr)this._lisnr = []; 	this._lisnr.push([t,f]); 	}, 	removeEventListener:function (){ 	if(!this._lisnr) 	return; 	else{ 	for(var i=0,length = this._lisnr.length;i < length;i++){ 	Event.stopObserving(this._e,this._lisnr[i][0],this._lisnr[i][1]); 	} 	} 	} }); 
bc.w.MenuGroup = Class.create(); bc.w.MenuGroup.prototype = Object.extend(new bc.w.MenuItem(),{ 	version: "0.1.000", 	type: "bc.w.MenuGroup", 	initialize: function(n,t,o) { 	this.crtc(n,t,o); 	this.r=0; 	this.overListener = this.over.bindAsEventListener(this); 	this.outListener = this.out.bindAsEventListener(this); 	this.clickListener = this.click.bindAsEventListener(this); 	this.addIndi(); 	this.crt(); 		}, 	addIndi:function(){ 		this.indi = document.createElement("label"); 	this.indi.innerHTML = ">"; 	Element.setStyle(this.indi,{cssFloat:'right',styleFloat:'right',padding:'0 5'}); 	this._e.appendChild(this.indi); 		Event.observe(this._e,"click",function(e){ 	Event.stop(e); 	}); 	Event.observe(this._e,"mousedown",this.clickListener); 	Event.observe(this._e,"mouseover",this.overListener); 	Event.observe(this._e,"mouseout",this.outListener); 	}, 	click:function(evt){ 	this.over(evt); 	Event.stop(evt); 	}, 	over:function(evt){ 	if(this.subMenu && this.subMenu.isShow())return; 	this.subMenu.show(evt); 	
		}, 	out:function(evt){ 	this.r++; 	if(Position.within(this._e,Event.pointerX(evt),Event.pointerY(evt))){ 	$("tp").innerHTML = "in is true."+this.r; 	return; 	}else{ 	$("tp").innerHTML = "in is false."+this.r; 	} 	setTimeout(function(){ 		if(this.subMenu && this.subMenu.isShow()) 	this.subMenu.hide(); 	}.bindAsEventListener(this),150); 	}, 	addSubMenu:function(m){ 	this.subMenu = m; 	document.body.appendChild(m._e); 
	this.subMenu.position=function(t){ 	Position.clone(this._e,this.subMenu._e,{setHeight:false, setWidth:false,offsetTop:-4,offsetLeft:this._e.offsetWidth -4}); 	}.bind(this); 	} }); 
bc.w.MenuSeparator = Class.create(); bc.w.MenuSeparator.prototype = Object.extend(new bc.w.MenuItems(),{ 	version: "0.1.000", 	type: "bc.w.MenuSeparator", 	initialize: function(s) {	this.crtc(); 	this._e.setAttribute('disabled','true'); 	var sp = document.createElement("hr"); 	if(null != s && typeof s != "object"){ 	Element.addClassName(sp,s); 	}else{ 	Element.setStyle(sp,Object.extend({lineHeight:0,height:0,padding:0,borderTop:'0',borderBottom:'#cc2 solid 1px',margin:'2 0'},s)); 	} 	this._e.appendChild(sp); 	} }); 
bc.w.AroundMenu=Class.create(); bc.w.AroundMenu.prototype=Object.extend(new bc.w.Component(),{ 	version: "0.1.000", 	type:"bc.w.AroundMenu", 	initialize: function(id,t,v,o) { 	this.paint(id,o); 	this.overListener = this.over.bindAsEventListener(this); 	this.outListener = this.out.bindAsEventListener(this); 	this.cc(t,v); 	Event.observe(this._e,"mouseover",this.overListener); 	Event.observe(this._e,"mousedown",this.overListener); 	Event.observe(this._e,"mouseup",this.overListener); 	}, 	cc:function(t,v){ 	var c=document.createElement("a"); 	c.href='javascript:void(0);'; 	this.href=c.href; 		this._t=document.createElement("label"); 	this._t.innerHTML=t; 	this._t.style.display="block"; 	c.appendChild(this._t); 		this._v=document.createElement("input"); 	this._v.type="hidden"; 	this._v.name=(this.properties.name||this.id); 	this._v.value=v; 	c.appendChild(this._v); 	this.addChild(c); 		this.ip=document.createElement("div"); 	this.ip.style.position="absolute"; 	c.appendChild(this.ip); 	var i=document.createElement("input"); 	i.type="image"; 	i.src=this.properties.icon; 	this.ip.appendChild(i); 	Element.hide(this.ip); 		this.menu=new bc.w.ActiveMenu(this.type+this.id,{parent:this._e}); 	
	this.menu.onHide=function(){ 	Element.hide(this.ip); 	this._isIS=false; 	}.bind(this); 		Event.observe(this.ip,"click",function(evt){ 	this.menu.show(evt); 	return false; 	}.bindAsEventListener(this)); 	}, 	over:function(evt){ 	Event.observe(this._e,"mouseout",this.outListener); 	if(this._isIS)	return; 	var tz = this.getDimensions(); 	Element.show(this.ip); 	var iz=Element.getDimensions(this.ip); 		Position.clone(this._e,this.ip,{ 	setHeight:false,  	setWidth:false, 	offsetTop: tz.height, 	offsetLeft:tz.width-iz.width 	}); 	this._isIS= true; 	}, 	out:function(evt){ 	Event.stopObserving(this._e,"mouseout",this.outListener); 	if(!this.menu.isShow()){ 	Element.hide(this.ip); 	this._isIS=false; 	} 	}, 	setValue:function(t,v){ 	this._t.innerHTML=t; 	this._v.value=v; 	}, 	addMenuItem:function(i){ 	this.menu.addMenuItem(i); 	}, 	remove:function(e){ 	this.menu.remove(); 	Element.remove(this._e); 	} }); 
bc.w.FilePicker=Class.create(); bc.w.FilePicker.prototype=Object.extend(new bc.w.Component(),{ 	version: "0.1.000", 	type:"bc.w.FilePicker", 	initialize: function(n,o) { 	this.paint(this.type + ":" + this.hashCode(n),o); 	this._isize = o.size||45;	this._tmx = (o.textMax||1024);	this._fmc = o.fileMax||1024;	this.queue = []; 	this.cc(n); 	}, 	cc:function(n){ 	var obj = this; 	var i = new bc.w.FilePicker.Picker(n,Object.extend({ 	size:this._iszie, 	textMax:this._tmx 	})); 	this.addChild(i._e); 
	i.checkExt=function(v){ 	if(this.queue.indexOf(v) > -1 ) 	return true; 	else { 	this.queue.push(v); 	return false; 	} 	}.bind(this); 
	i.onRemove=function(e,v){ 		if(this.queue.length == this._fmc) 	this.cc(this.n); 	var idx = this.queue.indexOf(v); 	if(idx > 0) 	this.queue=this.queue.slice(0,idx).concat(this.queue.slice(idx+1,this.queue.length)); 	else 	this.queue = this.queue.slice(idx+1,this.queue.length); 	Element.remove(e); 	}.bind(this); 
	i.onUpdate=function(e){ 		if(this.queue.length == this._fmc) 	return false; 	this.cc(this.n); 	}.bind(this); 	}, 	setFileMax:function(c){ 	this._fmc = c; 	} }); 
bc.w.FilePicker.Picker = Class.create(); bc.w.FilePicker.Picker.prototype = { 	version: "0.1.000", 	type:"bc.w.FilePicker.Picker", 	initialize: function(n,o) { 	this._o = o; 	this.max = o.textMax; 	this.size = o.size; 	this.cc(n); 	}, 	cc:function(n){ 	this._e= document.createElement("span"); 	this.item=document.createElement("input"); 	this.item.type="file"; 	this.item.name = n; 	this.item.onChange = this.change.bind(this); 	this._e.appendChild(this.item); 	Event.observe(this.item,"change",this.change.bindAsEventListener(this)); 	}, 	change:function(evt){ 	if(this.checkExt(this.item.value)){ 	alert("The file existed."); 	this.item.value = ""; 	return false; 	} 	setTimeout(this.update.bind(this),300); 	}, 	update:function (){ 	this.item.style.display="none"; 	var v=v1= this.item.value; 	var l = v.length; 	var sp ="/"; 	if(v.lastIndexOf(sp) < 0) 	sp = "\\"; 	if(l > this.max){ 	v = v.substr(v.lastIndexOf(sp),l-v.lastIndexOf(sp)); 	v1=v1.substr(0,l-v.length); 	v = v1.substr(0,(this.max-v.length-3))+"..."+v; 	} 	var t = document.createElement("label"); 	t.innerHTML = v; 	t.title = this.item.value; 	this._e.appendChild(t); 	this._e.appendChild(document.createTextNode(" [")); 	var a = document.createElement("a"); 	a.href = "javascript:void(0)"; 	a.innerHTML = this._o.btText||" 绉? 闄? "; 	this._e.appendChild(a); 	this._e.appendChild(document.createTextNode("]")); 		Event.observe(a,"click",function(evt){ 	this.onRemove(this._e,this.item.value);	}.bindAsEventListener(this)); 		this.onUpdate(); 	} }