jQuery EasyUI快速入门01

目录

一、jQuery EasyUI框架概述

1、什么是jQuery EasyUI?

2、 jQuery Easy的作用

3、EasyUI的目录说明

二、 WEB项目搭建EasyUI环境

 1、导入需要的css样式文件。

 2、 导入相关的js文件

 3、完整导入：

 三、EasyUI入门示例

1、标准开发步骤

2、 代码模板

四、EasyUI的三大基础概念

1、 属性设置

2、事件触发设置

3、方法调用设置

---

一、jQuery EasyUI框架概述

1、什么是jQuery EasyUI?

         JQuery  EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架

2、 jQuery Easy的作用

         既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。

3、EasyUI的目录说明

 ① 下载路径

         EasyUI的官网地址为：http://www.jeasyui.com/ 

② 目录说明

 demo：例示，非常重要，以后做开发，记不起来代码，可以直接复制例示。

 demo-moblie：手机端的例示，因为手机端已经有很多优秀UI框架，所以EasyUI在手机端基本没有人用的（忽略）。

 locale：编码支持库

 plugins：没有压缩过的插件源码

 src：没有压缩过的核心源码

 themes：主题样式，有个可以选择

easyloader.js：源码加载器

 jquery.easyui.min.js：PC使用类库。

 jquery.easyui.moblie.js：手机端使用类库

 jquery.min.js：Jquery框架

二、 WEB项目搭建EasyUI环境

搭建环境的步骤如下：

 1、导入需要的css样式文件。

 easyui.css  

 icon.css

 2、 导入相关的js文件

   jquery.min.js
   jquery.easyui.min.js
   jquery.easyui-lang-zh_CN.js
 

 3、完整导入：

      注意：themes中的文件相对路径不能变。

<!-- 引入EasyUI的css依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/themes/gray/easyui.css">

<!-- 引入EasyUI的图标依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/themes/icon.css">

<!-- 引入EasyUI的相关JS依赖 -->
<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/jquery.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/jquery.easyui.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/static/js/jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>
 

 三、EasyUI入门示例

     需求：将a链接标签转换成easy样式按钮。

1、标准开发步骤

 使用EasyUI中的**linkbutton按钮插件**实现该需求。
 标签： <a href="#">按钮</a>
 样式名： 规范: easyui-样式名
        <a href="#" class="easyui-linkbutton">按钮</a>
 js插件名：
     $("选中超链接").插件名();
     $("a").linkbutton();
 

2、 代码模板

 实现方式一：HTML标签+EasyUI样式

<!-- HTML标签+EasyUI样式 -->
 <a href = "#" class = "easyui-linkbutton">诺糯米</a>

-实现方式二：HTML标签+编程插件方法

<!-- HTML标签+ easyui 插件方法 -->
 <a style="color: green;" id="btn1" href="#">米努米</a>
 <script>
      //使用easyui按钮插件
       $("#btn1").linkbutton();
 </script>

四、EasyUI的三大基础概念

分别是：**属性，事件，方法**

 ① 属性指的是EsayUI框架控件（HTML）的属性（设置插件的样式。图标，宽度，高度）
 ② 事件指的是 EasyUI 框架控件可以触发的事件（如：点击事件、双击事件等）
 ③ 方法指的是 EasyUI 框架控件，只有调用了默认执行的逻辑代码块。（修改插件属性，状态。）

1、 属性设置

（1）HTML方式设置
       <标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

<!-- HTML标签 + esyui-样式 -->
<!-- iconCls 图标 -->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">糯米诺</a>

（2）基于javascript方式设置
 <标签 id = "tag"></标签>
 $("#tag").插件名({
     属性名:属性值,
     属性名:属性值
 });
 注意事项：
     1.字符串类型的数值一定要有引号（单引号，或者双引号都可以）
     2.属性之间使用逗号分隔，最后一个属性不可以有逗号

 <!-- HTML标签+ easyui 插件方法 -->
 <a style="color: green;" id="btn1" href="#">风清扬</a>
 <script>
       //使用easyui按钮插件
       $("#btn1").linkbutton({
           iconCls:'icon-cancel',
         size:'large'
       });
 </script>

2、事件触发设置

（1）HTML方式设置[不推荐]
   <标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

<a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">嘟嘟</a>
 <script>
     function testEvent(){
         alert("我被点了！！！");
         //调用按钮的 disable方法。
         //$("按钮").linkbutton('disable');
         $("a:first").linkbutton('disable');
     }
</script>

（2）基于javascript方式设置
 <标签 id = "tag"></标签>
 $("#tag").插件名({
     属性名:属性值,
     属性名:属性值,
     事件名:function(){
    }
 });

 <a style="color: green;" id="btn1" href="#">嘟嘟</a>
 <script>
     //使用easyui按钮插件
       $("#btn1").linkbutton({
           onClick:function(){
           alert("嘟嘟，被点了。");
       }
 });
</script>

 

3、方法调用设置

   调用模板：
       $("标签").easyui插件名('方法名',方法传入的参数);

 $('#btn1').linkbutton('resize', {
     width: '100%',
     height: 32
 });