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>
動作サンプル
リサイズ可能