技 巧 鍵 盤 ─ KeyNavi：キーボードを活用してホームページを快適に─    
■ キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ [1] 動的にレイヤーを作成 ・サイトマップ [Shift-S]

■ 動的にレイヤーを作成：kl_layer_new()

動的にレイヤーを作成します。 予めHTML内にレイヤーの記述をしておかなくても JavaScriptで任意個数のレイヤーを作成できます。

単なる表示以外にも色々な用途があります。 外部スクリプトを動的に読み込む ではこの関数をJavaScriptの動的な読み込みに使っています。 また「visibility=hidden」(非表示＝デフォルト)のままにしておけば ページのキャッシュにも使えます。

【レイヤーを動的に作成「kl_layer_new()」＜keynavi_tools.js】

-----------------------------------------------------------------------------
kl_layer_new(arg)
    arg=new Array(変数名１,値１,変数名２,値２,...);
    (キーワード引数格納用配列、上のように変数名と値を並べて指定)
■以下、指定可能な変数 (html,url以外は略可)
・html：レイヤーに表示するHTML文字列
・url：レイヤーに表示するページのURL (HTMLと両方指定の場合はURL優先)
・parent：作成するレイヤーの親オブジェクト (デフォルトはdocument.body)
・pos：位置をキーワードで指定：指定法はkl_layer_setpos(id,pos)を参考。
・x/y/width/height/zindex：位置、サイズ、奥行きを数値で
・opacity：不透明度 (0〜100で指定、WinIE4+,NS6+,Mozillaで反映)
・fgcolor/bgcolor/bgimage：前景色、背景色、背景画像のパス
・visibility：可視性(visibility値) (デフォルトはhidden)
・iframe：iframeタグ内に指定したいオプションを「arg」と同じく配列で
・drag：レイヤーをドラッグ可能にする場合は真に (デフォルトは指定無し)
・raise：レイヤーをマウスクリックで手前に移動するには真に (デフォルトは指定無し)
・その他任意名：スタイルシートで「属性名：値」として指定されます
-----------------------------------------------------------------------------
function kl_layer_new(arg){
        var e=0;

        //以下は配列 arg=("url","http://foo/",...)から"http://foo/..."を取得
        var url =kl_vget(arg,"url",kl_isstr,0);
        var html=kl_vget(arg,"html",kl_isstr,0);
        var par =kl_vget(arg,"parent",kl_isstr,0);

        //各ブラウザ毎に適切な関数を実行
        if(KL_NS4) e=kl_layer_new_ns4(arg,url,html,par);
        else if(KL_IE55 || KL_NS6 || KL_OP6) e=kl_layer_new_ie55(arg,url,html,par);
        else if(document.all) e=kl_layer_new_ie4(arg,url,html,par);

        if(e){
                //x,y値による位置指定が無ければ画面中央に表示します
                if(kl_undef(kl_vget(arg,"x")) && kl_undef(kl_vget(arg,"y")))
                        kl_layer_setpos(e,kl_vget(arg,"pos",0,"center"));
                return e;
        }
        return 0;
}

上記関数は内部でブラウザ毎にSub関数を読んでいます。

【レイヤーを動的に作成「kl_layer_new_ie55()」＜keynavi_tools.js】

//IE5.5+,Netscape6+,Opera7では下記のコードを使えます
function kl_layer_new_ie55(arg,url,html,par){
        var e=document.createElement(url ? "iframe" : "div");
        if(KL_OP6 && !KL_OP7) return 0;
        e.setAttribute("id",kl_layer_new_id());
        e.style.position  ="absolute";
        e.style.visibility="hidden";

        if(url) kl_layer_new_modify_iframe(e,arg);

        var e0=(par ? par : document.body);
        e0.appendChild(e);

        kl_layer_new_modify(e,arg);
        if(url){
                e.setAttribute("src",url);
        }else{
                e.innerHTML=html;
        }
        return e;
}

【レイヤーを動的に作成「kl_layer_new_ie4()」＜keynavi_tools.js】

//IE全般では下記のコードを使えます
function kl_layer_new_ie4(arg,url,html,par){
        var id=kl_layer_new_id();
        var o ="style='position:absolute; visibility:hidden;'";
        var s;
        if(url){
                o+=kl_layer_new_modify_iframe(id,arg,"ie4");
                s="<iframe id='"+id+"' "+o+" src='"+url +"'></iframe>";
        }else{
                o+="border='0' cellpadding='0' cellspacing='0'";
                s="<table id='"+id+"' "+o+"><tr><td>"+html+"</td></tr></table>";
        }
        var e0=(par ? par : document.body);
        if(e0.insertAdjacentHTML){
                e0.insertAdjacentHTML("BeforeEnd",s);
                var e=document.all(id);
                kl_layer_new_modify(e,arg);
                return e;
        }
        return 0;
}

【レイヤーを動的に作成「kl_layer_new_ns4()」＜keynavi_tools.js】

//Netscape4.x向けの関数です
function kl_layer_new_ns4(arg,url,html,par){
        var w=kl_vget(arg,"width",kl_isint,200);
        var h=kl_vget(arg,"height",kl_isint);

        //NS4ではレイヤー作成時に横幅を指定する必要があります
        var e=(par ? new Layer(w,par) : new Layer(w));

        //レイヤーの各種オプションを設定します
        var t;
        t=kl_vget(arg,"x"); if(kl_isint(t)) e.left=t;
        t=kl_vget(arg,"y"); if(kl_isint(t)) e.top =t;
        t=kl_vget(arg,"zindex");  if(kl_isint(t)) e.zIndex =t;
        t=kl_vget(arg,"fgcolor"); if(kl_isstr(t)) e.fgColor=t;
        t=kl_vget(arg,"bgcolor"); if(kl_isstr(t)) e.bgColor=t;
        t=kl_vget(arg,"bgimage"); if(kl_isstr(t)) e.background.src=t;
        e.visibility=kl_vget(arg,"visibility",kl_isstr,"hidden");
        if(kl_isint(h)) e.resizeTo(w,h);

        //レイヤーの中身を書き出します
        if(url) e.load(url,w); else{
                e.document.open(); e.document.write(html); e.document.close();
        }
        return e;
}

