jQuery easyui创建组件的三种方式

以创建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>

注意：ID为mainLayout的DIV需要指定高和宽，另外要先$("#mainLayout").layout();然后再添加区域

jQuery easyui创建组件的三种方式

猜你喜欢