Top > 開発ガイド > Spinelzリファレンス > Window

Window

概要

• Windowを描画します。

利用方法

記述例

<script src="../src/javascripts/spinelz_lib/prototype.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz_lib/scriptaculous.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz_lib/resize.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz_lib/spinelz_util.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz/window_resizeEx.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz/window.js" type="text/javascript"></script>

<div id="sample_window_id" style="display: none;">
  <div class="rubricks_general_window_title">サンプルウィンドウ　タイトル</div>
  <div class="rubricks_general_window_content">
    <div>ウィンドウ　コンテンツ</div>
  </div>
</div>

<script type="text/javascript">
  sample_window_variable = new Window(
    'sample_window_id',
    {
      height:    350,
      width:     500,
      modal:     true,
      resize:    false,
      minButton: false,
      maxButton: false
    }
  );
</script>

任意のボタンを追加する

• コンストラクタで「addButton」オプションを指定します。
• addButtonオプションは下記の2種類で指定できます。
  • Array
    id, className, onclickを三つのプロパティを持つオブジェクトの配列で指定します。
    • id: ボタンの要素のID
    • className: ボタン要素のクラス名
    • onclick: ボタンがクリックされたときに呼ばれる関数

             sample_window_variable = new Window(
               'sample_window_id',
               {
                 addButton: [
                  {id: 'sample_button_id_1', className: 'sample_button_class_1', onclick: function() {alert('click button 1!')}},
                  {id: 'sample_button_id_2', className: 'sample_button_class_2', onclick: function() {alert('click button 2!')}}
                 ]
               }
             );
      

  • Function
    より柔軟にボタンを作成したい場合に利用します。
    
    • ボタンとなるHTMLを記述して返却してください。
    • 引数にはWindowがコンストラクタで指定されたオプションをもとに作成したボタンのHTMLが渡されます。

             sample_window_variable = new Window(
               'sample_window_id',
               {
                 addButton: function(buttons) {
                  return buttons + "<div id='sample_button_id_1' class='sample_button_class_1' onclick='alert(\'click button 1!\')'></div>";
                 }
               }
             );
      

API

コンストラクタ(element_id, options)

引数	説明
target	HTML要素のID。
options	Windowの構築や挙動に関するオプションをしてします。下記「オプション」を参照してください。

オプション 第2引数として以下のオプションを指定することができます。 オプションを指定するかどうかは任意です。

オプション名	デフォルト値	説明
className	Window.className.window	Windowに付与されるCSSクラス名を指定します。Windowのスタイルをスクラッチで記述したい場合に利用します。
width	300	Windowの横幅。
height	300	Windowの縦幅。
minWidth	200	Windowの横幅の最小値。
minHeight	40	Windowの縦幅の最小値。
drag	true	ドラッグのできるかどうか。
resize	true	リサイズできるかどうか。
resizeX	true	横にリサイズできるかどうか。resizeオプションがtrueの場合に有効になります。
resizeY	true	縦にリサイズできるかどうか。resizeオプションがtrueの場合に有効になります。
modal	false	Windowが開いたときにモーダルにするかどうか。
closeButton	true	閉じるボタンを表示するかどうか。
maxButton	true	最大化ボタンを表示するかどうか。
minButton	true	最小化ボタンを表示するかどうか。
cssPrefix	'custom_'	カスタムスタイルシートのプレフィックス文字列
restriction	false	ドラッグによるWindowの移動を親要素の範囲内に限定するかどうか。
endDrag	Prototype.emptyFunction	ドラッグした後に呼ばれるコールバック関数。
endResize	Prototype.emptyFunction	リサイズした後に呼ばれるコールバック関数。
addButton	null	任意のボタンを追加するときにしていします。利用方法「任意のボタンを追加する」を参照してください。
preMaximize	function(){returntrue}	最大化ボタンが押され、最大化される直前に呼ばれるコールバック関数。
preMinimize	function(){returntrue}	最小化化ボタンが押され、最小化される直前に呼ばれるコールバック関数。
endMaximize	Prototype.emptyFunction	最大化ボタンが押され、最大化された直後に呼ばれるコールバック関数。
endMinimize	Prototype.emptyFunction	最小化化ボタンが押され、最小化された直後に呼ばれるコールバック関数。
preRevertMaximize	function(){returntrue}	最大化ボタンが押され、最大化された状態から元の状態に戻る直前に呼ばれるコールバック関数。
preRevertMinimize	function(){returntrue}	最大化ボタンが押され、最小化された状態から元の状態に戻る直前に呼ばれるコールバック関数。
endRevertMaximize	Prototype.emptyFunction	最大化ボタンが押され、最大化された状態から元の状態に戻った直後に呼ばれるコールバック関数。
endRevertMinimize	Prototype.emptyFunction	最小化ボタンが押され、最小された状態から元の状態に戻った直後に呼ばれるコールバック関数。
preClose	function(){return true}	closeメソッドが呼ばれ、Windowが非表示になる直前に呼ばれるコールバック関数。falseが返された場合、非表示処理は中止されます。
endClose	Prototype.emptyFunction	closeメソッドが呼ばれ、Windowが非表示になった直後に呼ばれるコールバック関数。
onCloseButton	Prototype.emptyFunction	閉じるボタンが押されたときの動作を独自に指定したい場合に利用します。このオプションを指定した場合は、ボタンを押してもWindowは非表示になりません。Windowを閉じたい場合は、明示的にcloseメソッド呼び出す必要があります。
dragOptions	{}	Draggableのオプション。詳細はscript.aculo.usのDraggableを参照してください。
appendToBody	false	trueの場合、エレメント（element_id）をdocument直下に付け直す。Windowが他の要素の下に隠れてしまう場合に指定してください。
defaultButtonWidth	16	ボタンが表示されるエリアの横幅。
displayNone	true	構築時にエレメント(element_id)に'display: none'を設定するかどうか。
build	true	Windowをビルドするかどうか。

open(zindex)

Windowを開きます。

引数	説明
zindex	Windowに付与するzindexの値。省略された場合、自動的発行される値がに付与されます。

close()

Windowを閉じます。

center()

Windowを画面の中央に移動します。

setHeight(height)

Windowの縦幅を設定します。

引数	説明
height	縦幅。'300px'のように'px'まで指定してください。

enableResizing()

リサイズを有効化にします。

disenableResizing()

リサイズを無効化します。

moveTo(position)

指定されたポジションへWindowを移動します。

引数	説明
position	Windowを表示するポジション。left、およびtopを指定できます。

  var win = new Window('id');
  win.moveTo({top: 100, left: 100});

moveBy(position)

Windowのポジションを指定されただけ移動します。

引数	説明
position	Windowを移動するポジション。left、およびtopを指定できます。

  var win = new Window('id');
  win.moveBy({top: 100, left: 100});
  win.moveBy({top: -100, left: -100});