使用JqueryEasyUI进行页面布局

最新推荐文章于 2024-08-25 09:41:52 发布

做一只有理想的猫

最新推荐文章于 2024-08-25 09:41:52 发布

阅读量1.7k

点赞数

分类专栏： EasyUI 文章标签： EasyUI Layout 页面布局

本文链接：https://blog.csdn.net/gods_boy/article/details/80201147

版权

EasyUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下面为为大家介绍一种快速搭建页面布局的方法，那就是使用EasyUI进行布局。

在布局之前首先要从EasyUI包里面引用五个文件。

 <link href="EasyUI/themes/material/easyui.css" rel="stylesheet" />
    <link href="EasyUI/themes/icon.css" rel="stylesheet" />--图片样式
    <script src="EasyUI/jquery.min.js"></script>
    <script src="EasyUI/jquery.easyui.min.js"></script>
    <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>--使用语言

创建布局有很多种方法：

1. 通过标签创建布局

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">

<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>

<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</div>

2. 使用完整页面创建布局

<body class="easyui-layout">

<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>