JLayout学习笔记

JLayout配置项整理：

1）closable:  //可选true和false。代表区域允不允许关闭。

2）resizable://可选true和false。代表区域与不允许改变大小

3）slidable:  //可选true和false。true表示当关闭区域的时候，点击toggler可以使区域悬浮出来。

4）togglerLength_closed:    //区域关闭时候toggler的大小

5）togglerLength_open:      //区域打开时候toggler的大小

6）spacing_closed:             //区域关闭时候边框大小

7）spacing_open:               //区域打开的时候边框大小

8）minSize:                        //区域最小尺寸

9）maxSize:                       //区域最大尺寸

10）togglerAlign_closed:   //toggler所在的位置，取值有：top.bottom,left,center,right

11）minWidth:                   //最小宽度

12）paneClass:                 //default = 'ui-layout-pane'

13）resizerClass:  // default = 'ui-layout-resizer'

14）togglerClass:  // default = 'ui-layout-toggler'

15）buttonClass: // default = 'ui-layout-button'

16）togglerTip_open: //toggler提示

17）togglerTip_closed: //toggler提示

18）resizerTip: //改变尺寸的提示

19）fxName:                    //区域弹出动画，可选：none, slide, drop, scale

20）fxSpeed_open: //打开动画的速度，单位：毫秒

21）fxSpeed_close: //关闭动画的速度，单位：毫秒

22）initClosed:                 //初始是否关闭

事件相关：

23）onhide_start:                function () { }

onhide_end:                    function () { }

onshow_start:function () { }

onshow_end:function () { }

onopen_start:function () { }

onopen_end:function () { }

onclose_start:function () { }

onclose_end:function () { }

onresize_start:function () { }

onresize_end:                 function () { }

 

以上的配置都可以加方位前缀：west__, east__ north__ south__  center__。 没有加方位就视为全局生效。

示例：

myLayout = $('body').layout({

		//	reference only - these options are NOT required because 'true' is the default
			closable:					true	// pane can open & close
		,	resizable:					true	// when open, pane can be resized 
		,	slidable:					true	// when closed, pane can 'slide' open over other panes - closes on mouse-out
		,	livePaneResizing:			true
		,	togglerClass:				"ui-layout-toggler"	// default = 'ui-layout-toggler'

		//	some resizing/toggling settings
		,	north__slidable:			false	// OVERRIDE the pane-default of 'slidable=true'
		,	north__resizable:			false	// OVERRIDE the pane-default of 'resizable=true'
		,	north__togglerLength_closed: '100%'	// toggle-button is full-width of resizer-bar
		,	north__togglerAlign_open:	"center"		// align to top of resizer
		,	north__togglerLength_open:	20
		,	north__spacing_closed:		20		// big resizer-bar when open (zero height)
		,	north__spacing_open:		5		// no resizer-bar when open (zero height)
		,	south__resizable:			false	// OVERRIDE the pane-default of 'resizable=true'
		,	south__spacing_open:		0		// no resizer-bar when open (zero height)
		,	south__spacing_closed:		20		
}）;