popup.js

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

/**
 * panel object.
 */
var PopupPanel = function(){
	
	var panel = new bc.w.Panel("PopupPanel",{dragable:true});
	panel.setWidth(450);
	panel.setHeight(350);
	panel.setStyle({left:'280px',top:'80px',padding:'5px',border:'#ccc solid 1px'});
	panel.addClassName("tranpanel");
	
	
	//create title bar.
	var tbar = new bc.w.TitleBar('Popup对象演示：',{closeIcon:'images/close.gif'});
	tbar.addClassName("titleBar");
	panel.setTitleBar(tbar);
	
	panel.content.addClassName("panel");
	
	//create popup
	var c = document.createElement("div");
	c.innerHTML = " ";
	Element.setStyle(c,{padding:'0px',margin:'0px'});
	panel.addChild(c);
	
	var txt = document.createElement("p");
	txt.innerHTML = "<a href='http://brocade.sf.net' class='pop'>Brocade</a>"+
		" 基于 Prototype 框架构建了常用的web页面组件，"+
		"通过这些组件局部渲染web页面，快速创建用户体验的web系统。"+
		"<a href='http://brocade.sf.net' class='pop'>Brocade</a>是跨浏览器的框架，支持Firefox、Mozilla、Netscape和IE。";
		
	Element.setStyle(txt,{display:'block',textIndent:'30px',border:'#ccf dotted 1px',padding:'20px',margin:'20px'});
	c.appendChild(txt);
	
	var wpop=new bc.w.Popup("a1",{classId:'pop'});
	wpop.addClassName("menu");
	wpop.setWidth(260);
	wpop.addChild(document.createTextNode("Brocade旨在提供一种简捷、健壮、灵活、符合面向对象编程习惯，同时又能充分发挥HTML、CSS强大表现能力的 Javascript 脚本框架。"));
	panel.addChild(wpop);
	
	//create ajax.popup
	var label = document.createElement("div");
	label.innerHTML = "bc.a.Popup对象可以向远程服务器发送请求，"+
	"并把返回结果作为popup的内容显示。单击下边按钮看演示效果：";
	Element.setStyle(label,{display:'block',textIndent:'30px',border:'#ccf dotted 1px',padding:'20px',margin:'20px'});
	panel.addChild(label);
	
	var bt = document.createElement("input");
	bt.type="button";
	bt.value = " 单击测试 ";
	
	label.appendChild(bt);
	
	var pop=new bc.a.Popup("a","pop.php",{});
	pop.addClassName("menu");
	pop.setStyle({width:'280px',overflow:'auto'});
	panel.addChild(pop);
	
	Event.observe(bt,"click",function(e){
		pop.popup(e);
	}.bindAsEventListener(this));
		
	return panel;
}