当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery easyui入门教程(二)

发表于: 2012-04-14   作者:bozch   来源:转载   浏览次数:
摘要: 今天讲解一下,jquery easyui组件的初始化原理:         1、Jquery easyui对htm的dom节点进行初始化有两种方式:                &n

今天讲解一下,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组件的形式。

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

jquery easyui入门教程(二)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery EasyUI教程之datagrid应用(二)   二、DataGrid的扩展应用 上一份教程我们创建的一个CRUD
jQuery EasyUI教程之datagrid应用(二)   二、DataGrid的扩展应用 上一份教程我们创建的一个CRUD
在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类
模式对话框 如想对话框显示为模式的,可以通过配置modal: true来设置。 <div class="lines" styl
Jquery EasyUI 一、easyui的datagrid列表实现 Form: <form name="queryForm" id="queryForm" ac
author 刘庆 jquery 应用 jquery easyui API地址 http://easyui.btboys.com/api/ jqueryeasyui 自带
摘自:http://www.cnblogs.com/gaoweipeng/archive/2010/03/31/1701094.html 想必关注jQuery的同学们
所谓磨刀不误砍柴工,先写点通用的代码,后面开发起来效率就高多了。多余的话就不敲了,先简单介绍
所谓磨刀不误砍柴工,先写点通用的代码,后面开发起来效率就高多了。多余的话就不敲了,先简单介绍
所谓磨刀不误砍柴工,先写点通用的代码,后面开发起来效率就高多了。多余的话就不敲了,先简单介绍
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号