jQuery 易UI基础教程的易UI常用组件(推荐)

本文的主要内容是介绍EasyUI的一些常用组件的使用，这些都是非常基础的知识，适合初学者学习，包括Base、Layout、菜单和按钮、窗体、窗口、表格和树的使用。要求全面掌握这些内容，学会查阅文献，了解发展的基本思路。如果你想进一步学习，可以直接去官网学习，查阅文件等http://www.jeasyui.com/.

一.导言

EasyUI是一个基于第三方机构开发的jquery的开源、功能强大的插件库。主要用于web的后台前端。JQuery EasyUI提供了易于使用的组件，这使得Web开发人员能够在流行的jquery core和HTML5上快速构建程序页面。为了构建一个完整的网页，这里介绍的所有基本组件都需要组装。EasyUI只是众多前端WEB组件中的一个。

角色：基于现成的组件快速创建自己的网页。组件：指由第三方编写的、可直接使用的功能接口，如表单、布局、树等。

二、开发步骤

1.去官网下载相应的插件；2.在myeclipse中创建新的web项目。

3.在WebRoot目录下创建js和主题目录，并导入官方文件

4.创建一个新的helloword.html网页，并介绍以下文档：

link rel='样式表' href='主题/默认/easy ui . css' type='text/css' /link rel='样式表' href='主题/图标. CSS ' type=' text/CSS '/脚本类型=' text/JavaScript ' src=' http : js/jquery . min . js '/脚本类型=' text/JavaScript ' src=' http : js/jquery . easy ui . min . js '/Script

第三，基础组件的使用

3.1分页(分页)

用$ . fn . paging . defaults重写默认值对象。

分页组件是常用的组件之一。我们可以通过两种方式使用它，一种是直接在标签上添加对应的属性，另一种是通过js进行操作。

静态模式创建如下：

div id=' pagination ' class=' easui-pagination ' data-options=' total :2000，pagesize :10 ' style=' background : # efefef；' border:1px实心# ccc'/div动态模式：

div id=' PP ' style=' background : # EFE fef；' border:1px实心# ccc'/divscript $ ('# PP ')。分页({'total' :100，//表示记录总数' pageSize':10，//每页显示多少条记录' pageNumber':2，///当前页码。page list ' 3360[10/' buttons ' :[{ iconcl s : ' icon-add '，handler : function(){ alert(' add ')} }，'-'，{ iconcl s 3360 ' icon-save '，handler : function(){ alert(' save ' } }]，' layout':['list '，' sep '，' first '，' prev '，' manual '，' next '，' last '，' links']，' showPageList':false，}$('#pp ')。分页({ ' onSelectPage ' : function(page number，b){ alert(page number)；Alert(b)}})我这里增加了一些事件和方法，可以根据实际情况增加、删除或者修改一些小组件。它极大地促进了我们的发展。

3.2进度条

用$ .fn.progressbar.defaults重写默认值对象。

使用HTML标签