DOM Basic

Ajax YUI DOM

DOMのトップページからサンプリングしていく。

まず、YUIのDOM機能を利用するには、以下の２つのjsファイルを読み込む。

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/dom/dom-min.js" >
</script>

以下、DOMの座標（x=left、y=top; pix）の参照と変更、スタイルの変更の例が書いてあるので、まとめて以下のコードでサンプリング。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css"> 
#test {width:200px; height100px; background-color:yellow;}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/dom/dom-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/event/event-min.js" >
</script> 

<script type="text/javascript">

init = function() {

	setPos = function() {
		//現在のx座標（left）とy座標（top）を取得する。
		var aPos = YAHOO.util.Dom.getXY(['test','test1']);

		// id=testをずらす。
                // 2009/3/24 間違いの修正
		var x1Pos = parseInt(aPos[0][0])+20; 
		var y1Pos = parseInt(aPos[0][1])+10;
		// id=test1をずらす。
		var x2Pos = parseInt(aPos[1][0])+20; 
		var y2Pos = parseInt(aPos[1][1])+10;

		var nPos = [[x1Pos,x2Pos],[y1Pos,y2Pos]];
		 
		//x座標（left）とy座標（top）をずらす。
		YAHOO.util.Dom.setXY('test', [x1Pos,y1Pos]); 
		YAHOO.util.Dom.setXY('test1', [x2Pos,y2Pos]); 
		//下のような配列指定はできないようだ。（DOMのAPIドキュメントによる）
		//http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html
//		YAHOO.util.Dom.setXY(['test','test1'], [[x1Pos,y1Pos],[x2Pos,y2Pos]]); 
	}
	// イベントとハンドラーを定義
	YAHOO.util.Event.addListener("test", 
			"click", setPos);

	setSty = function() {
		//スタイルの属性は１だけのようだ。（DOMのAPIドキュメントによる）
		YAHOO.util.Dom.setStyle('test1', 
				'background-color','lime');
		//エレメントは配列での指定が可能。（DOMのAPIドキュメントによる）
		YAHOO.util.Dom.setStyle(['test','test1'], 'opacity', 0.2);
	}
	// イベントとハンドラーを定義
	YAHOO.util.Event.addListener("test1", 
			"click", setSty);
	
}
</script>
</HEAD>

<BODY onload=init()>
<p>
<DIV id="test">
ここをクリックしてください。位置がX+20、Y+10だけ動きます。
</DIV>
<p>
<p>
<DIV id="test1" style={width:300px;height:100px;}>
ここをクリックしてください。DIVのスタイルが変わります。
</DIV>
<p>

</BODY>
</HTML>


以下の画面がでてくるので、黄色のDIVをクリックすると右に20pix、下に10pixずれていきます。

下のDIVをクリックすると、opacity（透過度；注、Operaの場合には9以降）があがります。

これでOK。