使用qooxdoo.js的步骤

使用qooxdoo.js的步骤

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

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

使用qooxdoo.js的步骤vardoc,tab,t1,p1,t2,p2,w1,w2,chanelName,t3,p3,w3,toolbar,tx;
使用qooxdoo.js的步骤
varbool=false;
使用qooxdoo.js的步骤window.application.main
=function()
使用qooxdoo.js的步骤使用qooxdoo.js的步骤
{
使用qooxdoo.js的步骤doc
=this.getClientWindow().getClientDocument();
使用qooxdoo.js的步骤tab
=newQxTabView;
使用qooxdoo.js的步骤使用qooxdoo.js的步骤tab.set(
{left:120,top:50,right:5,bottom:5});
使用qooxdoo.js的步骤
//声明一个tab按钮,对汉字进行了acsii转换
使用qooxdoo.js的步骤t1=newQxTabViewButton("麦朴娱乐");
使用qooxdoo.js的步骤t1.setChecked(
true);
使用qooxdoo.js的步骤使用qooxdoo.js的步骤t1.set(
{left:0,top:0,right:0});
使用qooxdoo.js的步骤tab.getBar().add(t1);
使用qooxdoo.js的步骤
varp1=newQxTabViewPage(t1);
使用qooxdoo.js的步骤使用qooxdoo.js的步骤p1.set(
{left:0,top:0,right:0});
使用qooxdoo.js的步骤w1
=newQxIframe();
使用qooxdoo.js的步骤使用qooxdoo.js的步骤w1.set(
{left:0,top:30,right:0,bottom:0});
使用qooxdoo.js的步骤w1.setSource(
"../welcome.html");
使用qooxdoo.js的步骤p1.add(w1);
使用qooxdoo.js的步骤tab.getPane().add(p1);
使用qooxdoo.js的步骤addToolBarIndex(tab);
使用qooxdoo.js的步骤doc.add(tab);
使用qooxdoo.js的步骤}
;
使用qooxdoo.js的步骤
使用qooxdoo.js的步骤
//改变TabViewPage指向的url
使用qooxdoo.js的步骤使用qooxdoo.js的步骤functionchangeUrl(surl,num){
使用qooxdoo.js的步骤
if(1==num)w1.setSource(surl);
使用qooxdoo.js的步骤
elseif(2==num)w2.setSource(surl);
使用qooxdoo.js的步骤
elseif(3==num)w3.setSource(surl);
使用qooxdoo.js的步骤doc.dispatchEvent(
newQxDataEvent("surfTo",surl));
使用qooxdoo.js的步骤}

使用qooxdoo.js的步骤
使用qooxdoo.js的步骤使用qooxdoo.js的步骤
functionaddToolBarIndex(tab){
使用qooxdoo.js的步骤
//工具栏
使用qooxdoo.js的步骤toolbar=newQxToolBar;
使用qooxdoo.js的步骤使用qooxdoo.js的步骤toolbar.set(
{left:0,top:0,right:0});
使用qooxdoo.js的步骤
varbar1=newQxToolBarPart;
使用qooxdoo.js的步骤
varbar2=newQxToolBarPart;
使用qooxdoo.js的步骤
//工具栏上的按钮
使用qooxdoo.js的步骤varbtnHome=newQxToolBarButton('首页','../images/icons/launch.png');
//给按钮添加事件
使用qooxdoo.js的步骤使用qooxdoo.js的步骤btnHome.addEventListener(
'click',function(event){changeUrl('../welcome.html',1)});
使用qooxdoo.js的步骤bar1.add(btnHome);
使用qooxdoo.js的步骤使用qooxdoo.js的步骤使用qooxdoo.js的步骤

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

使用qooxdoo.js的步骤toolbar.add(bar1);

使用qooxdoo.js的步骤tab.getPane().add(toolbar);
使用qooxdoo.js的步骤}

使用qooxdoo.js的步骤
使用qooxdoo.js的步骤使用qooxdoo.js的步骤
functionaddToolBarRoomList(){
使用qooxdoo.js的步骤toolbar
=newQxToolBar;
使用qooxdoo.js的步骤toolbar.setTop(
0);
使用qooxdoo.js的步骤toolbar.setRight(
0);
使用qooxdoo.js的步骤toolbar.setLeft(
0);
使用qooxdoo.js的步骤toolbar.setHeight(
25);
使用qooxdoo.js的步骤
varbar1=newQxToolBarPart;
使用qooxdoo.js的步骤
使用qooxdoo.js的步骤
varbtnFind=newQxToolBarButton('快速','../images/icons/launch.png');
使用qooxdoo.js的步骤使用qooxdoo.js的步骤btnFind.addEventListener(
'click',function(event){changeUrl('../welcome.html',2)});
使用qooxdoo.js的步骤bar1.add(btnFind);


使用qooxdoo.js的步骤toolbar.add(bar1);
使用qooxdoo.js的步骤p2.add(toolbar);
使用qooxdoo.js的步骤}

使用qooxdoo.js的步骤
使用qooxdoo.js的步骤functionremove2()
使用qooxdoo.js的步骤使用qooxdoo.js的步骤
{
使用qooxdoo.js的步骤
this.tab.getBar().remove(t2);
使用qooxdoo.js的步骤
this.tab.getPane().remove(p2);
使用qooxdoo.js的步骤t1.setChecked(
true);
使用qooxdoo.js的步骤}

使用qooxdoo.js的步骤

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