EasyUI使用总结

来源：互联网发布：新浪数据库股票编辑：程序博客网时间：2024/05/02 10:48

JqueryEasyUI主要由三部分组成：属性，事件，方法。

在使用过程中，有以下几种应用场景：

获取和设置EasyUI控件属性
调用控件的方法
Easyui控件支持事件，在相应的操作触发时，调用特定的函数

针对上述三种情景，下面给出了具体的代码，并与之前学的JavaScript，Jquery做了比较，以进行区别和联系。

     <a id=”test” title=”hello word” class="easyui-linkbutton">测试</a>

获取元素属性

JavaScript

    var a=documnet.getElementById(“test”);    a.getAttribute(“title”);

Jquery

    $("#test").attr("title")；

EasyUI

    $("#test").linkbutton("options").text;//获得控件的文本

设置元素属性

JavaScript

    var a=documnet.getElementById(“test”);      a.setAttribute("title","hello″);

Jquery

   $("#test").attr("title","hello″)；

EasyUI

   $("#test").linkbutton("options").text="搜索";   <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>      $('#btn').linkbutton({       iconCls: 'icon-search'    });

调用控件方法

下面通过combobox控件来说明怎样来调用控件的方法：

调用无参数的方法：var options = $(“#datagrid”).datagrid(“options”);

| | |

A B C

说明如下:

上面的代码可以分成三部分解读：

A：通常每个控件都会有一个ID属性，通过Jquery获取到datagrid对象；

B：通常该部分对应控件的名字；

C：参数是控件中提供的方法名。

调用有参数的方法：

语法：$('selector').plugin('method',parameter);

解释：

selector 是jQery对象选择器。

plugin 是插件的名称。

method 是相应插件现有的方法。

parameter 是参数对象，可以是一个对象、字符串等。

注册事件

JavaScript

   //a.传统方式  element.onclick = function(e){        // ...  };  //b.W3C  element.addEventListener('click', function(e){        // ...  }, false);  //c.IE  element.attachEvent('onclick', function(){        // ...  });

Jquery

   //a.使用事件名来绑定   $('#target').click(function(){     alert('#target元素绑定了click事件');   });   //b.使用bind方法来绑定事件 bind(type,[data],fn) 。type 参数及为我们上面讲的各种事件名   $('#searchMore').bind('click', function () {             });   //3.使用on方法来注册事件 ，on方法基本和bind方法差不多，其实bind方法最好也是调用on方法来实现的   $('.scv').on('click', function(){     $(this).clone(true).appendTo('#container');   });

EasyUI

   $('#baseTab').tabs({         onSelect:function(title,index){        localSearch();      }    });

1 0