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);      
   }
   

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