使用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指向的urlfunctionchangeUrl(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);
}
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);}以上为部分代码，仅供了解一下吧。
本文地址：http://www.45fan.com/a/question/72914.html