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>
↓動作サンプル
たぶん既出ネタですが、ふと見つけたので一応。
IE7で、marginが消える場合があります。
再現条件は、
・paddingが0以外のブロック要素Aに囲まれている
・Aの最初の子要素(空白・TAB・改行以外)がブロック要素Bである
・Bにheightとmarginが指定してある(たぶんhasLayoutがtrueになるならheight以外でも該当)
こんな感じみたいです。
これらを満たすと、Bのmarginが無視されます。
シンプルな再現HTMLは以下の通りです。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div style="padding:1px;">
<div style="margin:100px; height:20px;">こんにちは</div>
<div style="margin:100px; height:20px;">ハロー</div>
</div>
</body>
</html>
これを開くと、IE7以外では「こんにちは」と「ハロー」の左端はそろいますが、IE7では「こんにちは」が左に寄ってしまいます。
解決するには、Bを先頭子要素でなくせばいいので、適当なコメントを入れます。
<div style="padding:1px;">
<!– bugfix for IE7 –>
<div style="margin:60px; height:20px;">こんにちは</div>
<div style="margin:60px; height:20px;">ハロー</div>
</div>
やっぱりIE7は地雷ですね。
自動更新でIE8が入るようになったのがせめてもの救いです。
IE7で、JavaScriptを使って動的に要素を表示・非表示した場合、要素が重なってしまうことがあります。
実験ページ
IE7だと問題が再現し、IE8やFirefoxは再現しません。また、冒頭のDOCTYPE宣言を外してQuarksモードにしても再現しません。
IE7でのみ、Showボタンを押すと、文字が重なってしまうはずです。
不思議なことに、21行目のbackground指定を外すと、再現しません。
また、21行目の<div>開きと22行目の<div>開きの間に「スペース・TAB・改行以外の何か(コメントでも可)」を入れると、再現しません。
22行目の[height:2em] は、hasLayoutがtrueになれば何でもOKです。
まとめると、
・ブロック要素Aがある。
・Aの最初の子要素はブロック要素Bである。
・AはCSSで背景がnone以外に指定されていて、[hasLayout=false]である。
・Bは[position:relative] であり、なおかつ[hasLayout=true]である。
これらの条件を満たす場合、「Aの前にある要素の高さが変わり、AのY座標が変更になっても、BのY座標は再計算されない」というIE7独自のバグと言えそうです。
DebugToolbar等で位置の再計算を行うと、正しい位置に移動します。
おそらく計算順序にバグがあるのだと思います。position:relativeを使うときは気をつけましょう。