Listview effect implemented by javascript_javascript skills

<script> <BR>   var oListView = new Object(); <br><br>   function listView(_container) { <BR>       this.author = '51JS.COM-ZMM'; <BR>       this.version = 'ListView 1.0'; <BR>       this.container = _container; <BR>       this.box = new Object(); <BR>       this.headerWidth = 0; <BR>       this.headerHeight = 20; <BR>       this.itemWidth = 0; <BR>       this.itemHeight = 0; <BR>       this.rowsCount = 30; <BR>       this.isResize = false; <BR>       this.separate = new Object(); <BR>       this.startPoint = 0; <BR>       this.endPoint = 0; <BR>       this.tempSeparate = new Object(); <BR>       this.put_headerHeight = function(_height) { return _height; }; <BR>       this.get_headerHeight = function() { return this.headerHeight; }; <BR>       this.put_rowsCount = function(_count) { return _count; }; <BR>       this.get_rowsCount = function() { return this.rowsCount; }; <BR>   } <br><br>   listView.prototype = { <BR>       boxInit : function() { <BR>           this.container.innerHTML = new String(); <BR>           this.box = (function(_object) { <BR>                var _box = document.createElement('DIV'); <BR>                with (_box) { <BR>                      id = 'ListViewBox'; <BR>                      style.width = _object.offsetWidth; <BR>                      style.height = _object.offsetHeight; <BR>                      style.margin = '0px'; <BR>                      style.padding = '0px'; <BR>                      attachEvent('oncontextmenu', new Function('return false;')); <BR>                } <BR>                return _box; <BR>           })(this.container); <BR>           this.headerPanel = (function(_width, _height) { <BR>                var _headerPanel = document.createElement('DIV'); <BR>                with (_headerPanel) { <BR>                      style.width = _width; <BR>                      style.height = _height; <BR>                }            <BR>                return _headerPanel; <BR>           })(this.box.style.width, this.headerHeight); <BR>           this.headerPanel.appendChild(this.textPanel = (function() { <BR>                var  _textPanel = document.createElement('NOBR'); <BR>                _textPanel.attachEvent('onmousemove', function() { <BR>                     with (oListView) { <BR>                           if (event.button == 1) { <BR>                               textPanel.style.cursor = 'E-resize'; <BR>                               tempSeparate.style.left = event.clientX - getPosition(box).left; <BR>                               tempSeparate.style.display = 'inline'; <BR>                               endPoint = event.clientX; <BR>                               isResize = true; <BR>                           } <BR>                     } <BR>                });               <BR>                return _textPanel; <BR>           })()); <BR>           this.rowItemPanel = (function(_width, _height) { <BR>                var _itemPanel = document.createElement('DIV'); <BR>                with (_itemPanel) { <BR>                      style.width = _width; <BR>                      style.height = _height; <BR>                      style.overflow = 'hidden'; <BR>                }<BR>                return _itemPanel; <BR>           })(this.box.style.width, parseInt(this.box.style.height) - this.headerHeight); <BR>           this.rowItemPanel.appendChild(this.dataPanel = (function() { <BR>                var  _dataPanel = document.createElement('NOBR'); <BR>                with (_dataPanel) { <BR>                      style.cursor = 'default'; <BR>                      attachEvent('onclick', function() { <BR>                          document.selection.empty(); <BR>                      }); <BR>                      attachEvent('onselectstart', function() { <BR>                          document.selection.empty(); <BR>                      }); <BR>                } <BR>                return _dataPanel; <BR>           })()); <BR>           this.dataPanel.appendChild(this.tempSeparate = (function(_height) { <BR>                var _tempSeparate = document.createElement('SPAN'); <BR>                with (_tempSeparate) { <BR>                      style.width = '1px'; <BR>                      style.height = _height; <BR>                      style.border = '0px'; <BR>                      style.backgroundColor = 'black'; <BR>                      style.position = 'absolute'; <BR>                      style.display = 'none';                        <BR>                } <BR>                return _tempSeparate; <BR>           })(this.rowItemPanel.style.height)); <BR>           this.box.appendChild(this.headerPanel); <BR>           this.box.appendChild(this.rowItemPanel); <BR>           this.container.appendChild(this.box); <BR>       }, <br><br>       drawListView : function(_headers, _aligns) { <BR>           this.boxInit(); <BR>           this.drawHeader(_headers); <BR>           this.drawRowItem(_headers, _aligns); <BR>           document.attachEvent('onmouseup', this.finishResize); <BR>       }, <br><br>       drawHeader : function(_headers) { <BR>           this.headers = []; <BR>           this.headerWidth = Math.round((parseInt(this.headerPanel.style.width) - (_headers.length - 1) * 1) / _headers.length)   1; <BR>           for (var i = 0; i < _headers.length; i  ) { < _headers.length; i ) { <BR>                var _header = document.createElement('SPAN'); <BR>                with (_header) { <BR>                      style.width = this.headerWidth; <BR>                      style.height = this.headerHeight; <BR>                      style.overflow = 'hidden'; <BR>                      style.backgroundColor = 'buttonface'; <BR>                      style.borderLeft = '1px solid buttonhighlight';  <BR>                      style.borderTop = '1px solid buttonhighlight';  <BR>                      style.borderRight = '1px solid buttonshadow';  <BR>                      style.borderBottom = '1px solid buttonshadow'; <BR>                      style.textAlign = 'center'; <BR>                      style.fontSize = '12px'; <BR>                      style.fontFamily = 'Sans-Serif, Tahoma'; <BR>                      style.paddingTop = '1px'; <BR>                      innerText = _headers[i]; <BR>                }<BR>                this.textPanel.appendChild(_header); <BR>                this.headers[this.headers.length] = _header; <BR>                var _separate = this.getSeparate(true); <BR>                this.textPanel.appendChild(_separate); <BR>                this.headers[this.headers.length] = _separate;                                  <BR>           } <BR>           var _last = document.createElement('SPAN'); <BR>           with (_last) { <BR>                 style.width = this.headerPanel.offsetWidth; <BR>                 style.height = this.headerHeight; <BR>                 style.overflow = 'hidden'; <BR>                 style.backgroundColor = 'buttonface'; <BR>                 style.borderLeft = '1px solid buttonhighlight';  <BR>                 style.borderTop = '1px solid buttonhighlight';  <BR>                 style.borderRight = '1px solid buttonshadow';  <BR>                 style.borderBottom = '1px solid buttonshadow';  <BR>                 style.textAlign = 'center'; <BR>                 style.fontSize = '12px'; <BR>                 style.fontFamily = 'Sans-Serif, Tahoma'; <BR>                 style.paddingTop = '1px'; <BR>                 innerText = new String(); <BR>           } <BR>           this.textPanel.appendChild(_last);  <BR>           this.headers[this.headers.length] = _last;        <BR>       },  <br><br>       drawRowItem : function(_headers, _aligns) { <BR>           this.items = []; <BR>           this.itemWidth = Math.round((parseInt(this.rowItemPanel.style.width) - (_headers.length - 1) * 1) / _headers.length)   1; <BR>           this.itemHeight = parseInt(this.rowItemPanel.style.height) - 2; <BR>           for (var i = 0; i < _headers.length; i  ) { < _headers.length; i ) { <BR>                var _item = document.createElement('SPAN'); <BR>                with (_item) { <BR>                      style.width = this.itemWidth; <BR>                      style.height = this.itemHeight; <BR>                      style.overflow = 'hidden'; <BR>                      style.padding = '0px'; <BR>                      appendChild((function(_count, _width, _height, _align) { <BR>                            var _table = document.createElement('TABLE'); <BR>                            with (_table) { <BR>                                  cellSpacing = 0; <BR>                                  cellPadding = 0; <BR>                                  style.width = _width; <BR>                                  style.tableLayout = 'fixed'; <BR>                            }<BR>                            var _tbody = document.createElement('TBODY'); <BR>                            for (var i = 0; i < _count; i  ) { < _count; i ) { <BR>                                 var _tableTr = document.createElement('TR'); <BR>                                 var _tableTd = document.createElement('TD'); <BR>                                 with (_tableTd) { <BR>                                       align = _align; <BR>                                       style.height = _height;                             <BR>                                       style.borderBottom = '1px solid #c6c3c6'; <BR>                                       style.fontSize = '12px'; <BR>                                       style.paddingLeft = '3px'; <BR>                                       setAttribute('onclick', function() { <BR>                                           oListView.selectedRow(this.parentNode.rowIndex);   <BR>                                       }); <BR>                                       setAttribute('ondblclick', function() { <BR>                                           oListView.showSelected(this.parentNode.rowIndex);   <BR>                                       }); <BR>                                       innerHTML = new String(' '); <BR>                                 }<BR>                                 _tableTr.appendChild(_tableTd); <BR>                                 _tbody.appendChild(_tableTr); <BR>                            } <BR>                            _table.appendChild(_tbody); <BR>                            return _table; <BR>                      })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount), _aligns[i])); <BR>                } <BR>                this.dataPanel.appendChild(_item); <BR>                this.items[this.items.length] = _item;  <BR>                var _separate = this.getSeparate(false); <BR>                _separate.style.height = this.itemHeight; <BR>                this.dataPanel.appendChild(_separate); <BR>                this.items[this.items.length] = _separate;                    <BR>           } <BR>           var _last = document.createElement('SPAN'); <BR>           with (_last) { <BR>                 style.width = this.rowItemPanel.offsetWidth; <BR>                 style.height = this.itemHeight; <BR>                 style.overflow = 'hidden'; <BR>                 style.padding = '0px'; <BR>                 appendChild((function(_count, _width, _height) { <BR>                       var _table = document.createElement('TABLE'); <BR>                       with (_table) { <BR>                             cellSpacing = 0; <BR>                             cellPadding = 0; <BR>                             style.width = '100%'; <BR>                       }<BR>                       var _tbody = document.createElement('TBODY'); <BR>                       for (var i = 0; i < _count; i  ) { < _count; i ) { <BR>                            var _tableTr = document.createElement('TR'); <BR>                            var _tableTd = document.createElement('TD'); <BR>                            with (_tableTd) { <BR>                                  style.height = _height;                             <BR>                                  style.borderBottom = '1px solid menu'; <BR>                                  innerHTML = new String('<nobr style="height: ' eval(_height-1) ';overflow: hidden;"> '); <BR>                            } <BR>                            _tableTr.appendChild(_tableTd); <BR>                            _tbody.appendChild(_tableTr); <BR>                       } <BR>                       _table.appendChild(_tbody); <BR>                       return _table; <BR>                 })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount))); <BR>           } <BR>           this.dataPanel.appendChild(_last);  <BR>           this.items[this.items.length] = _last;  <BR>       },         <br><br>       getSeparate : function(_resize) { <BR>           var _separate = document.createElement('SPAN'); <BR>           with (_separate) { <BR>                 style.width = _resize ? '2px' : '1px' ; <BR>                 style.height = this.headerHeight; <BR>                 style.border = '1px '   (_resize ? 'inset white' : 'solid #c6c3c6'); <BR>                 style.overflow = 'hidden'; <BR>                 style.position = 'absolute'; <BR>                 if (_resize) { <BR>                     attachEvent('onmousedown', function() { <BR>                         with (oListView) { <BR>                               separate = event.srcElement; <BR>                               startPoint = event.clientX; <BR>                         } <BR>                     }); <BR>                     attachEvent('onmouseenter', function() { <BR>                         event.srcElement.style.cursor = 'E-resize'; <BR>                     }); <BR>                 } <BR>           } <BR>           return _separate;            <BR>       }, <br><br>       getPosition : function(_object) { <BR>           var _top = _left = 0; <BR>           var _root = document.body; <BR>           while (_object != _root) { <BR>                  _left  = _object.offsetLeft; <BR>                  _object = _object.offsetParent; <BR>           } <BR>           return { left: _left };               <BR>       },  <br><br>       resizeItem : function() { <BR>           with (this) { <BR>                 var _width, _movePart = endPoint - startPoint; <BR>                 for (var i = 0; i < headers.length; i  ) { < headers.length; i ) { <BR>                      if (headers[i] == separate) { <BR>                          var _bool = true; <BR>                          _bool = _bool && (_movePart < 0); < 0); <BR>                          _bool = _bool && (parseInt(headers[i - 1].style.width) < Math.abs(_movePart)); < Math.abs(_movePart)); <BR>                          if (_bool) { <BR>                              headers[i - 1].style.width = 0; <BR>                              items[i - 1].style.width = 0; <BR>                          } else { <BR>                              _width = parseInt(headers[i - 1].style.width); <BR>                              headers[i - 1].style.width = _width   _movePart; <BR>                              _width = parseInt(items[i - 1].style.width); <BR>                              items[i - 1].style.width = _width   _movePart; <BR>                              _width = parseInt(items[i - 1].firstChild.style.width); <BR>                              items[i - 1].firstChild.style.width = _width   _movePart; <BR>                              var _table = items[i - 1].firstChild; <BR>                              for (var j = 0; j < _table.rows.length; j  ) { < _table.rows.length; j ) { <BR>                                   var _dataPanel = _table.rows[j].cells[0].children[0];                                  <BR>                                   if (typeof _dataPanel != 'undefined') { <BR>                                       _width = parseInt(_dataPanel.style.width);  <BR>                                       _dataPanel.style.width = _width   _movePart; <BR>                                   } <BR>                              } <BR>                          } <BR>                      } <BR>                 } <BR>           }  <BR>       }, <br><br>       finishResize : function() { <BR>           with (oListView) { <BR>                 if (isResize) { <BR>                     isResize = false; <BR>                     textPanel.style.cursor = 'default'; <BR>                     tempSeparate.style.display = 'none'; <BR>                     resizeItem(); <BR>                 } <BR>           }             <BR>       }, <br><br>       addListItem : function(_datas) { <BR>           var _itemNum = _datas.length > this.rowsCount ? this.rowsCount : _datas.length ; <BR>           for (var i = 0; i < _itemNum; i  ) { < _itemNum; i ) { <BR>                var n = 0; <BR>                for (j = 0; j < this.items.length - 2; j  ) { < this.items.length - 2; j ) { <BR>                     if (j % 2 == 0) { <BR>                         var _dataPanel = document.createElement('NOBR'); <BR>                         var _tableCell = this.items[j].firstChild.rows[i].cells[0]; <BR>                         with (_dataPanel) { <BR>                               style.width = this.itemWidth; <BR>                               style.overflow = 'hidden'; <BR>                               style.textOverflow = 'ellipsis'; <BR>                               innerHTML = _datas[i][n]; <BR>                         } <BR>                         _tableCell.innerHTML = new String(); <BR>                         _tableCell.appendChild(_dataPanel); <BR>                         _tableCell.title = _datas[i][0]; <BR>                         n  ; <BR>                     } <BR>                }<BR>           } <BR>       }, <br><br>       selectedRow : function(n) { <BR>           for (var i = 0; i < this.items.length; i ) { < this.items.length; i ) { <BR>                if (i % 2 == 0) { <BR>                    var _table = this.items[i].firstChild; <BR>                    for (var j = 0; j < _table.rows.length; j  ) { < _table.rows.length; j ) { <BR>                         var _dataPanel = _table.rows[j].cells[0].children[0];                                  <BR>                         if (typeof _dataPanel != 'undefined') { <BR>                             if (j == n) { <BR>                                 _table.rows[j].cells[0].style.color = 'highlighttext'; <BR>                                 _table.rows[j].cells[0].style.backgroundColor = 'highlight'; <BR>                             } else { <BR>                                 _table.rows[j].cells[0].style.color = ''; <BR>                                 _table.rows[j].cells[0].style.backgroundColor = ''; <BR>                             } <BR>                             var _children = _table.rows[j].cells[0].firstChild.children; <BR>                             this.changeChild(_children, j == n); <BR>                         } <BR>                    }                 <BR>                } <BR>           } <BR>       }, <br><br>       changeChild : function(_children, _isSelected) { <BR>           if (typeof _children != 'undefined') { <BR>               for (var i = 0; i < _children.length; i  ) { < _children.length; i ) { <BR>                    if (_isSelected) { <BR>                        _children[i].style.color = 'highlighttext'; <BR>                        _children[i].style.backgroundColor = 'highlight'; <BR>                    } else { <BR>                        _children[i].style.color = ''; <BR>                        _children[i].style.backgroundColor = '';                          <BR>                    } <BR>               }                 <BR>           } else { <BR>               return false; <BR>           } <BR>       }, <br><br>       showSelected : function(n) { <BR>           var _text = new String(); <BR>           for (var i = 0; i < this.items.length - 2; i ) { < this.items.length - 2; i ) { <BR>                if (i % 2 == 0) { <BR>                    var _table = this.items[i].firstChild; <BR>                    _text  = this.headers[i].innerText   ':n'; <BR>                    _text  = _table.rows[n].cells[0].firstChild.innerHTML   'nn';             <BR>                } <BR>           } <BR>           alert(_text);             <BR>       }       <BR>   }<br><br>   function initListView() { <BR>       var _headers = []; <BR>       _headers[_headers.length] = '标题'; <BR>       _headers[_headers.length] = '内容'; <BR>       _headers[_headers.length] = '时间';     <BR>       _headers[_headers.length] = '管理'; <BR>       var _aligns = []; <BR>       _aligns[_aligns.length] = 'left'; <BR>       _aligns[_aligns.length] = 'left'; <BR>       _aligns[_aligns.length] = 'center';     <BR>       _aligns[_aligns.length] = 'center';          <BR>       oListView = new listView(self.oContainer); <BR>       oListView.drawListView(_headers, _aligns); <br><br>       var _items = []; <BR>       _items[_items.length] = ['标题一', '内容一', '2006-6-21 10:30:00', '<a href="update.aspx">编辑  <a href="delete.aspx">删除']; <BR>       _items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', '<a href="update.aspx">编辑  <a href="delete.aspx">删除']; <BR>       _items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', '<a href="u</script>