glayer_ex.js - glayer.jsの拡張

glayer.jsを拡張して、+αを提供するためのglayer_ex.jsを公開するためのページです。

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

glayer.jsだけでは、グレーアウトしか出来ないので、実際に組み込む際には＋αが必要になる場合が多く、その＋αを1つのライブラリとして汎用的なものにまとめました。

このライブラリを使わないにしても、glayer.jsを使用例として役に立つのではと思います。

なお、こういった機能があるとうれしい！とか、ここ動かないよ！とかいったコメントがありましたら、下記Blogでコメントいただけたら幸いです。

Enjoy*Study - glayer.jsを拡張したサンプルを公開しました

ソース

Ver 1.1 : 2008/04/02

使用方法

glayer.jsで提供しているファイルに上記2つのファイルを追加して使います。

<script type="text/javascript" src="./glayer.js"></script>
<script type="text/javascript" src="./glayer_ex.js"></script>
<link rel="stylesheet" href="./glayer.css" type="text/css" />
<link rel="stylesheet" href="./glayer_ex.css" type="text/css" />

以降は、各用途毎に説明します。

グレーアウトのみ(参考)

glayer.jsのみで提供しているグレーアウト単体です。

使用方法はglayer.jsのページに書いてある「使い方」をご参照ください。

サンプル

Glayer.show/hide

Glayer.fadeIn/fadeOut

グレーアウト＋ボックスでメッセージ表示

レイヤの上にボックスを置いてその中にテキストを表示します。

サンプル

Glayer.showMessage/hideMessage

Glayer.fadeInMessage/fadeOutMessage

説明

// フェードなし
Glayer.showMessage('Now Loading...'); // 表示
Glayer.hideMessage(); // 非表示

// フェードあり
Glayer.fadeInMessage('実行中です。いましばらくお待ちください。'); // 表示
Glayer.fadeOutMessage(); // 非表示

各関数の引数は下記の通りです。

Glayer.showMessage、Glayer.fadeInMessage
- 第1引数：メッセージ。表示したい文字列を指定します。
- 第2引数：ボックスのオプション。(※任意)
  - プロパティリスト形式で指定します。例：{topRatio: 0, width: '100px', box: 'box', text: 'text'}
    - topRatio：ボックスの縦座標での表示位置の割合。0を指定するとヘッダ位置に表示される。指定がない場合は、0.5となり、中心に表示されることになる。
    - leftRatio：ボックスの横座標での表示位置の割合。0を指定すると左側にマージン無しで表示される。指定がない場合は、0.5となり、中心に表示されることになる。
    - width：ボックスの幅。指定がない場合は、cssなどで指定したスタイルが有効となる。
    - height：ボックスの高さ。指定がない場合は、cssなどで指定したスタイルが有効となる。
    - box：ボックスを表示するエレメントもしくはそのID。指定がない場合は、idとして"glayer_message"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
    - text：ボックス内のテキストを表示するエレメントもしくはそのID。指定がない場合は、idとして"glayer_message_text"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
- 第3引数：レイヤとなるエレメントもしくはそのID。(※任意)
  - 指定したIDに対するエレメントが存在しない場合、新たなエレメントとして追加します。
  - 指定が無かった場合には、'glayer'が指定されたものとして動作します。
- 第4引数：フェードに対するオプション。Glayer.fadeInMessageで使用可能です。(※任意)
  - プロパティリスト形式で指定します。例：{duration: 1000, callback: function(){}}
    指定できるプロパティは下記になります
    - duration：描画時間(ミリ秒) デフォルトは800ms
    - callback：描画終了時に呼び出す関数
    - to：描画を開始するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
    - from：描画を終了するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
Glayer.hideMessage、Glayer.fadeOutMessage
- 第1引数：ボックスのエレメントもしくはそのID。(※任意)
  - 指定がなかった場合、idとして"glayer_message"が指定されたものとして動作します。
- 第2引数：レイヤとなるエレメントもしくはそのID。(※任意)
  - 指定が無かった場合には、idとして"glayer"が指定されたものとして動作します。
