 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] 半透明レイヤー
|
・サイトマップ [Shift-S] |
 |
■ 半透明レイヤー：kl_tlayer_new()
動的にレイヤーを作成：kl_layer_new()
の例では opacityによる不透明度指定により
レイヤーを半透明にしています。
しかしレイヤー全体が透けるため
くっきり表示させたい文字列などまでボンヤリしてしまいます。
-----------------------------------------------------------------------------
■ 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(変数名１,値１,変数名２,値２,...);
キーワード引数格納用配列、上のように変数名と値を並べて指定
○変数名として下記
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>
そこで ２つのレイヤー「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(変数名１,値１,変数名２,値２,...);
キーワード引数格納用配列、上のように変数名と値を並べて指定
○変数名として下記
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-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] 半透明レイヤー
|
・サイトマップ [Shift-S] |