 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤークリックで手前に移動
|
・サイトマップ [Shift-S] |
 |
■ レイヤークリックで手前に移動：kl_raise_set()
レイヤがクリックされたら
登録レイヤー中でもっとも手前に表示されるよう
奥行き座標 zIndexを増やします。
-----------------------------------------------------------------------------
■ kl_raise_set(id)：レイヤーにRaiseハンドラを設定
・返り値：成功時は「１」失敗時は「０」
・ id：対象となるレイヤー(オブジェクトかそのID)
■ kl_raise_clear(id)：レイヤーのRaiseハンドラを解除
・返り値：成功時は「１」失敗時は「０」
・ id：対象となるレイヤー(オブジェクトかそのID)
-----------------------------------------------------------------------------
KL_RLAYS=new Array();
function kl_raise_set(id){
var e=kl_getelem(id); if(!e) return 0;
//レイヤーをRaise対象に登録
KL_RLAYS[KL_RLAYS.length]=e;
kl_addhandler(e,"onmousedown",kl_raise_mdown,new Array(e));
//NS4はレイヤー内画像にもハンドラ指定
if(KL_NS4 && e.document)
kl_addhandler_ns4objs(e.document.images,"onmousedown",kl_raise_mdown,new Array(e));
return 1;
}
function kl_raise_clear(id){
var e=kl_getelem(id); if(!e) return 0;
//レイヤーをRaise対象から外す
for(var i=0;i<KL_RLAYS.length;i++) if(KL_RLAYS[i]==e) KL_RLAYS[i]=0;
if(KL_NS4 && e.document)
kl_delhandler_ns4objs(e.document.images,"onmousedown",kl_raise_mdown,new Array(e));
return kl_delhandler(e,"onmousedown",kl_raise_mdown,new Array(e));
}
//mousedown時に実行されるハンドラ関数
function kl_raise_mdown(ev,e){ 。。。略。。。}
<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>
<a href="javascript:void(0);" onclick="kl_raise_set('lay1'); return false;">Raise OK</a>
<div style="position:absolute; border:1px outset; background:#0000FF; padding:20px; z-index:5; color:white;" id="lay1">
レイヤー「lay1」です。
</div>
複数のレイヤーをロックして一緒に扱いたいがあるでしょう。 「e.kl_rlays=配列」に共通に扱いたいレイヤーかそのIDを指定します。
【マウスクリックでレイヤーを手前移動＜keynavi_tools.js】
-----------------------------------------------------------------------------
■ kl_raise_set(id)：レイヤーにRaiseハンドラを設定
・返り値：成功時は「１」失敗時は「０」
・ id：対象となるレイヤー(オブジェクトかそのID)
■ kl_raise_clear(id)：レイヤーのRaiseハンドラを解除
・返り値：成功時は「１」失敗時は「０」
・ id：対象となるレイヤー(オブジェクトかそのID)
-----------------------------------------------------------------------------
KL_RLAYS=new Array();
function kl_raise_set(id){
var e=kl_getelem(id); if(!e) return 0;
//レイヤーをRaise対象に登録
KL_RLAYS[KL_RLAYS.length]=e;
kl_addhandler(e,"onmousedown",kl_raise_mdown,new Array(e));
//NS4はレイヤー内画像にもハンドラ指定
if(KL_NS4 && e.document)
kl_addhandler_ns4objs(e.document.images,"onmousedown",kl_raise_mdown,new Array(e));
return 1;
}
function kl_raise_clear(id){
var e=kl_getelem(id); if(!e) return 0;
//レイヤーをRaise対象から外す
for(var i=0;i<KL_RLAYS.length;i++) if(KL_RLAYS[i]==e) KL_RLAYS[i]=0;
if(KL_NS4 && e.document)
kl_delhandler_ns4objs(e.document.images,"onmousedown",kl_raise_mdown,new Array(e));
return kl_delhandler(e,"onmousedown",kl_raise_mdown,new Array(e));
}
//mousedown時に実行されるハンドラ関数
function kl_raise_mdown(ev,e){ 。。。略。。。}
【レイヤー手前移動サンプル：Copy&Paste】
<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>
<a href="javascript:void(0);" onclick="kl_raise_set('lay1'); return false;">Raise OK</a>
<div style="position:absolute; border:1px outset; background:#0000FF; padding:20px; z-index:5; color:white;" id="lay1">
レイヤー「lay1」です。
</div>
上の関数を使ってみましょう。 下の実行ボタンをクリックした後 レイヤーをクリックしてみてください。
レイヤー「lay1」です。
レイヤー「lay2」です。
複数のレイヤーをロックして一緒に扱いたいがあるでしょう。 「e.kl_rlays=配列」に共通に扱いたいレイヤーかそのIDを指定します。
指定法はkl_dlaysと同じです。
動的に作成したレイヤーでは ドラッグ＆Raiseオプションがあり これを有効化すると 作成当初からドラッグしたり手前に移動できます。
半透明レイヤーでも同様です。 これは前景・背景 ２つのレイヤーから成りますが 何れをクリックした場合でもロックされているので両方一緒に手前に移動されます。
上のボタンを複数回押して レイヤーを重ねてクリックとドラッグを実行してみてください。|
【JavaScript@Keynavi.Net ：
レイヤー編：応用
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤークリックで手前に移動
|
・サイトマップ [Shift-S] |