glayer_ex.js

glayer.jsの拡張

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

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

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

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

Sponsored Link


ソース

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で指定されているスタイルを元に行うので、ここで指定する必要はほとんど無いと思います)

Sponsored Link


ライセンス

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

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

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

Sponsored Link