为网页建立边框布局

使用教程 » 为网页建立边框布局

边界布局提供五个区域:东、西、北、南、中。以下是一些常用用法:

• 北区域可以用作网站的logo。
• 南部区域可用于版权等注释.
• 西区域可用于导航菜单.
• 东区域可用于促销项目.
• 中心区域可用于主要内容.

要应用布局，您应该确认布局容器，然后定义某个区域。 布局必须至少有一个中心区域。下面是一个布局示例:

<div class="easyui-layout" style="width:400px;height:200px;"> <div region="west" split="true" title="Navigator" style="width:150px;"> <p style="padding:5px;margin:0;">Select language:</p> <ul> <li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li> <li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li> <li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li> <li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li> </ul> </div> <div id="content" region="center" title="Language" style="padding:5px;"> </div> </div>

我们在一个部门建立了一个边界布局。容器。 布局将容器分为两部分，左边是导航菜单，右边是主要内容。

最后我们编写了一个onclick事件句柄函数来检索数据，“showcontent”函数非常简单:

function showcontent(language){ $('#content').html('Introduction to ' + language + ' language'); }

下载 EasyUI 实例: