TabPage类

<style type="text/css">
    body {
                  background-color: menu;
    }
 
    #oContainer {
                  width: 500px;
                  height: 400px;
    }
</style>
<script language="javascript">
    var oTabPage = new Object();

    var TabPage = function(_container) {
        this.author = '51JS.COM-ZMM';
        this.version = 'TabPage 1.0';
        this.container = _container;
        this.barHeight = 22;
        this.put_barHeight = function(_height) { return _height; };
        this.get_barHeight = function() { return this.barHeight; };
        this.guideWidth = 82;
        this.put_guideWidth = function(_width) { return _width; };
        this.get_guideWidth = function() { return this.guideWidth; };
    }
   
    TabPage.prototype = {
        boxInit : function() {
            this.box = (function(_object) {
                 var _box = document.createElement('DIV');
                 with (_box) {
                       style.width = _object.offsetWidth;
                       style.height = _object.offsetHeight;
                       style.padding = '0px';  
                 }
                 return _box;
            })(this.container);
            this.box.appendChild(this.bar = (function(_height) {
                 var _bar = document.createElement('DIV');
                 with (_bar) {
                       align = 'left';
                       style.width = '100%';
                       style.height = _height;
                       style.padding = '0px';
                       attachEvent('oncontextmenu', new Function('return false'));
                       attachEvent('onselectstart', new Function('return false'));              
                 }
                 return _bar;
            })(this.barHeight));
            this.box.appendChild(this.page = (function(_height) {
                 var _page = document.createElement('DIV');
                 with (_page) {
                       style.width = '100%';
                       style.height = _height;
                       style.fontSize = '12px';
                       style.textAlign = 'left';          
                       style.padding = '5px';
                       style.borderLeft = '1px solid white';
                       style.borderRight = '2px outset';
                       style.borderBottom = '2px outset';
                       style.backgroundColor = 'menu';
                 }
                 return _page;            
            })(parseInt(this.box.style.height) - this.barHeight));    
            this.container.appendChild(this.box);
        },
   
        addTabPage : function(_guides, _contents) {
            this.guides = [];
            this.contents = [];
            for (var i = 0; i < _contents.length; i ++) {
                 var _page = document.createElement('DIV');
                 with (_page) {
                       style.display = (i == 0) ? 'inline' : 'none' ;
                       innerHTML = _contents[i].innerHTML;
                       _contents[i].removeNode(true);
                 }
                 this.page.appendChild(_page);
                 this.contents[this.contents.length] = _page;
            }
            this.bar.appendChild((function(_object) {
                 var _table = document.createElement('TABLE');
                 with (_table) {
                       width = '100%';
                       cellSpacing = 0;
                       cellPadding = 0;
                       style.tableLayout = 'fixed';
                 }
                 var _tbody = document.createElement('TBODY');
                 var _tr = document.createElement('TR');
                 for (var i = 0; i < _guides.length; i ++) {
                      var _td = document.createElement('TD');
                      with (_td) {
                            vAlign = 'bottom';
                            style.width = _object.guideWidth;
                            if (i != 0) style.borderBottom = '1px solid white';
                            appendChild (_object.guides[_object.guides.length] = (function(n) {
                                var _guide = document.createElement('SPAN');
                                with (_guide) {
                                      style.width = _object.guideWidth - 2;
                                      style.fontSize = '12px';
                                      style.textAlign = 'center';
                                      style.cursor = 'default';
                                      style.paddingTop = '3px';
                                      style.borderLeft = '1px solid white';
                                      style.borderTop = '1px solid white';
                                      style.backgroundColor = 'menu';
                                      if (i == 0) {
                                          style.height = _object.barHeight;
                                          _contents[i].style.display = 'inline';
                                      } else {
                                          style.height = _object.barHeight - 4;
                                      }
                                      innerText = _guides[i];
                                      attachEvent('onselectstart', new Function('return false;'));
                                      attachEvent('onmousedown', function() {                                     
                                          with (oTabPage) {
                                                for (var j = 0; j < guides.length; j ++) {
                                                     if (guides[j] == event.srcElement) {
                                                         guides[j].style.height = _object.barHeight;
                                                         guides[j].nextSibling.style.height = _object.barHeight;
                                                         guides[j].parentNode.style.borderBottom = '0px';
                                                         contents[j].style.display = 'inline';
                                                     } else {
                                                         guides[j].style.height = _object.barHeight - 4;
                                                         guides[j].nextSibling.style.height = _object.barHeight - 4;
                                                         guides[j].parentNode.style.borderBottom = '1px solid white';
                                                         contents[j].style.display = 'none';
                                                     }
                                                }
                                          }
                                      });
                                }
                                return _guide;
                            })(i));                       
                      }
                      _td.appendChild((function(o, n) {
                          var _line = document.createElement('SPAN');
                          with (_line) {
                                style.width = '2px';
                                style.height = (n == 0) ? o.barHeight : o.barHeight - 4 ;
                                style.borderLeft = '1px solid dimgray';
                                style.borderRight = '1px solid black';
                          }
                          return _line;
                      })(_object, i));
                      _tr.appendChild(_td);
                 }
                 _tr.appendChild((function() {
                      var _surplus = document.createElement('TD');
                      with (_surplus) {
                            style.width = '100%';
                            style.borderBottom = '1px solid white';
                            innerHTML = '&nbsp;';
                      }
                      return _surplus;
                 })());            
                 _tbody.appendChild(_tr);
                 _table.appendChild(_tbody);
                 return _table;          
            })(this));
        }
    }
       
    attachEvent('onload', function() {
        var _guideArr = ['基本信息', '划分类别', '简单介绍'];
        var _contentArr = [Content1, Content2, Content3];
   
        oTabPage = new TabPage(self.oContainer);
        oTabPage.boxInit();
        oTabPage.addTabPage(_guideArr, _contentArr); 
    });
</script>
<center>
    <div id="oContainer"></div>
</center>

<comment id="Content1">
    标题： <input> <br>     
    来源： <input> <br>     
</comment>
<comment id="Content2">     
    分类： <select><option>计算机网络</option><option>计算机软件</option></select>     
</comment>     
<comment id="Content3">     
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试     
</comment>