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

■ レイヤーを上下左右/中央寄せ:kl_layer_setpos(is,pos)

レイヤーを移動:kl_layer_moveto,by(id,x,y) により レイヤーを特定位置、指定量分だけ移動することが出来ますが 実用的には 単に「真ん中」「右上」に表示したいという場合もあります。

そのような時は以下の関数を使うとラクです。

【レイヤーを特定位置に配置「kl_layer_setpos()」<keynavi_tools.js】

//-----------------------------------------------------------------------------
//kl_layer_setpos(id,pos,check)
//返り値:移動時は1失敗時は0
//id:対象となるレイヤー(オブジェクト)かそのID
//pos:位置を次の形式で指定 "[left/center/right(:px)]_[top/center/bottom(:px)](_absolute)"
//check:実際に移動が必要な場合にのみ移動を実行し1を返す(略可)
//-----------------------------------------------------------------------------
function kl_layer_setpos(id,pos,check){
        if(pos=="center") return kl_layer_setpos_raw(id,pos,pos,0,0,0,check);

        var posx,posy; var dx=0; var dy=0; var is_abs=0;
        var v,t;
        v=pos.split("_");
        t=v[0].split(":"); posx=t[0]; if(t.length>=2) dx=parseInt(t[1])
        t=v[1].split(":"); posy=t[0]; if(t.length>=2) dy=parseInt(t[1])
        if(v.length>=3) if(v[2]=="absolute") is_abs=1;
        return kl_layer_setpos_raw(id,posx,posy,is_abs,dx,dy,check);
}
function kl_layer_centralize(id,check){
        return kl_layer_setpos_raw(id,"center","center",0,0,0,check);
}

まず下の実行ボタンを押してレイヤー「lay1」を表示させて下さい。

現在の表示エリアの真ん中に表示してみます。
これは以下の引数で呼び出すのと等価です。
単に中央に表示するには「kl_layer_centralize(id)」を使っても構いません。

次は左上です。

今度は左上且つ(20px,10px)だけずらしてみます。 「:」で区切ってオフセットを指定できます。
右上についても同様です。

ページ全体の左上隅に表示します。

実行ボタンを押した後 実際にレイヤーが指定位置に移動したかどうか 前方に戻って確認してみてください。

今度は右下隅です。下方にスクロールして動作を確認してください。




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

  - レイヤーの表示・非表示切替え:kl_layer_show/hide(id)
  - レイヤーを移動:kl_layer_moveto,by(id,x,y)
  - レイヤーを上下左右/中央寄せ:kl_layer_setpos(is,pos)
  - レイヤーの背景色を指定:kl_layer_setbgcolor(id,...)
  - レイヤーの背景画像を指定:kl_layer_setbgimage(id,...)
  - 前景色(文字色)変更:kl_layer_setfgcolor(id,...)
  - レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
  - ウィンドウリサイズ時のNS4レイヤーバグ回避
  - レイヤーメニューとJavaScriptモジュール化

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] レイヤーを上下左右/中央寄せ ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─