js tab控件

这两天学prototype框架，用它写了一个类似IE7.0跟firefox中tab功能类似的控件，以求可以达到重用的目的，由于css学的不大好，css还没有调试好，暂时还很丑陋。有css熟的劳烦帖上来交流。代码有些地方写的还感觉有些恶心，有待提高，在下也是初学js，大家多包含。

js 代码

function createEle(tag)
{
 return document.createElement(tag);
}

function createDiv(_id)
{
 var bgDiv = createEle("DIV");
 bgDiv.id = _id;
 return bgDiv;
}

TabContainer = Class.create();
TabContainer.id = "__container_id__";
TabContainer.itemContainerDivId = "__item_container_Div_id__";
TabContainer.itemContainerId = "__item_container_id__";
TabContainer.contentContainerId = "__content_container_id__";
TabContainer.prototype = {
    /*---------------- initializer ------------------*/
 initialize : function(_initTab,_options)
 {
  this.Tabs = new Array();
  this.initTab = _initTab;
  this.options =
  {
   container             : document.body,
   maxTabs               : 3,
   tabContainerClass     : "tab-container",
   itemContainerClass    : "item-container",
   itemContainerOLClass  : "item-container-ol",
   contentContainerClass : "content-container"
  };
  this.init(this._options);
 },

 /*-----------------  private method -----------------------*/
 init : function(_options)
 {
  this.setOptions(_options);
  this.createTabContainer();
  this.addTab(this.initTab);
  Event.observe($(TabContainer.itemContainerId), "click", this.clickHandler.bind(this), true);
  Event.observe($(TabContainer.itemContainerId), "dblclick", this.dblclickHandler.bind(this), true);
 },

 createTabContainer : function()
 {
  var tabContainer = createDiv(TabContainer.id);
     tabContainer.className = this.options.tabContainerClass;
     tabContainer.appendChild(this.createTabItemContainer());
     tabContainer.appendChild(this.createTabContentContainer());
     this.options.container.appendChild(tabContainer);
 },

 createTabItemContainer : function()
 {
  var itemContainer = createDiv(TabContainer.itemContainerDivId);
  itemContainer.className = this.options.itemContainerClass;
  var itemContainerOL = createEle("ul");
  itemContainerOL.id = TabContainer.itemContainerId;
  itemContainerOL.className = this.options.itemContainerOLClass;
  itemContainer.appendChild(itemContainerOL);
  return itemContainer;
 },

 createTabContentContainer : function()
 {
  var contentContainer = createDiv(TabContainer.contentContainerId);
  contentContainer.className = this.options.contentContainerClass;
  return contentContainer;
 },

 setOptions : function(_options)
 {
  this.options.extend(_options||{});
  this.options.container = $(this.options.container);
 },

 addTab : function(_tab)
 {
  if(this.Tabs.length  {
   $(TabContainer.itemContainerId).appendChild(_tab.tabItem);;
   $(TabContainer.contentContainerId).appendChild(_tab.tabContent);
      this.Tabs[this.Tabs.length] = _tab;
      _tab.show();
      alert(_tab.options.addCallBack);
      if(_tab.options.addCallBack)
    _tab.options.addCallBack();
  }
 },

 removeTab : function(_tabId)
 {
  if(this.Tabs.length>1)
  {
   for(var i=0;i   {
    if(this.Tabs[i].tabId==_tabId)
    {
     $(TabContainer.itemContainerId).removeChild(this.Tabs[i].tabItem);
           $(TabContainer.contentContainerId).removeChild(this.Tabs[i].tabContent);
     if(this.Tabs[i].options.removeCallBack)
         this.Tabs[i].options.removeCallBack();
     this.Tabs.splice(i,1);
     if(i=this.Tabs.length-1)
     {
      this.Tabs[i-1].show();
     }
     else
     {
      this.Tabs[i].show();
     }
    }
   }
  }
 },

 showTab: function(_tabId)
 {
  for(var i=0;i  {
   if(this.Tabs[i].tabId==_tabId)
   {
    this.Tabs[i].show();
    this.Tabs[i].tabItem.style.backgroundColor = "EEEEEE";
    this.Tabs[i].tabItem.setColor = true;
   }
   else
   {
    this.Tabs[i].hide();
    this.Tabs[i].tabItem.setColor = false;
   }
  }
 },

 clickHandler : function(evnt)
 {
  var srcEle = Event.element(evnt);
  var regxValue = /^\w+_item$/;
  if(regxValue.test(srcEle.id))
  {
   this.showTab(srcEle.id.substr(0,srcEle.id.length-5))
  }
 },

 dblclickHandler : function(evnt)
 {
  var srcEle = Event.element(evnt);
  var regxValue = /^\w+_item$/;
  if(regxValue.test(srcEle.id))
  {
   this.removeTab(srcEle.id.substr(0,srcEle.id.length-5))
  }
 }
}

Tab = Class.create();
Tab.prototype = {
 /*---------------- initializer ------------------*/
 initialize : function(_tabId,_tabItemValue,_tabContentValue,_options)
 {
  this.tabId = _tabId;
  this.Tabs = new Array();
  this.tabItem = null;
  this.tabContent = null;
  this.tabItemValue = _tabItemValue;
  this.tabContentValue = _tabContentValue;
  this.options =
  {
   itemClass             : "tab-item",
   itemContentClass      : "tab-content",
   addCallBack       : null,
   removeCallBack         : null
  };
  this.init(this._options);
 },

 /*-----------------  private method -----------------------*/
 init : function(_options)
 {
  this.setOptions(_options);
  this.createTabItem();
  this.createTabContent();
  Event.observe(this.tabItem, "mouseover", this.mouseOverHandler, true);
  Event.observe(this.tabItem, "mouseout", this.mouseOutHandler, true);
 },

 setOptions : function(_options)
 {
  this.options.extend(_options||{});
 },

 createTabItem : function()
 {
  var _tabItem = createEle("li");
  _tabItem.id = this.tabId+"_item";
  _tabItem.className = this.options.itemClass;
  _tabItem.innerHTML = this.tabItemValue;
  this.tabItem = _tabItem;
 },

 createTabContent : function()
 {
  var _itemContent = createDiv(this.tabId+"_content");
  _itemContent.className = this.options.itemContentClass;
  _itemContent.innerHTML = this.tabContentValue;
  this.tabContent = _itemContent;
 },

 show : function()
 {

  this.tabContent.style.display = "block";
 },

 hide : function()
 {
  this.tabItem.style.backgroundColor = "FFFFFF";
  this.tabContent.style.display = "none";
 },

 mouseOverHandler : function(evnt)
 {
  var srcEle = Event.element(evnt);
  srcEle.style.backgroundColor = "EEEEEF";
 },

 mouseOutHandler : function(evnt)
 {
  var srcEle = Event.element(evnt);
  if(srcEle.setColor!=true)
      srcEle.style.backgroundColor = "FFFFFF";
 }
}

分享到：

Java5泛型的用法，T.class的获取和为擦拭 ... | java二进制兼容性原理

• 2007-08-29 21:30
• 浏览 3184
• 评论(0)
• 查看更多