jQuery easyui创建组件的三种方式

冷不防 2022-05-23 11:29 124阅读 0赞

以创建layout布局为例子

一、通过html配合data-options属性创建一个属性

1.  **<div** id="cc" class="easyui-layout" style="width:600px;height:400px;"**>**  
2.    **<div** data-options="region:'north',title:'North Title',split:true" style="height:100px;"**></div>**  
3.    **<div** data-options="region:'south',title:'South Title',split:true" style="height:100px;"**></div>**  
4.    **<div** data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;>**</div>**  
5.    **<div** data-options="region:'west',title:'West',split:true" style="width:100px;"**></div>**  
6.    **<div** data-options="region:'center',title:'center title'" style="padding:5px;background:\#eee;"**></div>**  
7.  **</div>**

二、直接通过html，easyui 里面的组件属性，直接写在标签里面，类似第一种方式，但是不用data-options属性

1.  **<div** id="cc" class="easyui-layout" style="width:600px;height:400px;"**>**  
2.      **<div** region:"north" title:"North Title" split:"true" style="height:100px;"**></div>**  
3.      **<div** region:"south" title:"south Title" split:"true" style="height:100px;"**></div>**  
4.      **<div** region:"east" title:"east Title" split:"true" style="width:100px;"**></div>**  
5.      **<div** region:"west" title:"west Title" split:"true" style="width:100px;"**></div>**  
6.  **    <div** region:"center" title:"center Title" split:"true" style="width:100px;"**></div>**   
    
7.  **</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();然后再添加区域