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组件的形式。

      下一篇会针对所有的组件进行逐一介绍。

评论

1 楼 蜀山红日 2012-12-06