/* 和訳 by dynamis LastUpdate: 2001/09/09 */ /* [訳注] 著作権等に僅かでも関係する部分の記述は全て原文のまま残してあります。 また、意訳なども比較的多くしました。ご了承下さい。 */ // 単独行コメント末尾の空白はWin9xのバグ対策です。取り除かないほうが無難です。 /* xbdhtml.js (Cross-Browser Nav4/Gecko/IE DHTML API) 14 May 98, Eric Krock, Copyright Netscape Communications Permission is granted to reuse, redistribute, and modify without charge. Updated 18 July 2000 by Vladimir Ermakov, Netscape Communications, and Marcell Ortutay, Plugged in Enterprises, to include support of the new Netscape Gecko layout engine. Updatated 15 of February 2001 by Vladimir Ermakov, Netscape Communications: New Features -showElt/hideElt -convenience functions to use insead of setEltVisibility -setEltWidth/setEltHeight -Set the width/height of a layer -getEltPageLeft/getEltPageTop -XBrowser version of Nav4 pageX/pageY -stringToNumber -Returns 0 instead of NaN Improved: -getEltWidth/getEltHeight -Return offsetWidth if width not specified. -Also, where possible, replaced detection by browser with detection by property DOM の違いを橋渡しして、いずれのブラウザ上でも利用できる一連の関数群を用意する ことにより、Navigator 4.x, IE 及び Gecko レイアウトエンジンを搭載した ユーザーエージェントで JavaScriptから位置指定される名前付要素の CSSP 機能と プロパティを操作可能にします。 Nav4+/IE4+/Gecko で JavaScript から次のことを可能にします。 - 名前を指定して要素のオブジェクトを取得する - 要素の表示非表示切り換え - 要素の X, Y, Z 位置の取得と設定 - 要素の高さと幅の取得 - 要素の切り抜き部分 (表示領域) の取得と設定 - 要素の背景色と背景画像の取得と設定 document.write() 分を介して HTML マークアップの動的な条件付生成を簡単に 行うための簡易 JavaScript クライアント判別と関数を含めています。 設計目標: - 将来の DOM 拡張に対する前方互換 - 再定義可能な小さな関数による API - 他のライブラリとの平和共存 - cbdhtml.js などと関数名の衝突を一切起こさない - 関数の明快さを保ち、引数は値の指定に使用する - 覚えやすく思い出しやすい関数の命名規則 - できる限り短いものに - Nav3 は (実行はできないのに!) */ // これは"究極の JavaScript クライアント判別"の簡易バージョンです。 // 参照:http://developer.nextscape.com/docs/examples/javascript/browser_type.html function Is () { // テストの簡易化のために全ての文字を小文字に統一します。 var agt=navigator.userAgent.toLowerCase() // --- ブラウザバージョン --- this.major = stringToNumber(navigator.appVersion) this.minor = parseFloat(navigator.appVersion) this.nav = ((agt.indexOf('mozilla')!=-1) && ((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1))) this.nav2 = (this.nav && (this.major == 2)) this.nav3 = (this.nav && (this.major == 3)) this.nav4 = (this.nav && (this.major == 4)) //Netscape 6 this.nav5 = (this.nav && (this.major == 5)) this.nav6 = (this.nav && (this.major == 5)) this.gecko = (this.nav && (this.major >= 5)) this.ie = (agt.indexOf("msie") != -1) this.ie3 = (this.ie && (this.major == 2)) this.ie4 = (this.ie && (this.major == 3)) this.ie5 = (this.ie && (this.major == 4)) this.opera = (agt.indexOf("opera") != -1) this.nav4up = this.nav && (this.major >= 4) this.ie4up = this.ie && (this.major >= 4) } var is = new Is(); // ブラウザのベンダー/バージョン/OS に依存するマークアップを動的/条件付で手軽に // 生成するための関数集です。 // document.write("文字列"); とタイプする手間を省きます。 // 第2引数(省略可) minVersion が渡されると、それ以降のバージョンで、 // 第3引数(省略可) maxVersion が渡されると、それ以前のバージョンでのみ実行します。 function dw(str, minVersion, maxVersion) { if ( ((dw.arguments.length < 3) || (is.major <= maxVersion)) && ((dw.arguments.length < 2) || (is.major >= minVersion))) document.write(str) } // document write boolean // if (条件) document.write("文字列"); とタイプする手間を省きます。 // 第2引数(省略可) aBoolean が真の時のみ document.write("文字列"); します。 function dwb (str, aBoolean) { if ((dwb.arguments.length < 2) || aBoolean) document.write(str) } // string version // バージョンによって str か "" を返します。 // 第2引数(省略可) minVersion が渡されると、それ以降のバージョンで、 // 第3引数(省略可) maxVersion が渡されると、それ以前のバージョンで str を返します。 function sv(str, minVersion, maxVersion) { if ( ((sv.arguments.length < 3) || (is.major <= maxVersion)) && ((sv.arguments.length < 2) || (is.major >= minVersion))) return str; else return ""; } // string boolean // (条件)?"文字列":"" とタイプする手間を省きます。 // 第2引数(省略可) aBoolean が真の時のみ str を返します。 function sb (str, aBoolean) { if ((sb.arguments.length < 2) || aBoolean) return str; else return ""; } /* The following stub function API for cross-browser HTML element positioning and visibility (CSSP access) was derived from Mike Hall's excellent CBDHTML API. Thanks also to Danny Goodman (http://www.dannyg.com/) and Dan Steinman (http://members.xoom.com/dynduo/). 利用上の注意:要素の CSSP プロパティを取得する関数(getEltLeft, getEltTop 等) を利用する場合、IE4 の CSSP プロパティ初期設定の問題を覚えておいて下さい。 もし、JavaScript から初期設定するのではなく、 例: var fooElt = getElt("foo"); setEltLeft(fooElt, 100); CSSP マークアップでプロパティ値を初期設定した場合、 例: #foo { left: 100px; } その要素のスタイルオブジェクトのプロパティ値(例: document.foo.style.left)は 初期値に設定されていません。left, top, clip 等を始めとし、IE4 では多くの プロパティでこの現象が起きます。IE4 でこれらのプロパティを取得する前に、 最初に JavaScript からプロパティを設定しておかねばなりません。 対策:CSSP マークアップではなく JavaScript からプロパティを設定するか、両方で 同じ値を設定するかします。 */ /* genElt, writeElt, layerClipOrder の3つの関数について 利用されているブラウザに最適化したマークアップを動的に生成することが時には 開発を簡単にします。genElt は IE4 や Netspace6 では名前付 div を、Nav4 では layer/ilayer タグを文字列として生成します。 writeElt は同じ文字列を生成して書き出します。 これらの3つの関数は一括りで再利用する必要があります。writeElt は genElt を 呼び出し、その両方ともが layerClipOrder を呼び出します。 genElt と writeElt の引数について genElt と writeElt は全く同じ引数リストをとります。 第1引数 name は必須です。他の引数は全て false がデフォルトであり、明示的に false にするか、省略することができます。これらのプロパティは、引数が与えられ れば HTML マークアップ中にハードコーディングされ、false に設定または省略した 場合は設定されないままとなります。 例えば、以下の関数呼び出しは共に同じものとなります。どちらも、何もプロパティが 設定されていない、位置指定する名前付要素を生成し、Nav3/IE3 やそれ以前の環境で あっても要素を書き出します。 writeElt ("foo"); writeElt ("foo", false, false, false); name 文字列 要素の id 名 content 文字列 要素中に含まれるコンテンツ left 整数値 ピクセル単位で要素の左端位置 top 整数値 ピクセル単位で要素の上端位置 z 整数値 要素の z-index width 整数値 ピクセル単位で要素の幅 height 整数値 ピクセル単位で要素の高さ visibility 文字列 "visible", "hidden", "inherit" のいずれか backgroundColor 文字列 要素の背景色 backgroundImage 文字列 要素の背景画像 clip 文字列 切り抜き部分を指定する、上右下左の順にコンマ区切りで 並べた(スペースを含まないこと!)四つの整数値 relative 真偽値 真であれば相対位置指定、そうでなければ絶対位置指定 Nav4 では layer/ilayer(真/偽) いずれを生成するか hideEltOnOlderBrowsers 真偽値 真であれば Nav3/IE3 以前では "" を返す useDivInsteadOfLayer 真偽値 真であれば、Nav4 でも I/LAYER でなく div 生成 classname 文字列 要素の class 属性値 'genElt' は 'generate element markup' の省略です */ // CSS 仕様の順である、上右下左から layer の順である 左上右下 に並び替える function layerClipOrder (cssClipString) { var commaPos = cssClipString.lastIndexOf(","); return (cssClipString.substring(commaPos+1) + "," + cssClipString.substring(0,commaPos)); } function genElt (name, content, left, top, z, width, height, visibility, backgroundColor, backgroundImage, clip, relative, hideEltOnOlderBrowsers, useDivInsteadOfLayer, classname) { var markup = ""; if (is.gecko) { markup = '