javascript_javascript 스킬로 구현한 리스트뷰 효과

<script> <BR>   var oListView = new Object(); <br><br>   함수 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>              (_box) {         id = 'ListViewBox'; <BR>                    스타일. 너비 = _object.offsetWidth; <BR>                   style.height = _object.offsetHeight;                style.margin = '0px'   style.padding = '0px' <BR>                    attachEvent('oncontextmenu', 새 함수 ('return false;')) <BR>              } <BR>              return _box>          })(this.container); <BR>         this.headerPanel = (function(_width, _height) { <BR>               var _headerPanel = document.createElement('DIV'); <BR>               with (_headerPanel) { >                    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('on mousemove', function() { <BR>                   (oListView) 사용 { <BR>                      if (event.button == 1) { <BR>                           textPanel.style.cur sor = 'E-크기 조정'; <BR>                          tempSeparate.style.left = event.clientX - getPosition(box ).left; <BR>                          tempSeparate.style.display = '인라인'; >          <BR> return _textPanel <BR>           })()); <BR>          this.rowItemPanel = (function(_width, _height) { <BR>               var _itemPanel = document.createElement('DIV'); <BR>               with (_itemPanel) { >                    style.width = _width <BR> style.height = _height; <BR>                    style.overflow = '숨겨짐';<BR>                반환 _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) { 🎜>                     style.cursor = '기본값 '; <BR>                    attachEvent('onclick', function() { <BR>                    document.selection.empty(); <BR>                    }); 🎜>                     attachEvent('onselectstart', function() { <BR>                       문서. Selection.empty(); <BR>                    }) <BR>              } <BR>             return _dataPanel; <BR>          this.dataPanel.appendChild(this.tempSeparate = (function(_height) { <BR>              var _tempSeparate = document.createElement('SPAN') <BR>               with (_tempSeparate) ) { <BR>                     style.width = ' <BR>                   style.height = _height; '; <BR>                    style.position = <BR>                  스타일. 표시 = 'none';                      <BR>               return _tempSeparate; <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>               (_header) 포함 { <BR>                    style.width = this.headerWidth; <BR>                     style.height = this.headerHeight; <BR>                     style.overflow = '숨김'; <BR>                     style.BackgroundColor = '버튼페이스'; <BR>                     style.borderLeft = '1px 단색 버튼 강조 표시';  <BR>                     style.borderTop = '1px 단색 버튼 강조 표시';  <BR>                     style.borderRight = '1px solid buttonshadow';  <BR>                     style.borderBottom = '1px solid buttonshadow'; <BR>                     style.textAlign = 'center'; <BR>                     style.fontSize = '12px'; <BR>                     style.fontFamily = '산세리프, 타호마'; <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>           (_last) { <BR>                style.width = this.headerPanel.offsetWidth; <BR>                style.height = this.headerHeight; <BR>                style.overflow = '숨김'; <BR>                 style.BackgroundColor = '버튼페이스'; <BR>                 style.borderLeft = '1px 단색 버튼 강조 표시';  <BR>                style.borderTop = '1px 단색 버튼 강조 표시';  <BR>                style.borderRight = '1px solid buttonshadow';  <BR>                 style.borderBottom = '1px solid buttonshadow';  <BR>                 style.textAlign = 'center'; <BR>                 style.fontSize = '12px'; <BR>                style.fontFamily = '산세리프, 타호마'; <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>               (_item)으로 { <BR>                    style.width = this.itemWidth; <BR>                     style.height = this.itemHeight; <BR>                     style.overflow = '숨김'; <BR>                     style.padding = '0px'; <BR>                    appendChild((function(_count, _width, _height, _align) { <BR>                       var _table = document.createElement('TABLE')                           (_table) 포함 { <BR>                             cellSpacing = 0; cellPadding = 0; <BR>                              style.width = _width;                      }<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>                              와 함께 (_tableTd) { <BR>                                  정렬 = _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>                           반품 _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>           (_last) { <BR>                style.width = this.rowItemPanel.offsetWidth; <BR>                style.height = this.itemHeight; <BR>                style.overflow = '숨김'; <BR>                 style.padding = '0px'; <BR>               appendChild((function(_count, _width, _height) { <BR>                  var _table = document.createElement('TABLE')                     (_table) { <BR>                           cellSpacing = 0                         cellPadding = 0; <BR>                           style.width = '100%'                  }<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>                          (_tableTd)로 { <BR>                             style.height = _height;                             <BR>                                style.borderBottom = '1px 단색 메뉴'; <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>           (_separate) { <BR>                style.width = _resize ? '2px' : '1px' ; <BR>                style.height = this.headerHeight; <BR>                style.border = '1px '   (_resize ? '삽입 흰색' : 'solid #c6c3c6'); <BR>                style.overflow = '숨김'; <BR>                 style.position = '절대'; <BR>                if (_resize) { <BR>                  attachEvent('onmousedown', function() { <BR>                               (oListView)로 {                          별도의 = event.srcElement; } <BR>                     }); <BR>                   attachEvent('onmouseenter', function() { <BR>                    event.srcElement.style.cursor = 'E-resize'; <BR>                    }); <BR>                } <BR>           } <BR>           반품 _별도;            <BR>       }, <BR><BR>       getPosition : function(_object) { <BR>          var _top = _left = 0; <br>           var _root = document.body; <br>           동안 (_object != _root) { <BR>                 _left  = _object.offsetLeft; <BR>                  _object = _object.offsetParent; <BR>           } <BR>           반환 { 왼쪽: _left };               <BR>       },  <br><br>       resizeItem : function() { <BR>          와 함께 (this) { <BR>               var _width, _movePart = endPoint - startPoint; <BR>               for (var i = 0; i < headers.length; i  ) { < headers.length; i ) { <BR>                   if (headers[i]== 별도) { <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>                            항목[i - 1].style.width = 0; <BR>                         } else { <BR>                            _width = parseInt(headers[i - 1].style.width); <BR>                            헤더[i - 1].style.width = _width   _movePart; <BR>                            _width = parseInt(items[i - 1].style.width); <BR>                            항목[i - 1].style.width = _width   _movePart; <BR>                            _width = parseInt(items[i - 1].firstChild.style.width); <BR>                            항목[i - 1].firstChild.style.width = _width   _movePart; <BR>                           var _table = items[i - 1].firstChild; [ j].cells[0].children[0];                                  <BR>                               if (typeof _dataPanel != '정의되지 않음') { < _table.rows.length; j ) { <BR>                                                      .폭);  <BR>                                   _dataPanel.style.width = _width   _movePart; <BR>                                 } <BR>                         } <BR>                  <BR>                     } <BR>                } <BR>           }  <BR>       }, <br><br>       finishResize : function() { <BR>          (oListView)와 함께 { <BR>               if (isResize) { <BR>                   isResize = 거짓; <BR>                    textPanel.style.cursor = '기본값'; <BR>                     tempSeparate.style.display = '없음'; <BR>                     resizeItem(); <BR>                } <BR>           }            <BR>       }, <br><br>       addListItem : function(_datas)          var _ite mNum = _datas.length > this.rowsCount ? this.rowsCount : _datas.length ; <BR>           for (var i = 0; i < _itemNum; i  ) { <BR>              var n = 0; < _itemNum; i ) { <BR>               for (j = 0; j < this.items.length - 2; j  ) { <BR>                 if (j % 2 == 0) { < this.items.length - 2; j ) { <BR>                       var _dataPanel = document.createElement('NOBR'); <BR>                       var _tableCell = this.items[j].firstChild.rows[i].cells[0]; <BR>                       (_dataPanel) 사용 { <BR>                           style.width = this.itemWidth; <BR>                             style.overflow = '숨김'; <BR>                             style.textOverflow = '줄임표'; <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 ) {          if (i % 2 == 0) { < this.items.length; i ) { <BR>                    var _table = this.items[i].firstChild; <BR>                   for (var j = 0; j < _table.rows.length; j  ) { <BR>                      var _dataPanel = _table.rows[j].cells[0].children[0];                                  < _table.rows.length; j ) { <BR>                      if (typeof _dataPanel != '정의되지 않음') { <BR>                        if (j == n) { <BR>                               _table.rows[j].cells[0].style.color = 'highlighttext'; <BR>                              _table.rows[j].cells[0].style.BackgroundColor = '강조 표시'; <BR>                          } 그렇지 않으면 { <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 != 'undefine') { <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 = '강조 표시'; <BR>                   } else { <BR>                     _children[i].style.color = ''; <BR>                       _children[i].style.BackgroundColor = '';                          <BR>                   } <BR>               }               <BR>           } 그렇지 않으면 { <BR>              반환 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. 항목[i].firstChild ; <BR>                   _text  = this.headers[i].innerText   ':n'; <BR>                   _text  = _table.rows[n].cells[0].firstChild.innerHTML   'nn';             <BR>               } <BR>           } <BR>           경고(_text);             <BR>       }       <BR>   }<br><br>   함수 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] = '왼쪽'; <BR>       _aligns[_aligns.length] = '왼쪽'; <BR>       _aligns[_aligns.length] = '중심';     <BR>       _aligns[_aligns.length] = '중심';          <BR>       oListView = 새 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>