做优质教育·育智慧人才
咨询热线:028-83328890
菁瑞优智it培训 当前位置: 首页> 新闻资讯> 正文

jQuery EasyUI入门基础之插件篇-菁瑞优智前端培训

来源:菁瑞优智 作者:小菁 时间:2021-12-23

EasyUI是一组基于jQuery的UI(用户界面)插件集合。本文介绍了组件的创建方式,通过样式介绍每个属性的作用,更是列举出了EasyUI的所有插件,帮助学习者更快的了解组件。

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

组件的创建:EasyUI可以通过HTML或JavaScript创建组件;

1、HTML创建组件的方式

样式:<标签 class=“easyui-组件名” style=“样式” title=“面板” iconCls=“icon-ok” collapsible=“true”></标签>

class=“easyui-组件名”作用:告诉EasyUI需要把div转化为easyui组件;

style作用:设置组件宽高和其他样式;

Title、iconCls、collapsible组件作用: 告诉EasyUI如何创建这个组件。

使用HTML创建EasyUI组件比较简单。

2、JS代码创建组件的方法

样式:

菁瑞优智前端培训

相同名称属性的作用同HTML创建组件的方式相同。

下面是jQuery EasyUI的插件列表。

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 滑块

Window(窗口)

  • Window 窗口
  • Dialog 对话框
  • Messager 消息框

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

  • Datagrid 数据网格
  • Propertygrid 属性网格
  • Tree 树
  • Treegrid 树形网格
免费预约,试听课程
即将开班,名额有限,火热预约中

免费提升

课程升级,老学员免费学习

免费指导

老学员遇到技术难题,提供技术支持

免费探讨

不定期开展线上、线下公开课

免费吃喝

学员交流会(免费吃喝玩儿乐交友)