jQuery EasyUI 拡張 -Portal（グラフ、リスト、球形チャートなどを作成）
jQuery EasyUI 拡張
使い方
ステップ 1：HTML ページを作成する
<div id="pp" style="width:800px;height:500px;"> <div style="width:33%"></div> <div style="width:33%"></div> <div style="width:33%"></div> </div>
ステップ 2：Portal を作成する
$('#pp').portal(options);
ステップ 3：Portal にパネル（panel）ウィジェットを追加する
// create the panel
var p = $('<div></div>').appendTo('body');
p.panel({
title: 'My Title',
height:150,
closable: true,
collapsible: true
});
// add the panel to portal
$('#pp').portal('add', {
panel: p,
columnIndex: 0
});
属性
| 名前 | タイプ | 説明 | デフォルト値 |
|---|---|---|---|
| width | number | portal の幅。 | auto |
| height | number | portal の高さ。 | auto |
| border | boolean | portal の枠線を表示するかどうかを定義します。 | false |
| fit | boolean | true に設定すると、portal のサイズを親コンテナーにフィットするように設定します。 | false |
イベント
| 名前 | パラメータ | 説明 |
|---|---|---|
| onStateChange | none | ユーザーがパネル（panel）をドラッグ＆ドロップしたときに発生します。 |
| onResize | width,height | portal のサイズが変更されたときに発生します。 |
メソッド
| 名前 | パラメータ | 説明 |
|---|---|---|
| options | none | オプション（options）オブジェクトを返します。 |
| resize | param | portal のサイズを設定します。'param' パラメータには次のプロパティが含まれます： width：portal の新しい幅。 height：portal の新しい高さ。 |
| getPanels | columnIndex | 指定された列のパネル（panel）を取得します。columnIndex パラメータが指定されない場合は、すべてのパネル（panel）を返します。 |
| add | param | 新しいパネル（panel）を追加します。'param' パラメータには次のプロパティが含まれます： panel：追加するパネル（panel）オブジェクト。 columnIndex：挿入する列インデックス。 |
| remove | panel | 指定されたパネル（panel）を削除して破棄します。 |
| disableDragging | panel | パネル（panel）のドラッグ機能を無効にします。 |
| enableDragging | panel | パネル（panel）のドラッグ機能を有効にします。 |
jQuery EasyUI サンプルをダウンロード
jquery-easyui-portal.zip
jQuery EasyUI 拡張 その他の拡張