programming:javascript

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
programming:javascript [2008/11/13 00:10] – nakayamaprogramming:javascript [2019/05/18 02:23] (現在) – 外部編集 非ログインユーザー
行 1: 行 1:
 <html> <html>
   <style type="text/css">   <style type="text/css">
-    thead { background: #aaf no-repeat right center; }+    table { 
 +      margin: 0.5em 0; 
 +      border: 1px solid black; border-collapse: collapse; 
 +      font-size: small; 
 +      font-family: sans-serif; 
 +    } 
 +    td, th { 
 +      padding: 0.2em 0.3em; 
 +      border: 1px solid silver; 
 +    } 
 +    th { 
 +      text-align: left; 
 +      padding-right: 20px; 
 +      cursor: default; 
 +    } 
 + 
 +    thead th.sort-asc, thead th.sort-desc { 
 +      background: #aaf url('sort-asc.png') no-repeat right center; 
 +    } 
 +    thead th.sort-desc { background-image: url('sort-desc.png'); }
     tr.alternate * { background-color: #ddd; }     tr.alternate * { background-color: #ddd; }
   </style>   </style>
-  <script type="text/javascript" src="~/prototypejs/prototype.js"></script>+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
   <script type="text/javascript">   <script type="text/javascript">
 +Element.addMethods({
 +  collectTextNodes: function(element) {  
 +    return $A($(element).childNodes).collect( function(node) {
 +      return (node.nodeType==3 ? node.nodeValue : 
 +        (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
 +    }).flatten().join('');
 +  } 
 +});
 +
     var TableSorter = Class.create({     var TableSorter = Class.create({
       initialize: function(element) {       initialize: function(element) {
行 13: 行 41:
         this.initDOMReferences();         this.initDOMReferences();
         this.initEventHandlers();         this.initEventHandlers();
-      }, //initialize +      }, // initialize 
-      +    
       initDOMReferences: function() {       initDOMReferences: function() {
         var head = this.element.down('thead');         var head = this.element.down('thead');
行 20: 行 48:
         if (!head || !body)         if (!head || !body)
           throw 'テーブルには、ヘッダとソート可能なボディが必要です。';           throw 'テーブルには、ヘッダとソート可能なボディが必要です。';
-        this.headers = head.down('tr').childElements(); +        this.headers = head.down('tr').childElements();  
-        this.headers.each(function(e, i) {+        this.headers.each(function(e, i) { 
           e._colIndex = i;           e._colIndex = i;
         });         });
         this.body = body;         this.body = body;
       }, // initDOMReferences       }, // initDOMReferences
-      +    
       initEventHandlers: function() {       initEventHandlers: function() {
 +        this.handler = this.handleHeaderClick.bind(this); 
 +        this.element.observe('click', this.handler);
       }, // initEventHandlers       }, // initEventHandlers
-    };+     
 +      handleHeaderClick: function(e) { 
 +        var element = e.element(); 
 +        if (!('_colIndex' in element)) { 
 +          element = element.ancestors().find(function(elt) {  
 +            return '_colIndex' in elt; 
 +          }); 
 +          if (!((element) && '_colIndex' in element)) 
 +            return; 
 +        } 
 +        this.sort(element._colIndex); 
 +      }, // handleHeaderClick 
 +     
 +      adjustSortMarkers: function(index) { 
 +        if (this.sortIndex != -1) 
 +          this.headers[this.sortIndex].removeClassName('sort-' + 
 +            this.sortOrder); 
 +        if (this.sortIndex != index) { 
 +          this.sortOrder = 'asc'; 
 +          this.sortIndex = index; 
 +        } else 
 +          this.sortOrder = ('asc' == this.sortOrder ? 'desc' : 'asc'); 
 +        this.headers[index].addClassName('sort-' + this.sortOrder); 
 +      }, // adjustSortMarkers 
 +     
 +      sort: function(index) { 
 +        this.adjustSortMarkers(index); 
 +        var rows = this.body.childElements(); 
 +        rows = rows.sortBy(function(row) {  
 +          return row.childElements()[this.sortIndex].collectTextNodes();  
 +        }.bind(this)); 
 +        if ('desc' == this.sortOrder) 
 +          rows.reverse(); 
 +        rows.reverse().each(function(row, index) {  
 +          if (index > 0) 
 +            this.body.insertBefore(row, rows[index - 1]); 
 +        }.bind(this)); 
 +        rows.reverse().each(function(row, index) { 
 +          row[(1 == index % 2 ? 'add' : 'remove') + 'ClassName']('alternate');  
 +        }); 
 +      } // sort 
 +    }); // TableSorter 
 +     
 +    document.observe('dom:loaded', function() { 
 +      $$('table').each(function(table) { new TableSorter(table); });  
 +    });
   </script>   </script>
-  <table id="table_sort" border="1">+  <table id="netfw">
     <thead>     <thead>
       <tr>       <tr>
-        <td>.NET バージョン</td> +        <th>.NET バージョン</th> 
-        <td>バージョン</td> +        <th>バージョン</th> 
-        <td>リリース日</td>+        <th>リリース日</th> 
 +      </tr>
     </thead>     </thead>
     <tbody>     <tbody>
行 151: 行 227:
     </tbody>     </tbody>
   </table>   </table>
 +<table id="todo">
 +    <thead>
 +        <tr>
 +            <th>What?</th>
 +            <th>When?</th>
 +            <th>Location</th>
 +        </tr>
 +    </thead>
 +    <tbody>
 +        <tr>
 +            <td>Paris Web 2007</td>
 +            <td>2007-11-15</td>
 +            <td>IBM La Défense / INSIA</td>
 +        </tr>
 +        <tr class="alternate">
 +            <td>Paris On Rails 2007</td>
 +            <td>2007-12-10</td>
 +            <td>Cité des Sciences</td>
 +
 +        </tr>
 +        <tr>
 +            <td>Burger Quiz party</td>
 +            <td>2007-04-14</td>
 +            <td>Volta</td>
 +        </tr>
 +    </tbody>
 +</table>
 </html> </html>
  • programming/javascript.1226502641.txt.gz
  • 最終更新: 2019/05/18 02:23
  • (外部編集)