jQuery EasyUI使用

時間 2020-06-07

原文原文鏈接

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>


<body class="easyui-layout">
	<!-- 使用div元素描述每一個區域 -->
	<div title="XXX管理系統" style="height: 100px" data-options="region:'north'">北部區域</div>
	<div title="系統菜單" style="width: 200px" data-options="region:'west'"></div>
	<div data-options="region:'center'">中心區域</div>
	<div style="width: 100px" data-options="region:'east'">東部區域</div>
	<div style="height: 50px" data-options="region:'south'">南部區域</div>
</body>

1.1 accordion摺疊面板

<div title="系統菜單" style="width: 200px" data-options="region:'west'">
    <!-- 製做accordion摺疊面板 fit:true----自適應(填充父容器)-->
　　 <div class="easyui-accordion" data-options="fit:true">
    <!-- 使用子div表示每一個面板 -->
	<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
	<div title="面板二">2222</div>
	<div title="面板三">3333</div>
　　 </div>
</div>

1.2 tabs選項卡面板

<div data-options="region:'center'">
    <div class="easyui-tabs" data-options="fit:true">
　　 <!-- 使用子div表示每一個面板 -->
　　 <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
　　 <div data-options="closable:true" title="面板二">2222</div>
　　 <div title="面板三">3333</div>
</div>