# Layout 拖拽布局

# 基本使用

上边区域
右边区域
中间区域
左边区域
下边区域
▼显示代码

# 说明


1.设置div的class为comp组件，同时设置comp属性type为layout，框架会自动将其作布局处理
2.class必须为layout_north的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置
3.class必须为layout_east的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置
4.class必须为layout_center的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置，内部还可进行布局嵌套定义
5.class必须为layout_west的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置
6.class必须为layout_south的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置

通过var layout = $("#layout").layout()函数获取Layout对象，用于动态调整布局宽度、高度，如layout.setEast(300);

# 属性


属性 类型 描述
sprit boolean 是否显示中间拖动条
border boolean 是否显示边线
spiretBar json 
          //上边区域
          spiretBar: {
              show: true,
              handlerB: function () {
                  layout.setNorth(98);
              },
              handlerT: function () {
                  layout.setNorth(0);
              }
          }


          //下边区域
          spiretBar: {
              show: true,
              handlerB: function () {
                  layout.setSouth(0);
              },
              handlerT: function () {
                  layout.setSouth(48);
              }
          }

          //右边区域
          spiretBar: {
              show: true,
              handlerL: function () {
                  layout.setEast(198);
              },
              handlerR: function () {
                  layout.setEast(0);
              }
          }


          //左边区域
          spiretBar: {
              show: true,
              handlerL: function () {
                  layout.setWest(0);
              },
              handlerR: function () {
                  layout.setWest(198);
              }
          }

# 方法


名称 描述
setNorth(int) 
                    //设置,北边区域高度:
                    //var layout = $("#layout").layout();
                    layout.setNorth(40);
setSouth(int) 
                    //设置,南边区域高度:
                    //var layout = $("#layout").layout();
                    layout.setSouth(40);
setWest(int) 
                    //设置,西边区域宽度:
                    //var layout = $("#layout").layout();
                    layout.setWest(40);
setEast(int) 
                    //设置，右边区域宽度:
                    //var layout = $("#layout").layout();
                    layout.setEast(40);
setNorthSp(bool); 
                    //设置，上边区域中间拖动条:
                    //var layout = $("#layout").layout();
                    layout.setNorthSp(false);
setSouthSp(bool); 
                    //设置，下边区域中间拖动条:
                    //var layout = $("#layout").layout();
                    layout.setSouthSp(false);
setWestSp(bool); 
                    //设置，左边区域中间拖动条:
                    //var layout = $("#layout").layout();
                    layout.setWestSp(false);
setEastSp(bool); 
                    //设置，右边区域中间拖动条:
                    //var layout = $("#layout").layout();
                    layout.setEastSp(false);

← StaticLayout 静态布局 →