jQuery-EasyUI

网址：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="width:500px;height:200px;padding:10px;"   
        title="我的面板" 
        iconCls="icon-save" 
        collapsible="true">   
        内容<br/>
        内容<br/>
        内容<br/>
        内容<br/>
    </div>

 

posted on 2018-12-04 09:48  LoaderMan  阅读(137)  评论(0)  编辑  收藏  举报

导航