jQuery EasyUI ウィンドウプラグイン -Window ウィンドウ

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.panel.defaults から拡張されています。$.fn.window.defaults でデフォルトの defaults を上書きします。

ウィンドウ（window）は、フローティングでドラッグ可能なパネルであり、アプリケーションウィンドウとして使用できます。デフォルトでは、ウィンドウは移動可能、サイズ変更可能、閉じることができます。そのコンテンツは静的 HTML で定義することも、ajax で動的に読み込むこともできます。

依存関係

  • draggable
  • resizable
  • panel

使用法

ウィンドウ（window）の作成

1. マークアップからウィンドウ（window）を作成します。

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
    data-options="iconCls:'icon-save',modal:true">
    Window Content
</div>

2. JavaScript を使用してウィンドウ（window）を作成します。

<div id="win"></div>

$('#win').window({
    width:600,
    height:400,
    modal:true
});

3. 複合レイアウトを使用してウィンドウ（window）を作成します。

いつものように、ウィンドウレイアウトを定義できます。次の例では、ウィンドウ領域を北領域と中央領域の2つの部分に分割する方法を示します。

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
    data-options="iconCls:'icon-save',modal:true">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',split:true" style="height:100px"></div>
        <div data-options="region:'center'">
            The Content.
        </div>
    </div>
</div>

ウィンドウ（window）のアクション

ウィンドウ（window）を開閉します。

$('#win').window('open'); // open a window
$('#win').window('close'); // close a window

ajax でウィンドウのコンテンツを読み込みます。

$('#win').window('refresh', 'get_content.php');

プロパティ

プロパティはパネル（panel）から拡張されています。以下はウィンドウ（window）用に上書きおよび追加されたプロパティです。

名前 型 説明 デフォルト値
title string ウィンドウのタイトルテキスト。 New Window
collapsible boolean 折りたたみボタンを表示するかどうかを定義します。 true
minimizable boolean 最小化ボタンを表示するかどうかを定義します。 true
maximizable boolean 最大化ボタンを表示するかどうかを定義します。 true
closable boolean 閉じるボタンを表示するかどうかを定義します。 true
closed boolean ウィンドウを閉じるかどうかを定義します。 false
zIndex number この値から増加を開始するウィンドウの z-index。 9000
draggable boolean ウィンドウをドラッグできるかどうかを定義します。 true
resizable boolean ウィンドウのサイズを変更できるかどうかを定義します。 true
shadow boolean true に設定すると、ウィンドウがシャドウを表示できる場合にシャドウが表示されます。 true
inline boolean ウィンドウの配置方法を定義します。true に設定すると親コンテナ内に配置され、false に設定するとすべての要素の最上部に浮かびます。 false
modal boolean ウィンドウがモーダル（modal）ウィンドウであるかどうかを定義します。 true

イベント

イベントはパネル（panel）から拡張されています。

メソッド

メソッドはパネル（panel）から拡張されています。以下はウィンドウ（window）に追加されたメソッドです。

名前 引数 説明
window none 外側のウィンドウ（window）オブジェクトを返します。
hcenter none ウィンドウを水平方向に中央揃えします。このメソッドはバージョン 1.3.1 以降で使用できます。
vcenter none ウィンドウを垂直方向に中央揃えします。このメソッドはバージョン 1.3.1 以降で使用できます。
center none ウィンドウを中央揃えします。このメソッドはバージョン 1.3.1 以降で使用できます。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張