jQuery EasyUI 擴(kuò)展 – Portal

2018-09-23 09:40 更新

jQuery EasyUI 擴(kuò)展 - Portal（制作圖表、列表、球形圖等）

jQuery EasyUI 擴(kuò)展 jQuery EasyUI 擴(kuò)展

用法

步驟 1：創(chuàng)建一個(gè) HTML 頁(yè)面

	<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：創(chuàng)建 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
	});

屬性

名稱 類型 描述 默認(rèn)值
width number portal 的寬度。 auto
height number portal 的高度。 auto
border boolean 定義是否顯示 portal 的邊框。 false
fit boolean 當(dāng)設(shè)置為 true 時(shí)，設(shè)置 portal 的尺寸以適應(yīng)它的父容器。 false

事件

名稱 參數(shù) 描述
onStateChange none 當(dāng)用戶拖放面板（panel）時(shí)觸發(fā)。
onResize width,height 當(dāng) portal 的尺寸改變時(shí)觸發(fā)。

方法

名稱 參數(shù) 描述
options none 返回選項(xiàng)（options）對(duì)象。
resize param 設(shè)置 portal 的尺寸，'param' 參數(shù)包括下列屬性：
width：portal 的新寬度。
height：portal 的新高度。
getPanels columnIndex 獲取指定的列面板（panel），當(dāng) columnIndex 參數(shù)為分配時(shí)，則返回所有的面板（panel）。
add param 添加一個(gè)新的面板（panel），'param' 參數(shù)包括下列屬性：
panel：要添加的面板（panel）對(duì)象。
columnIndex：要插入的列索引。
remove panel 移除并銷毀指定的面板（panel）。
disableDragging panel 禁用面板（panel）的拖拽功能。
enableDragging panel 啟用面板（panel）的拖拽功能。

下載 jQuery EasyUI 實(shí)例

jquery-easyui-portal.zip

jQuery EasyUI 擴(kuò)展 jQuery EasyUI 擴(kuò)展
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)