jQueryEasyUI 介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiangzhi0627/article/details/84030609

编辑

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

外文名

jQueryEasyUI

定    义

基于jQuery的UI插件集合体

功    能

打造出功能丰富并且美观的UI界面

应用对象

web开发者

目录

  1. 特点
  2. 插件
  3. 方法的使用
  4. 事件的使用

特点

编辑

jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用,相对于extjs更轻量。

jQuery EasyUI有以下特点:

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式(如:$('#p').panel({...}))和html标记方式(如:class="easyui-panel")

4、支持HTML5(通过data-options属性)

5、开发产品时可节省时间和资源

6、简单,但很强大

7、支持扩展,可根据自己的需求扩展控件

8、目前各项不足正以版本递增的方式不断完善

插件

编辑

jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。

插件列表如下:

分类 插件
Base(基础)
  • Parser 解析器

  • Easyloader 加载器

  • Draggable 可拖动

  • Droppable 可放置

  • Resizable 可调整尺寸

  • Pagination 分页

  • Searchbox 搜索框

  • Progressbar 进度条

  • Tooltip 提示框

Layout(布局)
  • Panel 面板

  • Tabs 标签页/选项卡

  • Accordion 折叠面板

  • Layout 布局

Menu(菜单)与 Button(按钮)
  • Menu 菜单

  • Linkbutton 链接按钮

  • Menubutton 菜单按钮

  • Splitbutton 分割按钮

Form(表单)
  • Form 表单

  • Validatebox 验证框

  • Combo 组合

  • Combobox 组合框

  • Combotree 组合树

  • Combogrid 组合网格

  • Numberbox 数字框

  • Datebox 日期框

  • Datetimebox 日期时间框

  • Calendar 日历

  • Spinner 微调器

  • Numberspinner 数值微调器

  • Timespinner 时间微调器

  • Slider 滑块

  • textbox基础文本框

  • filebox文件上传

Window(窗口)
  • Window 窗口

  • Dialog 对话框

  • Messager 消息框

DataGrid(数据网格)与 Tree(树)
  • Datagrid 数据网格

  • Propertygrid 属性网格

  • Tree 树

  • Treegrid 树形网格

方法的使用

编辑

datagrid
  

$('#dg').datagrid('getSelected'); 不带参数的方法,获取当前选中行。

$('#dg').datagrid(''sort', 'itemid'); 带参数的方法,按照itemid 排序

事件的使用

编辑

datagrid
  

$('#dg').datagrid({

onDblClickCell: function(index,field,value){

$(this).datagrid('beginEdit', index);

var ed = $(this).datagrid('getEditor', {index:index,field:field});

$(ed.target).focus();

}

}); 定义单元格双击事件 开启编辑。

本文转载,如有侵权,请联系删除

猜你喜欢

转载自blog.csdn.net/xiangzhi0627/article/details/84030609