初见jQuery EasyUI

Posted 天马行空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初见jQuery EasyUI相关的知识,希望对你有一定的参考价值。

本文通过一个简单的小例子,简述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的功能还有很多,可以进行常见的功能开发,是一款很不错的轻量级组件。

以上是关于初见jQuery EasyUI的主要内容,如果未能解决你的问题,请参考以下文章

七色花基本权限系统- 利用EasyUI进行首页布局

EasyUi

后台管理UI模板

前端框架+普通项目的后台管理UI推荐

初见Python基础语法_人生若只如初见

初见Python运算符_人生若只如初见