easyui 基础布局

最新推荐文章于 2025-03-13 12:42:10 发布

孇雙

最新推荐文章于 2025-03-13 12:42:10 发布

阅读量749

点赞数 23

文章标签： easyui 前端 javascript

本文链接：https://blog.youkuaiyun.com/2402_85275973/article/details/139197177

版权

1.导包

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php

首先在Eclipse中创建一个新的项目，在WebContent中创建一个js文件夹，把easyui文件夹（jquery-easyui-1.5.5.2）整个赋值到js文件夹中

2.引用语句

在 jQuery EasyUI 1.5API 中文版中的文档说明中复制以下代码：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

选中红色加粗字体的名字，使用快捷键 Ctrl+Shift+r 修改引用文件的路径

<%=request.getContextPath()%> 用小脚本找到绝对路径（不然可能出不来）

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/jquery-easyui-1.5.5.2/themes/gray/easyui.css">

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/jquery-easyui-1.5.5.2/themes/icon.css">

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

3.布局

通过标签<div>创建布局

<body class="easyui-layout">

         <div dataoptions="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 dataoptions="region:'east',iconCls:'iconreload',title:'East',split:true"

  style="width:100px;"></div>

<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>      <div dataoptions="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</body>