jQuery easyui创建组件的三种方式
程序员文章站
2022-04-05 14:42:31
...
以创建layout布局为例子
一、通过html配合data-options属性创建一个属性
- <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>
二、直接通过html，easyui 里面的组件属性，直接写在标签里面，类似第一种方式，但是不用data-options属性
- <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
- <div region:"north" title:"North Title" split:"true" style="height:100px;"></div>
- <div region:"south" title:"south Title" split:"true" style="height:100px;"></div>
- <div region:"east" title:"east Title" split:"true" style="width:100px;"></div>
- <div region:"west" title:"west Title" split:"true" style="width:100px;"></div>
- <div region:"center" title:"center Title" split:"true" style="width:100px;"></div>
- </div>
第一和第二种方式的优劣势，我也不清楚，希望高手指点。
三、通过js的方式创建
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../Scripts/jquery-easyui-1.4/themes/black/easyui.css" rel="stylesheet" />
<script src="../Scripts/jquery-easyui-1.4/jquery.min.js"></script>
<script src="../Scripts/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function () {
$("#mainLayout").layout();
$("#mainLayout").layout('add', {
region: 'north',
title: '北',
heigth: 60
});
$("#mainLayout").layout('add', {
region: 'south',
title: '南',
heigth: 100
});
$("#mainLayout").layout('add', {
region: 'east',
title: '西',
width: 100
});
$("#mainLayout").layout('add', {
region: 'west',
title: '东',
width: 100
});
$("#mainLayout").layout('add', {
region: 'center',
title: '中'
});
})
</script>
</head>
<body>
<div id="mainLayout" style="width:500px; height:500px;"></div>
</body>
</html>