EasyUI用法总结

Posted 2023-02-26 @不会Ayy的拉马尔

简介：

比较常用的是基于JQuery的EasyUI，所以也叫JQuery EasyUI。它是一组基于jQuery的UI界面集合体，而JQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

使用：

*下载：http://www.jeasyui.com/download/v16.php   

*引入：

<!-- 引入JQuery -->
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="/js/jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>

*如何使用：

EasyUI将UI界面分为若干个模块，每个模块使用方法基本相同，所以不一一介绍。每个模块也都含有各自的属性，事件，方法，这些都可以在文档中查询到，获取戳我。下面介绍如何使用：

创建的两种方式：

1）用HTML标签配合EasyUI内置的css类创建

例如创建一个按钮，使用如下代码：

<a class="easyui-linkbutton" href="#">使用HTML创建的linkbutton</a>

创建的效果：

当然了，用这样的方式创建会让html标签看起来不那么清晰，就像不建议在行内使用CSS样式，所以一般都使用另一种方式来创建。

2）使用Javascript创建

<a id="lb" href="#">使用JavaScript创建的linkbutton</a>

$(function() 
    $('#lb').linkbutton();
)

结果：

得到的样式完全一样，一般推荐使用JS创建，这样使代码更清晰，但也不是绝对的，在某些模块的使用中还是建议使用HTML的方式创建，例如layout，需要具体情况具体分析。

 

属性的使用：

继续使用linkbutton做演示，通过文档得知，linkbutton的属性有以下几个：

现在我们来为这个linkbutton添加几个属性

1）在HTML标签中使用data-options给组件添加属性：

<a class="easyui-linkbutton" href="#" data-options="height:50, disabled:true, iconCls:'icon-search'">使用HTML创建的linkbutton</a>

注意每个属性之间用","隔开，若属性值的类型为string则需要给字符串加上单引号，否则没有效果。

2）使用js添加属性：

<a id="lb" href="#">使用JavaScript创建的linkbutton</a>

$(function() 
    $('#lb').linkbutton(
        height: 50,
	disabled: true,
	iconCls: 'icon-search'
    );
)

运行结果：

 

事件的使用：

linkbutton只有一个事件，注意事件名的大小写，严格区分，否则无效：

1）在HTML标签中使用data-options给组件添加事件：

<a class="easyui-linkbutton" href="#" data-options="
    height:50, 
    disabled:false,     <!-- 将disabled设置为false，否则无法点击，无法触发事件 -->
    iconCls:'icon-search', 
    onClick: function() 
        alert('使用HTML创建的linkbutton被点击');
    ">使用HTML创建的linkbutton</a>

点击后，运行结果：

2）使用js添加事件：

<a id="lb" href="#">使用JavaScript创建的linkbutton</a>

$(function() 
    $('#lb').linkbutton(
        height: 50,
	disabled: true,
	iconCls: 'icon-search',
        onClick: function() 
	    alert('使用JavaScript创建的linkbutton被点击');
	
    );
)

点击后运行结果：

 

方法的使用：

linkbutton拥有以下这些方法：

以options方法来演示以下如何调用方法：

$(function() 
    console.log($('#lb').linkbutton('options'));
)

调用的格式如上，方法名需要用引号括起来。 因为options方法会返回该linkbutton的所有属性信息，所以我们在控制台打印一下，结果如下图：

 

EasyUI的基本使用已经介绍完了，很容易掌握，需要用什么模块直接查阅文档即可，中文版文档传送门。