EasyMvc入门教程-高级控件说明（15）方位布局控件

现在很多管理后台都流行全屏切割的布局，大体结构如下图所示：

大家注意到没，整个布局是五个部分组成：“东西南北中”，EasyMvc对应的实现的代码为：

@(Html.Q().Layout().TextCenter("我坐镇中间。。。是强大的布局哦。。。").
    TextNorth("我属于north...").TextSouth("我属于north...").TextEast("我属于east...").TextWest("我属于west..."))

上面代码中，以TextXXX为代表的五个方法，分别代表了东西南北中五个部分。默认情况下分割线是可以拖动的。

Text支持html内容，如果要输入的内容很多，那么可以使用模板，见下面的代码：

@Html.Q().Layout().TextNorth("这次是演示模板的使用，运用模板的位置是center").TemplateIdCenter("t")

@Html.Q().StartTemplate(new TemplateModel() { Id = "t" })
@Html.Q().Layout().TextCenter("我是从模板里出来的。。。")
@Html.Q().EndTemplate()

实现的效果如下：

另外，方位布局还可以直接嵌入网页或者以Iframe形式显示网页，关键方法是：UrlCenter，这个方法的第一个参数：页面地址，第二个参数：是否为Iframe。参考代码与效果分别如下：

嵌入网页：

@(Html.Q().Layout().TextCenter("我坐镇中间。。。是强大的布局哦。。。").
      TextNorth("我属于north...").TextSouth("我属于north...").TextEast("我属于east...").TextWest("我属于west...").UrlCenter("/Button/ColorButton"))

 效果为：

Iframe嵌入网页：

@(Html.Q().Layout().TextCenter("我坐镇中间。。。是强大的布局哦。。。").
      TextNorth("我属于north...").TextSouth("我属于north...").TextEast("我属于east...").TextWest("我属于west...").UrlCenter("http://baidu.com",true))

 效果为：

 如果不想显示分割框，那么可以使用如下代码：

@(Html.Q().Layout().TextCenter("我坐镇中间。。。是强大的布局哦。。。").
    TextNorth("我属于north...").TextSouth("我属于north...").TextEast("我属于east...").TextWest("我属于west...").UseDefaultStyle(false).Border(0))

 效果如下：

 

---

 

另外，如果不想显示某些方位，比如不想显示上方（North）区域，可以设置ShowNorth(false)即可，其他的以此类推。如果想更改默认区域尺寸，直接设置SizeXXX即可。

总结：方位布局只要把握东南西北中五个部分，再根据实际需要进行复制即可 ：）

 

 

更多使用示例请浏览在线示例：http://core.zwc.cn