Closure Library - ボタン

ボタンを試してみた。

Button (Closure Library API Documentation - JavaScript)

デモ：
http://closuresample.appspot.com/html/button.html

ボタンの作り方には２種類ある。

一つは goog.ui.Button のオブジェクトを生成する方法。(1)がこれにあたる。

<h2>(1) goog.ui.Button</h2>
    <div id="button1"></div>
    <script>
      var btn1 = new goog.ui.CustomButton('BUTTON-1');
      btn1.render(goog.dom.$('button1'));
      goog.events.listen(btn1, goog.ui.Component.EventType.ACTION,
        function(e) {
          var target = e.target;
          alert('button1: ' + target);
        });
    </script>

もう一つはあらかじめ用意した <div> をボタン化する方法。(2)がこれにあたる。面白い。

<h2>(2) goog.ui.decorate</h2>
<div id="button2" class="goog-custom-button">
      <span style="color: blue">BUTTON-<b>2</b></span>
    </div>

    <div id="button3" class="goog-custom-button">
      <span style="font-size: 7pt">BUTTON-<b>3</b></span>

    </div>
    <script>
      var btn2 = goog.ui.decorate(goog.dom.$('button2'));
      goog.events.listen(btn2, goog.ui.Component.EventType.ACTION,
        function(e) {
          var target = e.target;
          alert('button2: ' + target);
        });
      var btn3 = goog.ui.decorate(goog.dom.$('button3'));
    </script>

こっちだと装飾がしやすい。どちらも生成したオブジェクトはイベントハンドリングを追加したりして好きにできる。