上記関数により指定したHTML文字列、ページを表示するレイヤーを作成できます。

引数：arg

レイヤーに指定できるオプションは中身(html,url)や以外にも 位置・大きさ・背景・枠属性・余白などなど多岐にのぼります。 そのため普通に引数リストを並べた「f(a,b,c,d,e)」という書き方は 呼出側で引数の対応が分かりにくくなります。 そこで配列「arg」を用い属性名と値をセットで並べて指定します。 こうすると任意個の引き数を任意順で指定できます。
arg = new Array("html","レイヤーの中身","pos","center","border","outset 1px",...)

iframe用オプション："iframe"

Netscape4.x以外ではURL指定時に「iframe」を使っています。 このオプションに指定したい内容を列挙して下さい。 iframeのオプションには 「name/ frameborder / scrolling / marginwidth / marginheight」 があります。 指定の方法は前項と同じです。
arg = new Array("url","表示するURL",..,"iframe",new Array("name","MyWin",...));

注意点：ID値

Netscape4.xでレイヤーを作成する時は「new Layer()」を使います。 このとき IDを指定できません。 ブラウザ起動後、順番に「_js_layer_番号」などと自動でIDが割当てられます。

【レイヤーのIDを「_ja_layer_番号」形式で作成＜keynavi_tools.js】

KL_LAYER_NEW_CNT=0;
function kl_layer_new_id(){
        return "_js_layer_"+(KL_LAYER_NEW_CNT++);
}

これに習って ID指定がない場合、IEやNetscape6+,Operaでは Netscape4.xにあわせたIDを割当てています。 ブラウザ互換性を重視する場合は レイヤーを処理するのに ID値ではなくレイヤーオブジェクト自体を操作するようにします。

KeyNaviの各種レイヤー向け関数はID値入力に加えてレイヤーObjectをそのまま 渡すことができます。

さて 上記の関数を使ってみましょう。

【レイヤーの動的な作成サンプルHTML】

<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_tools.js"></script>
<script language="javascript"><!--

function sayHello(){
        var arg=new Array(
                "html",      "Hello world!",
                "bgcolor",   "cyan",
                "border",    "outset 1px",
                "padding",   "50px",
                "opacity",    60,
                "zindex",     5,
                "visibility","visible",
                "drag",       true,
                "raise",      true
                );
        var e=kl_layer_new(arg)
}
//-->
</script>

<a href="javascript:void(0)" onclick="sayHello();">Please Click Me!</a>

Netscape4.xではテキストエリアと重なる部分はレイヤーが表示されないので注意 して下さい。 一部が隠れてしまったら 表示している部分をドラッグしてみて下さい。

NS4では通常のHTML内にレイヤーを記述した場合でもフォームと重なる部分が 表示されません。zIndexを上げてもダメです。

作成されるレイヤーはデフォルトで画面中央になります。 NS4では真ん中にtextareaがこないようにスクロールしてから 実行ボタンを押しましょう。

またpadding、border指定は動作しません。そのためボックスは中身の文字に合わせて 小さくなります。

NS4でpaddingをつけたい場合は中身のHTMLでpaddingをつけたHTMLを書きます。

<div style="padding:50px; border:none;">...</div>
また半透明レイヤー：kl_tlayer_new() では２つのレイヤーを重ねてNS4でもpaddingがつくようにしています。 一般的にはこちらの利用をお勧めします。

不透明度を表すopacity指定で半透明にできますが 背景だけではなく文字も半透明に なるので読みにくくなります。 半透明レイヤー：kl_tlayer_new() では２つのレイヤーを重ねて綺麗に表示させています。

「drag」「raise」オプションが設定されているので 生成したレイヤーをドラッグできます。 上記実行ボタンを何度か押して 複数のレイヤーを作り 各レイヤークリックしたりドラッグしてみて下さい。

さて、このレイヤーの表示内容を変更してみます。「kl_layer_write()」を使います。

Netscape4.xでは動的な書き込みが不安定なため 3つ目の引数が真の場合にのみ実行するようにしています。
有効にしたい場合は 実際にNetscapeで動作を確認するのをお勧めします。

次はURLを指定して他のページを表示させて見ます。

KeyNaviのトップページが表示されます 次はこのURLを変更します。「kl_layer_load()」を使います。

今度はホームが表示されます。 ここでも Netscape4.xでは動的な書き込みが不安定なため 3つ目の引数が真の場合にのみ実行します。

これらは通常のレイヤーであるため 移動や可視性の変更など自由に出来ます。

表示エリア内の各位置に移動してみましょう。
次はページ全体の右上に表示します。
今度は左下。



【JavaScript@Keynavi.Net ： レイヤー編：応用 】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。

  - レイヤーをウィンドウ内の中心位置に固定
  - 動的にレイヤーを作成：kl_layer_new()
  - 動的にレイヤーの中身を書き替え＆URLロード：kl_layer_write/load()
  - 半透明レイヤー：kl_tlayer_new()
  - レイヤーのドラッグ設定・解除：kl_drag_set()
  - レイヤークリックで手前に移動：kl_raise_set()
トップへ戻る [1] Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印]  
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ [1] 動的にレイヤーを作成 ・サイトマップ [Shift-S]
■ キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─