彩票走势图

jQuery EasyUI使用教程:窗口和布局

原创|使用教程|编辑:龚雪|2016-05-10 09:22:23.000|阅读 374 次

概述:Layout组件可以内嵌在窗口中。我们可以创建一个复杂的布局窗口,甚至不需要写任何的js代码。jquery-easyui框架能帮我们在后台做渲染和调整尺寸。

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

相关链接:

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

Layout组件可以内嵌在窗口中。我们可以创建一个复杂的布局窗口,甚至不需要写任何的js代码。jquery-easyui框架能帮我们在后台做渲染和调整尺寸。

作为一个实例,我们创建一个窗口,它包含两个部分:一个放置在左边一个放置在右边。在窗口的左边我们创建一个树形菜单,在窗口(window)的右边我们创建一个tabs容器。

窗口和布局
<div class="easyui-window" title="Layout Window" icon="icon-help" style="width:500px;height:250px;padding:5px;background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="west" split="true" style="width:120px;">
<ul class="easyui-tree">
<li>
<span>Library</span>
<ul>
<li><span>easyui</span></li>
<li><span>Music</span></li>
<li><span>Picture</span></li>
<li><span>Database</span></li>
</ul>
</li>
</ul>
</div>
<div region="center" border="false" border="false">
<div class="easyui-tabs" fit="true">
<div title="Home" style="padding:10px;">
jQuery easyui framework help you build your web page easily.
</div>
<div title="Contacts">
No contact data.
</div>
</div>
</div>
<div region="south" border="false" style="text-align:right;height:30px;line-height:30px;">
<a class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)">Ok</a>
<a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">Cancel</a>
</div>
</div>
</div>

我们仅仅使用了HTML标记,一个复杂的布局窗口将显示。这就是jquery-easyui框架,简单而强大。

下载EasyUI示例:

购买正版授权的朋友可以点击""哦~~~

标签:HTML5jQueryUI界面HTML5/JS

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

文章转载自:慧都控件

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP