使用qooxdoo.js的步骤

使用qooxdoo.js的步骤

前段时间为了做界面，用到了qooxdoo.js这个框架，使用起来效果不错，在IE,FIREFOX中显示都正常。个人体会，把这个框架，再加上AJAX，对提高用户的使用感受有很大帮助。

以下代码主要涉及到qooxdoo.js框架中的TAB面板，按钮，工具栏，内嵌的ViewPage，事件等的使用。

vardoc,tab,t1,p1,t2,p2,w1,w2,chanelName,t3,p3,w3,toolbar,tx;
varbool=false;
window.application.main=function()
...{
doc=this.getClientWindow().getClientDocument();
tab=newQxTabView;
tab.set(...{left:120,top:50,right:5,bottom:5});
//声明一个tab按钮，对汉字进行了acsii转换
t1=newQxTabViewButton("麦朴娱乐");
t1.setChecked(true);
t1.set(...{left:0,top:0,right:0});
tab.getBar().add(t1);
varp1=newQxTabViewPage(t1);
p1.set(...{left:0,top:0,right:0});
w1=newQxIframe();
w1.set(...{left:0,top:30,right:0,bottom:0});
w1.setSource("../welcome.html");
p1.add(w1);
tab.getPane().add(p1);
addToolBarIndex(tab);
doc.add(tab);
};

//改变TabViewPage指向的url
functionchangeUrl(surl,num)...{
if(1==num)w1.setSource(surl);
elseif(2==num)w2.setSource(surl);
elseif(3==num)w3.setSource(surl);
doc.dispatchEvent(newQxDataEvent("surfTo",surl));
}

functionaddToolBarIndex(tab)...{
//工具栏
toolbar=newQxToolBar;
toolbar.set(...{left:0,top:0,right:0});
varbar1=newQxToolBarPart;
varbar2=newQxToolBarPart;
//工具栏上的按钮
varbtnHome=newQxToolBarButton('首页','../images/icons/launch.png');

//给按钮添加事件
btnHome.addEventListener('click',function(event)...{changeUrl('../welcome.html',1)});
bar1.add(btnHome);

varbtnMy=newQxToolBarButton('我的','../images/icons/launch.png');
btnMy.addEventListener('click',function(event)...{changeUrl('my.html',1)});
bar1.add(btnMy);
toolbar.add(bar1);

tab.getPane().add(toolbar);
}

functionaddToolBarRoomList()...{
toolbar=newQxToolBar;
toolbar.setTop(0);
toolbar.setRight(0);
toolbar.setLeft(0);
toolbar.setHeight(25);
varbar1=newQxToolBarPart;

varbtnFind=newQxToolBarButton('快速','../images/icons/launch.png');
btnFind.addEventListener('click',function(event)...{changeUrl('../welcome.html',2)});
bar1.add(btnFind);

toolbar.add(bar1);
p2.add(toolbar);
}

functionremove2()
...{
this.tab.getBar().remove(t2);
this.tab.getPane().remove(p2);
t1.setChecked(true);
}

以上为部分代码，仅供了解一下吧。