jquery easyui入门教程(2)

发布时间:2020-05-26编辑:脚本学堂
jquery easyui组件的初始化原理:第一种是直接在script标签中用jquery选择器获取相应的节点,然后调用Jquery easyui的初始化函数,函数的第一个参数是一个对象。

jquery easyui组件的初始化原理:
1、Jquery easyui对htm的dom节点进行初始化有两种方式:
第一种是直接在<script>标签中用jquery选择器获取相应的节点,然后调用Jquery easyui的初始化函数,函数的第一个参数是一个对象。这个对象中配置了组件的属性以及事件,当然这些都是有选择性的。例如:
 

复制代码 代码示例:
<script type="text/script">
$(function(){
    $("#edit_win").window({
      title:'编辑窗口',
      closed:true,
      iconCls:'icon-edit',
      width:123,
      height:123,
      onClose:function(){
      }
});
});
</sript>

其中edit_win是一个事先定义好的一个html标签的id。
此处特别要提出的是组件初始化时,组件的属性配置不仅可以放置于初始化函数中,也可以配置在相应id标签中作为标签的属性。
例如:
 

复制代码 代码示例:
<script type="text/script">
$(function(){
    $("#edit_win").window({
      closed:true,
      width:123,
      height:123,
      onClose:function(){
      }
});
});
</sript>
<div id="edit_win" title="编辑窗口" iconCls="icon-edit"></div>

第二种种是在html代码中在某些特定的标签中,添加class="easyui-组件名"来对其进行初始化渲染。
例如:
 

复制代码 代码示例:
<div class="easyui-panel" title="待办项" icon="icon-wait" ....>show panel text</div>

上述,介绍的两种初始化的方式在使用时只能使用其中的一种方式,不能进行混合使用。
在两种同事使用时,会出现js错误,例如:$.data(,'').options为空。

2、对初始化的过程做一下相应的介绍:
针对1中的第一种方式,ta是调用了相应组件的初始化的函数$.fn.组件名=function(params){}。
初始化时是将一个对象作为参数,此对象既是组件属性和事件的配置。由于组件的属性有两种方式,一是作为对象的属性,二是作为html标签的属性进行定义,所以jquery easyui需要将对象中和html标签中定义的属性整合在一起。

有了属性和相应的事件之后,那么就可以掉用jquery easyui内置的函数对html元素进行渲染,最后就得到所需要的Jquery easyui组件。
针对1中的第二种方式,是在页面加载完成后,jquery easyui会对页面进行遍历,寻找html标签中属性class以easyui-开头,并且以jquery easyui组件名结束的标签。

遍历结束后调用$.parser.parse('....');将easyui-开始的标签初始化成jquery easyui组件的形式。