- 第3引数：フェードに対するオプション。Glayer.fadeOutMessageで使用可能です。(※任意)
  - プロパティリスト形式で指定します。例：{duration: 1000, callback: function(){}}
    指定できるプロパティは下記になります
    - duration：描画時間(ミリ秒) デフォルトは800ms
    - callback：描画終了時に呼び出す関数
    - to：描画を開始するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
    - from：描画を終了するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)

グレーアウト＋ボックスでアラート表示

レイヤの上にボックスを置いてその中にテキストを表示し、さらにボタンを置いてalertっぽくします。

サンプル

Glayer.showAlert/hideAlert

Glayer.fadeInAlert/fadeOutAlert

説明

// フェードなし
Glayer.showAlert('Danger!!'); // 表示
Glayer.hideAlert(); // 非表示

// フェードあり
Glayer.fadeInAlert('エラーが発生しました。', {callback: function(){Glayer.fadeOutAlert()}, okLabel: '戻る'}); // 表示
Glayer.fadeOutAlert(); // 非表示

各関数の引数は下記の通りです。

Glayer.showAlert、Glayer.fadeInAlert
- 第1引数：メッセージ。表示したい文字列を指定します。
- 第2引数：ボックスのオプション。(※任意)
  - プロパティリスト形式で指定します。例：{topRatio: 0, width: '100px', box: 'box', text: 'text'}
    - topRatio：ボックスの縦座標での表示位置の割合。0を指定するとヘッダ位置に表示される。指定がない場合は、0.5となり、中心に表示されることになる。
    - leftRatio：ボックスの横座標での表示位置の割合。0を指定すると左側にマージン無しで表示される。指定がない場合は、0.5となり、中心に表示されることになる。
    - width：ボックスの幅。指定がない場合は、cssなどで指定したスタイルが有効となる。
    - height：ボックスの高さ。指定がない場合は、cssなどで指定したスタイルが有効となる。
    - box：ボックスを表示するエレメントもしくはそのID。指定がない場合は、idとして"glayer_alert"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
    - text：ボックス内のテキストを表示するエレメントもしくはそのID。指定がない場合は、idとして"glayer_alert_text"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
    - ok：ボタンのエレメントもしくはそのID。指定がない場合は、idとして"glayer_alert_ok"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
    - okLabel：ボタンの表示名。指定がない場合は、"OK"と表示されます。
    - callback：ボタン押下時に実行する関数。指定がない場合は、function(){ Glayer.hideAlert(); } が実行されます。(アラート非表示処理)
- 第3引数：レイヤとなるエレメントもしくはそのID。(※任意)
  - 指定したIDに対するエレメントが存在しない場合、新たなエレメントとして追加します。
  - 指定が無かった場合には、'glayer'が指定されたものとして動作します。
- 第4引数：フェードに対するオプション。Glayer.fadeInAlertで使用可能です。(※任意)
  - プロパティリスト形式で指定します。例：{duration: 1000, callback: function(){}}
    指定できるプロパティは下記になります
    - duration：描画時間(ミリ秒) デフォルトは800ms
    - callback：描画終了時に呼び出す関数
    - to：描画を開始するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
    - from：描画を終了するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
Glayer.hideAlert、Glayer.fadeOutAlert
- 第1引数：ボックスのエレメントもしくはそのID。(※任意)
  - 指定がなかった場合、idとして"glayer_alert"が指定されたものとして動作します。
- 第2引数：レイヤとなるエレメントもしくはそのID。(※任意)
  - 指定が無かった場合には、idとして"glayer"が指定されたものとして動作します。
- 第3引数：フェードに対するオプション。Glayer.fadeOutAlertで使用可能です。(※任意)
  - プロパティリスト形式で指定します。例：{duration: 1000, callback: function(){}}
    指定できるプロパティは下記になります
    - duration：描画時間(ミリ秒) デフォルトは800ms
    - callback：描画終了時に呼び出す関数
    - to：描画を開始するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
    - from：描画を終了するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)

グレーアウト＋ボックスで確認表示

レイヤの上にボックスを置いてその中にテキストを表示し、さらにボタン(OK、キャンセル)を置いてconfirmっぽくします。

サンプル

Glayer.showConfirm/hideConfirm

Glayer.fadeInConfirm/fadeOutConfirm

説明

// フェードなし
Glayer.showConfirm('Really?', 
                   function(result){ alert('click ' + (result ? 'OK' : 'Cancel')); Glayer.hideConfirm();}); // 表示
