tmlib.js には tm.dom.Element というクラスが定義されており, これを使うことで様々な DOM 操作を行うことができます.

今回はそのサンプルとして tmlib.js でモーダルウィンドウを作ってました.

サンプルは jsdo.it で作成しております.

Table of contents

• サンプルについて
• ソースコードの解説
  • DOM 要素をクエリで取得
  • イベントリスナをさくっと登録!
  • 一度しか実行しないイベントを登録する
  • スタイルをサクッとセット
  • 属性をサクッとセット
• tmlib.js hackthon #1 やります!

サンプルについて

左上のボタンを押すとモーダルウィンドウが表示されます.

ウィンドウの右上の×, 右下の Close ボタン, ウィンドウ以外の 黒いとこのいずれかを押すとモーダルウィンドウが閉じます.

デザインは Bootstrap を参考にしました.

up

ソースコードの解説

DOM 要素をクエリで取得

tm.dom.Element の引数にクエリ(CSSセレクタ)を指定すると クエリにマッチした要素を取得することができます.

jQuery のやつと似たようなのと思ってもらえれば良いです.

var modalElm = tm.dom.Element("#myModal");

var dismissLinks = tm.dom.ElementList("[data-dismiss='modal']");

イベントリスナをさくっと登録!

tm.dom.Element の event プロパティから簡単にイベントを登録することができます.

今回のサンプルでは click メソッドでクリックイベントを登録しています.

    tm.dom.Element("#open-button").event.click(function() {
        modalElm.modal.open();
    });

add メソッドで下記のように指定しても同様の動作になります.

    tm.dom.Element("#open-button").event.add("click", function() {
        modalElm.modal.open();
    });

一度しか実行しないイベントを登録する

先ほど使用した event プロパティ. このプロパティのもつ one メソッドで一度しか実行しないイベントリスナを 登録することができます.

        backdrop.event.one("click", function() {
            self.modal.close();
        });

スタイルをサクッとセット

tm.dom.Element の style プロパティでサクッと CSS プロパティのセット, リムーブすることができます.

セット

self.style.set("display", "block");

リムーブ

self.style.remove("display");

属性をサクッとセット

tm.dom.Element の attr プロパティ経由でお手軽に属性をセットすることができます.

backdrop.attr.set("class", "modal-backdrop fade");

up

tmlib.js hackthon #1 やります!

『tmlib.js hackthon #1 〜JavaScript をより使いやすく, より便利に, そしてより豊かにをモットーとする「tmlib.js」のハッカソンイベント開催〜』という ハッカソンイベントを行います.

HatchUP さん主催の TechBuzz というイベントの一つとして行います.

前回 tmlib.js についてプレゼンしたのがキッカケでお話を頂きました. いやはやありがたい.

何をやるか具体的な内容は現在詰めています.

• みんなそれぞれゲーム作って
• みんなで Web 上にアップして
• みんなでプレイし合って
• みんなでレビューし合って
• みんなで楽しめれば

良いなぁ～なんて思ってたりします.

これをやりたい, あれをやって欲しいなどありましたら気軽に @phi_jp とかに投げてもらえると嬉しいです.

up