jQuery EasyUI 布局 – 为网页创建边框布局

2022-06-08 16:04 更新

jQuery EasyUI 布局 - 为网页创建边框布局

本节将描述如何通过jQuery EasyUI为网页创建边框布局。

边框布局(border layout)包含了五个区域,分别是:east、west、north、south、center。以下是这五个区域的一些通常用法:

  • north区域可以用来显示网站的标语。
  • south区域可以用来显示版权以及一些说明。
  • west区域可以用来显示导航菜单。
  • east区域可以用来显示一些推广的项目。
  • center区域可以用来显示主要的内容。

为了应用布局(layout),您应该确定一个布局(layout)容器,然后定义一些区域。布局(layout)必须至少需要一个center区域,以下是一个布局(layout)实例:

	<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>

我们在一个<div>容器中创建了一个边框布局(border layout),布局(layout)把容器切割为两个部分,左边是导航菜单,右边是主要内容。

最后我们写一个onclick事件处理函数来检索数据,'showcontent'函数非常简单:

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

下载 jQuery EasyUI 实例

jeasyui-layout-layout.zip

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号