本文通过一个简单的小例子,简述jQuery EasyUI的使用方法,仅供学习分享使用,如有不足之处,还请指正。
什么是jQuery EasyUI ?
引用官网的一句话:jQuery EasyUI framework helps you build your web pages easily。其特点就就快速,灵活,简单。
本文借助自己的第一个B/S系统,简述一下jQuery EasyUI的相关功能。【本文采用纯前端处理,不涉及后台数据库,列表中数据是从Json文件中读取】
涉及知识点
【每一个知识点都是一个组件】:
- dialog 一种特殊类型的窗口,扩展自window
- layout 布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的
- tree 树控件在web页面中一个将分层数据以树形结构进行显示
- tabs 选项卡显示一组Panel
- datagrid DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持
- validatebox validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。主要是客户端验证
- linkbutton 按钮组件使用超链接按钮创建
效果图
具体如下图所示:
【登录框】
【后台管理页面】
【列表框】
【新增窗口】Modal窗口
-----------------------------------------------------------------------------
备注:jQuery EaysUI的功能还有很多,可以进行常见的功能开发,是一款很不错的轻量级组件。