dojoを使いこなすための細かいTIPS

dojo使いには当たり前かもしれない、ちょっとしたTIPSです。

(1) dojo.byId

dojo.byIdは、HTMLのエレメントを渡すと、そのまま帰ってきます。
つまり、dojo.byId(dojo.byId('hoge')); とやっても正常に動作します。

なので、dijit等で「ノードのIDを渡す」と書かれているところに、直接エレメントを渡しても、たいてい上手く動きます。

動的に要素が増えてIDを付けにくい場合などに、ちょっと役立ちます。

(2) dojo.query

dojo.queryは、CSSのセレクタで要素を選択できる便利なものです。
この第2引数にHTMLのエレメントを渡すと、その子要素のみ検索対象になります。

var img = dojo.query('img', hogeNode)[0];

基本かつ必須な機能のはずなのに、なぜか解説サイトにあまり書いていないという。。

(3) dojox.layout.ResizeHandle

ドラッグ&ドロップはサンプルがたくさんあるのに、リサイズはなぜか少ないですね。
dojoはリサイズも簡単なので、以下にサンプルを載せておきます。

<html>
<head>
    <script type=”text/javascript” src=”dojo/dojo.js”></script>
    <script type=”text/javascript”>
        dojo.require(’dojox.layout.ResizeHandle’);
        dojo.addOnLoad(function() {
        var handle = new dojox.layout.ResizeHandle({
        activeResize:true,
        minWidth:30,
        minHeight:30,
        targetId: ‘box’
        }, dojo.byId(’handle’));
        });
    </script>
    <link rel=”stylesheet” href=”dojox/layout/resources/ResizeHandle.css” />
</head>
<body>
    <div id=”box” style=”position:relative; background:yellow;”>
        <p>リサイズできます</p>
        <div id=”handle”></div>
    </div>
</body>
</html>

動作サンプル

リサイズ可能

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ

BPSアドベントカレンダー