当前位置: 代码迷 >> Web前端 >> jquery easyui入门教程(2)
  详细解决方案

jquery easyui入门教程(2)

热度:212   发布时间:2012-09-23 10:28:11.0
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组件的形式。

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

  相关解决方案