Glayer.hideConfirm(); // 非表示

// フェードあり
Glayer.fadeInConfirm('実行しますか？', 
                     function(result){ if (result) alert('実行しました。'); Glayer.fadeOutConfirm();},
                     {okLabel: 'はい', cancelLabel: 'いいえ'}); // 表示
Glayer.fadeOutConfirm(); // 非表示

各関数の引数は下記の通りです。

Glayer.showConfirm、Glayer.fadeInConfirm
- 第1引数：メッセージ。表示したい文字列を指定します。
- 第2引数：ボタン押下時に実行される関数。関数の呼び出しには、引数としてボタン押下結果(OKボタンの場合true、Cancelの場合false)が渡されます。
- 第3引数：ボックスのオプション。(※任意)
  - プロパティリスト形式で指定します。例：{topRatio: 0, width: '100px', box: 'box', text: 'text'}
    - topRatio：ボックスの縦座標での表示位置の割合。0を指定するとヘッダ位置に表示される。指定がない場合は、0.5となり、中心に表示されることになる。
    - leftRatio：ボックスの横座標での表示位置の割合。0を指定すると左側にマージン無しで表示される。指定がない場合は、0.5となり、中心に表示されることになる。
    - width：ボックスの幅。指定がない場合は、cssなどで指定したスタイルが有効となる。
    - height：ボックスの高さ。指定がない場合は、cssなどで指定したスタイルが有効となる。
    - box：ボックスを表示するエレメントもしくはそのID。指定がない場合は、idとして"glayer_confirm"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
    - text：ボックス内のテキストを表示するエレメントもしくはそのID。指定がない場合は、idとして"glayer_confirm_text"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
    - ok：OKボタンのエレメントもしくはそのID。指定がない場合は、idとして"glayer_confirm_ok"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
    - okLabel：OKボタンの表示名。指定がない場合は、"OK"と表示されます。
    - cancel：CancelボタンのエレメントもしくはそのID。指定がない場合は、idとして"glayer_confirm_cancel"が指定されたものとして動作します。指定したidに対応するエレメントがない場合、そのidでエレメントが作成されます。
    - cancelLabel：Cancelボタンの表示名。指定がない場合は、"Cancel"と表示されます。
- 第4引数：レイヤとなるエレメントもしくはそのID。(※任意)
  - 指定したIDに対するエレメントが存在しない場合、新たなエレメントとして追加します。
  - 指定が無かった場合には、'glayer'が指定されたものとして動作します。
- 第5引数：フェードに対するオプション。Glayer.fadeInConfirmで使用可能です。(※任意)
  - プロパティリスト形式で指定します。例：{duration: 1000, callback: function(){}}
    指定できるプロパティは下記になります
    - duration：描画時間(ミリ秒) デフォルトは800ms
    - callback：描画終了時に呼び出す関数
    - to：描画を開始するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
    - from：描画を終了するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
Glayer.hideConfirm、Glayer.fadeOutConfirm
- 第1引数：ボックスのエレメントもしくはそのID。(※任意)
  - 指定がなかった場合、idとして"glayer_confirm"が指定されたものとして動作します。
- 第2引数：レイヤとなるエレメントもしくはそのID。(※任意)
  - 指定が無かった場合には、idとして"glayer"が指定されたものとして動作します。
- 第3引数：フェードに対するオプション。Glayer.fadeOutConfirmで使用可能です。(※任意)
  - プロパティリスト形式で指定します。例：{duration: 1000, callback: function(){}}
    指定できるプロパティは下記になります
    - duration：描画時間(ミリ秒) デフォルトは800ms
    - callback：描画終了時に呼び出す関数
    - to：描画を開始するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)
    - from：描画を終了するopacityの値(cssで指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)

ライセンス

MITライセンスとします。(glayer.js本体と同じ)

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

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

glayer_ex.js glayer.jsの拡張

ソース

使用方法

グレーアウトのみ(参考)

サンプル

グレーアウト＋ボックスでメッセージ表示

サンプル

説明

グレーアウト＋ボックスでアラート表示

サンプル

説明

グレーアウト＋ボックスで確認表示

サンプル

説明

ライセンス

glayer_ex.js
glayer.jsの拡張