qooxdoo.js使用手记

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

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

  var doc,tab,t1,p1,t2,p2,w1,w2,chanelName,t3,p3,w3,toolbar,tx;
  var bool=false;
  window.application.main = function()
  ...{
    doc = this.getClientWindow().getClientDocument();
    tab = new QxTabView;
    tab.set(...{ left: 120, top: 50, right: 5, bottom: 5 });
    //声明一个tab按钮，对汉字进行了acsii转换
    t1 = new QxTabViewButton("麦朴娱乐");
    t1.setChecked(true);
    t1.set(...{left:0,top:0,right:0});
    tab.getBar().add(t1);
    var p1 = new QxTabViewPage(t1);
    p1.set(...{left:0,top:0,right:0});
    w1 = new QxIframe();
    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  
  function changeUrl(surl,num) ...{
        if(1==num)  w1.setSource(surl);
        else if(2==num) w2.setSource(surl);
        else if(3==num) w3.setSource(surl);
        doc.dispatchEvent( new QxDataEvent("surfTo",surl));
  }
  
  function addToolBarIndex(tab) ...{
       //工具栏
         toolbar = new QxToolBar;
     toolbar.set(...{left:0,top:0,right:0});
        var bar1 = new QxToolBarPart;
         var bar2 = new QxToolBarPart; 
         //工具栏上的按钮
         var btnHome = new QxToolBarButton('首页','../images/icons/launch.png');

             //给按钮添加事件
     btnHome.addEventListener('click',function(event)...{changeUrl('../welcome.html',1)});
         bar1.add(btnHome);
             
         var btnMy = new QxToolBarButton('我的','../images/icons/launch.png');
      btnMy.addEventListener('click',function(event)...{changeUrl('my.html',1)});
         bar1.add(btnMy);
         toolbar.add(bar1);

        tab.getPane().add(toolbar);
   }
   
  function addToolBarRoomList() ...{
       toolbar = new QxToolBar;
        toolbar.setTop(0);
        toolbar.setRight(0);
     toolbar.setLeft(0);
     toolbar.setHeight(25);
     var bar1 = new QxToolBarPart;
     
     var btnFind = new QxToolBarButton('快速','../images/icons/launch.png');
 btnFind.addEventListener('click',function(event)...{changeUrl('../welcome.html',2)});
     bar1.add(btnFind);
     
     toolbar.add(bar1);
     p2.add(toolbar);
  }
  
   function remove2()
   ...{
         this.tab.getBar().remove(t2);
      this.tab.getPane().remove(p2);
      t1.setChecked(true);      
   }
   

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