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