glayer.js - グレーアウト表示ライブラリ

Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです。(gray＋layerで、glayer.js)

下記のような機能を持っています。

背景全体を覆うレイヤの表示/非表示が簡単に出来ます。(レイヤを透過表示することにより、グレーアウトを実現)
レイヤ自体は、透過PNGを使う方法と、opacityを使う方法の二種類をglayer.cssにスタイルとして定義しています。
フェードイン、フェードアウトしながらのレイヤ表示/非表示も行えます。(この場合は、opacityによるレイヤを透過表示)

なお、Ver 2.0 にて、prototype.js、script.aculo.usを使用せずに、glayer.jsのみでフェードイン、フェードアウトによるグレーアウト表示が出来るようになりました。

glayer.jsを拡張して、+αを提供するためのglayer_ex.jsというライブラリを提供していますので、下記もあわせてご参照ください。

glayer_ex.js - glayer.jsの拡張

ソース

Ver 2.6 : 2008/09/10

サンプル

本ページ自体がサンプルです。

また、下記ページにglayer.jsに＋αを追加したサンプルがあります。

glayer_ex.js - glayer.jsの拡張

使用方法

本サイトで提供しているglayer.js、glayer.cssを読み込みます。
```
<script type="text/javascript" src="./glayer.js"></script>
<link rel="stylesheet" href="./glayer.css" type="text/css" />
```
なお、glayer.cssの内容は、表示内容に応じてカスタマイズ可能です。(透過PNG or opacity、色合い変えたりなど)
また、他のCSSにまとめてしまっても問題ありません。
(glayer.pngは透過PNGを使ったグレーアウトを行う場合のみ必要です。その際は、glayer.cssで指定しているパスとあわせるように配置してください。)
レイヤ表示/非表示は、下記のように記述します。
```
// レイヤ表示
Glayer.show();
// レイヤ非表示
Glayer.hide();

// レイヤ表示(フェードイン)
Glayer.fadeIn();
// レイヤ非表示(フェードアウト)
Glayer.fadeOut();
```
Glayer.show、hideの引数は、下記の通りです。
- 第1引数：レイヤとなるエレメントもしくはそのID ※任意
  - 指定したIDに対するエレメントが存在しない場合、新たなエレメントとして追加します。
  - 指定が無かった場合には、'glayer'が指定されたものとして動作します。
Glayer.fadeIn、fadeOutの引数は、下記の通りです。
- 第1引数：レイヤとなるエレメントもしくはそのID ※任意
  - 指定したIDに対するエレメントが存在しない場合、新たなエレメントとして追加します。
  - 指定が無かった場合には、'glayer'が指定されたものとして動作します。
- 第2引数：フェードに対するオプション ※任意
  - プロパティリスト形式で指定します。例：{duration: 1000, callback: function(){}}
    指定できるプロパティは下記になります
    - duration：描画時間(ミリ秒) デフォルトは800ms
    - callback：描画終了時に呼び出す関数
    - to：描画を開始するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
    - from：描画を終了するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
Glayer.fadeInにて、レイヤがデフォルトの'glayer'で、フェードのオプション無しの場合には、下記のように書きます。
```
Glayer.fadeIn();
```
レイヤのIDがデフォルト以外の場合には、第1引数として指定します。
```
Glayer.fadeIn('hoge');
```
レイヤのIDが'hoge'で、フェードを5000msで描画し、描画完了後に"フェードイン完了"とalert表示する場合、下記のように書きます。
```
Glayer.fadeIn('hoge', {duration: 5000, callback: function(){alert('フェードイン完了');});
```
上記例に対して、レイヤのIDがデフォルト('glayer')の場合には、nullを指定することによりデフォルトのIDが使用されます。
```
Glayer.fadeIn(null, {duration: 5000, callback: function(){alert('フェードイン完了');});
```
各メソッドは対象のエレメントをリターンするので、クリックによりフェードアウトするようなレイヤを作成する場合には、下記のように書けます。
```
Glayer.fadeIn().onclick = function(){Glayer.fadeOut();};
```

レイヤと同時に他のエレメントを操作する場合

レイヤだけではなく、他のエレメントも同時に表示/非表示を切り替えるために、下記の関数があります。

// レイヤ表示
Glayer.showParallel(['message']);
// レイヤ非表示
Glayer.hideParallel(['message', 'message2']);

// レイヤ表示(フェードイン)
Glayer.fadeInParallel(['other']);
// レイヤ非表示(フェードアウト)
Glayer.fadeOutParallel(['other']);

これら関数は、引数としてレイヤ以外のエレメントを配列として受け取り、レイヤ表示/非表示と同時に指定されたエレメントの表示/非表示を切り替えます。

各関数の引数は下記の通りです。(単に第1引数として、同時に表示を切り替えるエレメントの配列が追加されただけになります)

Glayer.showParallel、hidehideParallelの引数は、下記の通りです。

第1引数：レイヤと同時に表示/非表示を行うエレメントもしくはそのIDの配列
第2引数：レイヤとなるエレメントもしくはそのID ※任意
- Glayer.show、hideの第1引数と同じです。

Glayer.fadeInParallel、fadeOutParallelの引数は、下記の通りです。

第1引数：レイヤと同時に表示/非表示を行うエレメントもしくはそのIDの配列
第2引数：レイヤとなるエレメントもしくはそのID ※任意
- Glayer.fadeIn、fadeOutの第1引数と同じです。
第3引数：フェードに対するオプション ※任意
- Glayer.fadeIn、fadeOutの第2引数と同じです。

レイヤ(デフォルトIDの'glayer')をフェードアウトするのと同時に、IDが'message'、'alert'のエレメントをフェードアウトさせる場合には下記のように書きます。

Glayer.fadeOutParallel(['message', 'alert']);

IE6におけるselect、object、embedタグにz-indexが適応されない問題の回避

IE6では、z-indexがselectタグに適応されないため、これらのエレメントがレイヤの上にそのまま表示されてしまいます。(IE7では修正されている問題)

glayer.jsでは、レイヤの上に表示されるのを回避するため、レイヤを表示中はこれらのエレメントを消す(styleを"visibility:hidden")ようにしています。(Ver 2.3から)

IE6以前であることを判定した上で、セレクトボックスを非表示にしていますが、セレクトボックスの非表示を一律有効/無効に設定したい場合には、下記のプロパティにtrue(非表示にする)/false(表示したまま)を設定してください。

Glayer._hideOverElements = false;

ライセンス

MITライセンスとします。

商用・非商用に関わらず無償で利用することができます。著作権表記とライセンス表記さえ行えば、再配布、再利用に制約はありません。

原文はこちら：MIT-LICENSE.txt

その他

IE6、IE7、Firefox2.0、Opera9、Safari2.0.4にて動作確認が出来ております。

お問い合わせ、コメント等は下記Blogまたは、Contact からお願いします。

glayer.js の Ver 2.6 をリリースしました。

glayer.js グレーアウト表示ライブラリ

ソース

サンプル

使用方法

レイヤと同時に他のエレメントを操作する場合

IE6におけるselect、object、embedタグにz-indexが適応されない問題の回避

ライセンス

その他

glayer.js
グレーアウト表示ライブラリ