Yahoo! UI Library:: Dom の訳

  • 訳ではメソッド名に明示的に()をつけています。プロパティや変数、オブジェクトと区別をつけるためです。

http://developer.yahoo.net/yui/dom/index.html

Yahoo! UI Library: Dom

The DOM Utility comprises a family of convenience methods that simplify common DOM-scripting tasks, including element positioning and CSS style management, while normalizing for cross-browser inconsistencies

This page describes the Dom component and provides examples of its use. It contains these sections:


DOMユーティリティは、DOMスクリプティングの作業を簡単化するメソッドを揃えています。要素の位置指定や、CSSの管理ができるクロスブラウザなメソッドもあります。

このページにはDOMコンポーネントと使用法のサンプルを載せています。以下のような章構成です。(略)

Getting Started

<!-- Namespace source file --> 
<script src = "http://yourwebsite.com/util/YAHOO.js" ></script>

<!-- Dom source file --> 
<script src = "http://yourwebsite.com/widget/dom.js" ></script> 

Dom コンポーネントYAHOO.util.Dom.で定義されます。

Using Dom

This section describes how to use the Dom component.

  • Getting and Setting Position
  • Getting and Setting Opacity
  • Getting the Viewport Size
  • Comparing Regions

DOMる

このセクションにはDOMコンポーネントの使い方を載せています。

  • 位置の取得と指定
  • 透明度の取得と指定
  • 表示サイズの取得
  • リージョンの比較

Getting and Setting Position

Depending on how an HTML element is positioned in the document, getting the current page coordinates can be a challenge. The Dom component positioning methods (setXY, getXY, setX, and so on) can be used to ensure accurate positioning. Page coordinates are defined in the context of the entire HTML document, including the portions beyond the browser chrome.


var pos = YAHOO.util.Dom.getXY('test');
YAHOO.util.Dom.setXY('target', pos);
In this example, the getXY method returns an array with the X and Y coordinates of the HTML element "test". The setXY method takes a second HTML element "target" and sets its coordinates to the same coordinates of "test".


位置の取得と指定


HTML要素の位置をドキュメント中で指定する方法をとっていると、ページ内の座標を取得するのが難しくなってしまいます。DOMコンポーネントのsetXY() , getXY() , setX() などの位置指定メソッドは正確な位置指定をするのに使えます。ページ内の座標はHTMLドキュメント全体のコンテキストで定義され、browser chrome?をはみ出た部分も含みます。



var pos = YAHOO.util.Dom.getXY('test');
YAHOO.util.Dom.setXY('target', pos);


このサンプルでは、getXY()メソッドがtest要素の(X,Y)座標を配列として返しています。setXY()メソッドを使って、target要素に最初に取得したtest要素のXY座標を渡しています。

Getting and Setting CSS Opacity

The getStyle and setStyle methods enable you to define a CSS style and apply it to a HTML element, as well as retrieve its existing CSS style. In CSS, the opacity property is applied in various ways, depending on the browser. Set and getStyle() normalize this as the "opacity" property. Note: CSS opacity is not yet supported by Opera.


YAHOO.util.Dom.setStyle('test', 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');

In this example, the setStyle method sets the HTML element test to have the CSS property opacity with a value of 0.5. The getStyle method returns the current opacity value of the HTML element test2.


CSS "Opacity"値の取得とセット

getStyle() とsetStyle()メソッドを使うと、CSSの定義をしてHTML要素に適用することができます。すでに定義済みのCSSから値を取得こともできます。CSSでは透明度を適用できますが、ブラウザによって使用法がまちまちです。setStyle()とgetStyle()を使えばopacityプロパティをブラウザの違いを気にせず適用できます。(*Operaは"半透明機能"をサポートしてません)



YAHOO.util.Dom.setStyle('test', 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');


setStyle()メソッドを使ってtest要素に 'opacity = 0.5' をセットしています。 getStyle()メソッドはtest2要素の透明度'opacity'の値を返しています。

*opacity の値は [透明] 0〜1 [不透明] で設定する
Operaで透明エフェクトを実現するには透過pngをつかったりと面倒。lightbox.jsなどを参考にしてください



setStyle('elemname' , 'css-prop' , value )
getStyle('elemname' , 'css-prop')

Getting the Viewport Size

The viewport is defined as the current, visible width and height of the document, irrespective of the absolute document dimensions. Getting the current viewport size can be a bit of a challenge depending on browser and rendering mode. The getClientWidth and getClientHeight methods ensure accurate viewport measurements.


var viewport = [
YAHOO.util.Dom.getClientWidth(),
YAHOO.util.Dom.getClientHeight()
];

This example creates an array and populates the first element with the value returned by getClientWidth; and, the second element is populated with the value returned by getClientHeight.

表示域のサイズを取得する


表示域?はドキュメントの可視的なwidth と heightによって値が定義されます。ドキュメントの絶対寸法と関係がありません。ブラウザとレンダリングモード?によって表示域のサイズを取得しようとすると、困難な作業になります。getClientWidth() ,getClientHeight() メソッドを使えば表示域の正確に測ることが出来ます。



var viewport = [
YAHOO.util.Dom.getClientWidth(),
YAHOO.util.Dom.getClientHeight()
];


このサンプルでは、配列を作り出してgetClientWidth()の戻り値によって1つめのエレメントを作っています。2つめのエレメントはgetClientHeight()の戻り値によって作られています。

*populate の訳がイマイチ・・・・

Comparing Regions

One common task in DHTML, especially in the context of drag and drop, is to determine whether or not a specific region contains another region or point. Use the getRegion and contains methods to accomplish this:


var targetRegion = YAHOO.util.Dom.getRegion('test');
var cursorPoint = new YAHOO.util.Point(YAHOO.util.Event.getPageX(e),
YAHOO.util.Event.getPageY(e))
;
var inRegion = targetRegion.contains(cursorPoint);

These lines of code:

  • Get a region based on the HTML element "test" and assign it to the variable targetRegion.
  • Create a new Point object based on X and Y cursor coordinates returned from the getPageX and getPageY methods.
  • Invokes the contains method on the region with the point object as the argument. The contains method returns a boolean value based on whether or not targetRegion contains cursorPoint.


領域の比較


DHTMLでおなじみの作業といえば、ある特定の領域が他の領域やポイント(点?)を含んでいるかどうかを判断付けることですね。特にドラッグ&ドロップを使う際。こういう作業をするときはgetRegion(),contains()メソッドを使いましょう。



var targetRegion = YAHOO.util.Dom.getRegion('test');
var cursorPoint = new YAHOO.util.Point(YAHOO.util.Event.getPageX(e),
YAHOO.util.Event.getPageY(e))
;
var inRegion = targetRegion.contains(cursorPoint);


コードを見ていきます。


・'test'要素のの領域を取得して、targetRegion変数に代入します。
・getPageX() , getPageY()メソッドの戻り値のXY座標を元に、Pointオブジェクトをつくりだします
・ポイントオブジェクトを引数にして、対象とする領域上でcontains()メソッドを呼び出します。contains()メソッドは、targetRegionオブジェクトがcursorPointオブジェクトを含んでいるかどうか のブーリアン変数を返します。