GUI Components JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. GUI Components
  4. Tab Manager 1



DynAPI Examples - Tab Manager 1


dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api.ext.TabManager');


td { font:10px Helvetica; background-color:#dddddd; }
.center { text-align:center; }


// tab manager listener
var tmListener={
  onblur:function(e) {
    var o=e.getSource();
    o.setBgColor('#cccccc');
  },
  onfocus:function(e) {
    var o=e.getSource();
    o.setBgColor('#aaaaaa');
  },
  onsubmit:function(e) {
    var o=e.getSource();
    o.setBgColor('#eeeeee');
    o.callSubmitFn();
  }
}
// default tab attributes
function Tab(html,x,id) {
  this.base=DynLayer;
  this.base(html,x,1,50,16,'#cccccc');
  if(id) this.setID(id)
  this.setClass('center');
}
Tab.prototype=new DynLayer();
// example 1
var e1=dynapi.document.addChild(new DynLayer(null,null,null,309,48));
// menubar 1
var m1=e1.addChild(new DynLayer(null,1,1,309,19,'#666666'));
m1.addChild(new Tab('<< First',1),'tab1').addSubmitFn('alert("First")');
m1.addChild(new Tab('< Prev',52),'tab2').addSubmitFn('alert("Prev")');
m1.addChild(new Tab('Add',103),'tab3').addSubmitFn('alert("Add")');
m1.addChild(new Tab('Submit',154),'tab4').addSubmitFn('alert("Submit")');
m1.addChild(new Tab('Next >',205),'tab5').addSubmitFn('alert("Next")');
m1.addChild(new Tab('Last >>',256),'tab6').addSubmitFn('alert("Last")');
m1.createTabManager();
m1.addTabListeners(tmListener)
m1.tab1.setBgColor('#aaaaaa');
var FORM=null;
var e4=dynapi.document.addChild(new DynLayer(null,null,null,400,150));
function getForm() {
  if(FORM) return;
  FORM=TabManager.getForm(e4);
  var html4='When using the [Tab] key in Mozilla this text field prevents default tab focus. It may be hidden (unfortunately the cursor is still visible).
When using NS4 on Linux with broken key events make sure this text field is visible and click in the field to force focus and allow key input.'
  e4.addChild(new DynLayer(html4,30,0,350,100));
}




Tab Manager Demonstration 1





  1. In NS4 click in the window and use the numeric keypad (Num Lock) arrow keys to tab around the menus and the space key to select.
  2. For other browsers use the standard arrow keys to tab around the menus and the enter or space key to select.
  3. On some browsers it is possible to use the [SHIFT+Tab] and [Tab] keys to move left and right repectively.
  4. To prevent default tab focus when using the [Tab] key in Mozilla or when trying to use NS4 on Linux with broken key events, click here.







           
         
  
dynapi.zip( 791 k)