JQueryEasyUI 组件的实例化

1、 组件实例化方式有两种

通过class属性实例化组件。

通过javascript代码实例化组件。  

需要先引用

 <%--导入EasyUI--%>
    <link href="UI/themes/default/easyui.css" rel="stylesheet" />
    <link href="UI/themes/icon.css" rel="stylesheet" />
    <script src="UI/jquery.min.js"></script>
    <script src="UI/jquery.easyui.min.js"></script>
    <script src="UI/locale/easyui-lang-zh_CN.js"></script>

  提示： 下面的方法不能同时使用 会发生错误

1、通过class属性实例化组件编码规则

通过特定的HTML标签，添加class属性和data-options属性来实例化

l在html代码某些特定的标签元素中，添加class=“easyui-组件名”对其进行初始化渲染。以panel组件为例，div的class="easyui-panel“。

 <div id="panel" class="easyui-panel" title="面板"collapsible="true"  >
            实例化面板组件
 </div>

l通过HTML标签的data-options属性对组件进行相关属性配置。

例如: data-options=”width:100”

<div id="panel" class="easyui-panel" data-options="iconCls:'icon-save',collapsible:true,title:'面板'">
        面板
    </div>

2、 通过javascript代码实例化组件编码规则

通过特定的HTML标签，以js代码调用easyui框架中对应的方法来实例化。

$(“#ID选择器”).渲染EasyUI组件名称({

     属性1:值,

     属性2:值,

     属性3:值,

     属性4:值,

     事件:function(){ 执行代码 }

});

例如:

 $("#panel01").panel({
                title: "面板",
                collapsible: true,
                iconCls: "icon-save"
            });

<div id="panel01" style="width: 500px; height: 200px; padding: 10px">
            123456789
</div>