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

■ 半透明レイヤー:kl_tlayer_new()

動的にレイヤーを作成:kl_layer_new() の例では opacityによる不透明度指定により レイヤーを半透明にしています。 しかしレイヤー全体が透けるため くっきり表示させたい文字列などまでボンヤリしてしまいます。

そこで 2つのレイヤー「fg,bg」を重ね fg側で文字列等前景を表示、 bgに背景色をつけて半透明にします。

参考: 透明の指定はスタイルシートを使うかJavaScriptを用い WinIE4+では「e.style.filter="alpha(opacity=60)"」 Netscape6+,Mozillaでは「e.style.MozOpacity=0.6」などとします。

【半透明レイヤーの実装<keynavi_tools.js】

-----------------------------------------------------------------------------
■ kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)
・返り値:オブジェクト「e」(e.fg=前景レイヤー,e.bg=背景レイヤー)
・html:レイヤーに表示するHTML文字列
・fgcolor:前景色 (略可)
・bgcolor:背景色 (略可、デフォルトorange)
・opacity:不透明度(0〜100)  (略可、デフォルト60)
・opts=new Array(変数名1,値1,変数名2,値2,...);
     キーワード引数格納用配列、上のように変数名と値を並べて指定
      ○変数名として下記
        pos(center) /zindex(100) /padding(20) /
        visibility(hidden) /border(outset 1px) /
        drag / raise (レイヤーをドラッグ、手前移動可能にするか否か) /
        fg/bg (前後レイヤーの引き数配列:{lref2=lnew}の引き数と同義、最優先)
■kl_tlayer_show(e)
■kl_tlayer_hide(e)
■kl_tlayer_setpos(e,pos)
-----------------------------------------------------------------------------
function kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts){
        if(kl_undef(opts)) opts=new Array();
        var t,fg,bg;
        fg=new Array(); t=kl_vget(opts,"fg"); if(kl_isarray(t)) kl_copy(t,fg);
        bg=new Array(); t=kl_vget(opts,"bg"); if(kl_isarray(t)) kl_copy(t,bg);
        。。。。。。。
        。。。略。。。
        。。。。。。。
        e.fg=kl_layer_new(fg);
        e.bg=kl_layer_new(bg);
        。。。。。。。
        return e;
}
function kl_tlayer_show(e){
        var f=kl_layer_show(e.fg); var g=kl_layer_show(e.bg);
        return (f && g);
}
function kl_tlayer_hide(e){
        var f=kl_layer_show(e.fg); var g=kl_layer_show(e.bg);
        return (f && g);
}
function kl_tlayer_setpos(e,pos,check){
        var f=kl_layer_setpos(e.fg,pos,check,0,0,e.padx,e.pady);
        var g=kl_layer_setpos(e.bg,pos,check);
        return (f || g);
}

【半透明レイヤーの利用サンプル】

<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(
                "border",   "inset 2px", //背景の枠指定になります
                "padding",   100,        //縦方向のpadding値
                "zindex",      5,        //背景のzIndex,前景はzIndex+1に
                "visibility","visible"   //デフォルトでは不可視なので変更
                );
        kl_tlayer_new("こんにちは!","white","blue",70);
}
//-->
</script>

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

上の例を実行してみましょう。

上の例では色々オプションを指定しましたが 個々の関数は以下のように簡単に利用できます。

デフォルトではレイヤーの作成(new)時は「visibility=hidden」になっています。 以下で表示・非表示を切り替えます。
setpos()関数で表示エリア内の各位置に表示します。

上記関数以外に細かい制御が必要な場合は 「e.fg/e.bg」オブジェクトに直接アクセスして 操作してください。

このように中身が溢れるかもしれません。 そうしたら以下を実行して再設定します。




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

  - レイヤーをウィンドウ内の中心位置に固定
  - 動的にレイヤーを作成:kl_layer_new()
  - 動的にレイヤーの中身を書き替え&URLロード:kl_layer_write/load()
  - 半透明レイヤー:kl_tlayer_new()
  - レイヤーのドラッグ設定・解除:kl_drag_set()
  - レイヤークリックで手前に移動:kl_raise_set()

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] 半透明レイヤー ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─