网址:www.jeasyui.com,下载并参考学习<<jQuery EasyUI v1.3.5官方API中文版.exe>>手册
什么是jQuery-EasyUI
参见<<什么是EasyUI.JPG>>
是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的
WEB[后台前端]JavaScript现成的组件库
注意:今天的EasyUI组件库的版本较高,需要高版本浏览器支持,
中低版本浏览器会有不能正常执行的情况
JavaScript,AJAX,JSON,jQuery,EasyUI分别能解决什么问题
JS:基于浏览器对web页面中的节点进行操作,比较麻烦
jQuery:基于浏览器简化对web页面中的节点进行操作,做到了write less do more
AJAX:基于浏览器与服务端进行局部刷新的异步通讯编程模式
JSON:简化自定义对象的创建与AJAX数据交换轻量级文本
EasyUI:快速基于现成的组件创建自已的web页面
组件:是指已经由第三方开源组织写好的,直接可以使用的功能界面,例如:form,layout,tree...
注意:我们学的都是零散的组件,项目中需要将其装配起来,方可构建完整的web页面,
EasyUI只是众多前端WEB组件之一
jQuery-EasyUI快速入门----可折叠功能的面板
第一步:创建一个js-day05这么一个web工程
第二步:在WebRoot目录下创建00-base.html
第三步:在WebRoot目录下创建js和themes目录,导入官方文件
参见<< jquery-easyui-1.3.6文件夹>>
第四步:在00-base.html 文件的<head>标签中引入如下文件
<!-- 引入外部CSS文件 --> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <!-- 引入外部JS文件 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
第五步:在00-base.html 文件的<body>标签中创建如下<div>标签
<div id="p" class="easyui-panel" style="500px;height:200px;padding:10px;" title="我的面板" iconCls="icon-save" collapsible="true"> 内容<br/> 内容<br/> 内容<br/> 内容<br/> </div>