prototype.jsのサンプル

javascript

なんかいいアイディア出ないかなーと思ってむやみにprototype.js(1.4.0)を使ってサンプルコードを書いてみた。テーブルの中のセル(ただのspanでもいいんだけど)をクリックすると、中身を編集できるようになるというもの。半年くらい前に誰かのブログで見た気がするけど、見つかんなかったし、練習になるかと思って書いてみた。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Test loading a local HTML Document</title>
<script language="JavaScript" type="text/javascript" src="../js/lib/prototype.js"></script>
<script language="JavaScript" type="text/javascript"><!--


Editable = Class.create();
Object.extend(Editable, {
    registerByClass: function( className ) {
        var targets = document.getElementsByClassName( className );
        targets.each( function( element ) {
            new Editable(element);
        });
    },
    
    textFieldMargins: {x:6, y:8}
} );
Editable.prototype = {
    initialize: function( element ) {
        this.clickLister = this.doclick.bindAsEventListener(this);
        this.blurLister = this.doblur.bindAsEventListener(this);
        
        Event.observe(element, "click", this.clickLister, false);
    },
    
    doclick: function( event ) {
        var element = Event.element(event);
        Event.stopObserving(element, "click", this.clickLister, false);
        var text = element.textContent || element.innerText;
        var elementSize = { 
            width: element.clientWidth - Editable.textFieldMargins.x,
            height: element.clientHeight - Editable.textFieldMargins.y
        };
        element.innerHTML = "";
        var textField = document.createElement("input");
        textField.type = "text";
        textField.value = text;
        textField.style.width = elementSize.width + "px";
        textField.style.height = elementSize.height + "px";
        element.appendChild(textField);
        Event.observe(textField, "blur", this.blurLister, false);
        textField.focus();
    },
    
    doblur: function( event ) {
        var element = Event.element(event);
        Event.stopObserving(element, "blur", this.blurLister, false);
        var container = element.parentNode;
        container.innerHTML = element.value;
        Event.observe(container, "click", this.clickLister, false);
    }
}

Event.observe( window, "load", function() {
    Editable.registerByClass( "editable" );
} );


--></script>
</head>
<body>

<table>
    <tr>
        <th>aaaaaaaaaa</th>
        <th>bbbbbbbbbb</th>
        <th>cccccccccc</th>
    </tr>
    <tr>
        <td class="editable">aaaa1111</td>
        <td class="editable">bbbbbb222222</td>
        <td class="editable">ccccccccccc333333</td>
    </tr>
    <tr>
        <td class="editable">aaaaaaa111222222211</td>
        <td class="editable">bbbbbb222222</td>
        <td class="editable">cccccc333111111111333</td>
    </tr>
    <tr>
        <td class="editable">aaaaaaa133333333331111</td>
        <td class="editable">bbbbbb2222222222</td>
        <td class="editable">cccccc333333</td>
    </tr>
</table>


</body>
</html>