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>