彩票走势图

jQuery EasyUI使用教程:创建Web页面的边框布局

原创|使用教程|编辑:龚雪|2015-10-28 09:10:58.000|阅读 796 次

概述:本教程主要为大家演示如何使用jQuery EasyUI创建Web页面的边框布局。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库!查看详情>>>

<jQuery EasyUI最新版下载>

本教程主要为大家演示如何使用jQuery EasyUI创建Web页面的边框布局。该边框布局提供五个区域:east、west、north、south、center,以下是一些常见的用法:

  • north区域可以用于显示一个网站的标语
  • south区域可用于显示版权及其他注意事项
  • west区域可用于显示导航菜单
  • east区域可用于显示促销项目
  • center区域可用于显示主要内容
创建Web页面的边框布局

想要应用一个布局,首先你应该确认一个布局容器,然后定义一些区域。布局中必须包含至少一个center区域。下面是一个布局示例:

<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"容器里创建一个边框布局。布局将一个容器拆分为两个部分,左边是一个导航菜单,右边是主要内容。

最后,我们写一个onclick事件处理函数来检索数据,“showcontent”功能很简单:

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

下载该EasyUI示例:

购买最新正版授权!""


标签:HTML5jQueryUI界面

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP