jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。EasyUI前端框架其实也就是别人封装好了CSS和JS代码,我们直接用就行了。就像我们可以通过添加jar包的方式引入一些Java类一样,我们可以通过<link>和<script>标签在网页中添加对CSS和JS库的引用。
EasyUI官网:http://www.jeasyui.com/ 官网Dowload中可以下载jquery-easyui-1.5.5.4包,官网Demo中WebDemo如下(每个Demo附有运行结果及源码):
应用框Application 面板Panel 手风琴/折叠框Accordion 选项卡Tabs 布局Layout 数据表格DataGrid 属性网格PropertyGrid 树Tree 树网络TreeGrid 链接按钮LinkButton 菜单Menu 菜单按钮MenuButton 分割按钮SplitButton 分页Pagination 进度条ProgressBar 搜索框SearchBox 表单Form 文本框TextBox 文件框FileBox 组合Combo 组合框ComboBox 组合网络ComboGrid 组合树ComboTree 号码框NumberBox 数字调整器NumberSpinner 日历Calendar 日期框DateBox 日期时间框DateTimeBox 时间微调TimeSpinner 日期时间微调滑块Slider 验证箱ValidateBox 窗口Window 对话框Dialog 消息Messager 拖拽Draggable 可拖拽的Droppable 可调整大小的Resizable 工具提示Tooltip
jquery-easyui-1.5.5.4包目录结构如下:
demo:放案例的文件夹
demo-mobile:放手机端的案例点文件夹
locale:国际化与本地化
plugins:插件,一些复杂的功能可能需要插件
src:源码
themes:主题、CSS样式文件等
最后还有几个js文件,关键字easyui、jquery之类的,因为easyui是基于jquery的,所以要先引入jquery.js,再引入easyui.js,而min表示压缩版的js文件。
Eclipse下新建Web项目->新建html文件,测试EasyUI demo,将jquery-easyui包导入项目,在html页面<head>中使用<link>及<javascript>标签引用jquery-easyui包即可使用jquery-easyui样式:
使用jquery-easyui样式,以Basic Tree为例:在要使用Tree样式的标签中class属性="easyui-tree"即可使用。