jQuery EasyUI学习一

zoukankan html css js c++ java

jQuery EasyUI学习一
1. jQuery EasyUI介绍
- 1. 创建组件的方式和原理（掌握）
- 2. 组件三要素（掌握）
- 3. Panel、LinkButton、上下文菜单;（掌握）
1. 简介
2.1. jQuery EasyUI

是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者只有需要了解一些简单的html标签。

2.2. 官方网站

http://www.jeasyui.com/
1. 中国人开发;
2. 个人免费
3. 商业收费 $449
2.3. 运行案例

解压apache-tomcat-easyui.zip

双击apache-tomcat-easyuiinstratup.bat

浏览器地址：http://localhost:8888/index.php

(别关心这个后缀，这并不是php,这里是直接下载的easyui的官方网站)。

2.4. EasyUI框架项目结构

2.4.1. 目录截图

2.4.2. 子目录说明

demo :web案例

demo-mobile:移动端案例

locale:本地化（汉化包）

plugins:easyui所有插件

src:插件的源码，如果买了商业授权就有全部源码

themes：主题（皮肤），存放css,img

changlog.txt:升级日志

easyloader.js:内部实现了一个js加载器，根据应用的需求加载js文件，而不是一次性加载所有文件；

jquery.easyui.min.js:所有插件集的压缩文件

jquery.min.js : easyui当前版本兼容的jquery库
1. 搭建easyui环境
3.1. web项目加入easyui的项目文件夹

建议创建webapp的项目文件名，同maven标准命名

最好不要携带easyui的版本号，升级的时候修改就不是很方便了

3.2. 新建一个公共网页common.jsp

引入easyui需要的js和css；可参考jQuery EasyUI 1.5 版 API 中文版.exe/文档说明。



<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">



<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">



<script type="text/javascript" src="/easyui/jquery.min.js"></script>



<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>



<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>

3.3. 把创建的easyui web项目跑起来

去掉这个原来pss的勾

修改tomcat/conf/server.xml，指向easyui1的webapp目录

在启动之前再次确认pss的勾是否取消掉。
1. 创建组件
Easyui可以通过HTML或JavaScript创建组件;

4.1. HTML创建组件的方式

<标签 class=”easyui-组件名”

组件配置title=“xxx”

data-options=”title:’xxx’”></标签>



<div id="p1" class="easyui-panel"

         style=" 400px; height: 400px; padding: 10px; color: red; font-weight: bold; font-size: 18px;" title="我的面板"

         iconCls="icon-ok" collapsible="true">

         <h1>内容xxxx</h1>

</div>

4.2. panel最终生成的html代码分成3个div

4.3. Js代码创建组件

<script type="text/javascript">

         $(function() {

                  //获取p2标签,把他变成easyui面板组件.

                  $("#p2").panel({

                           //面板属性

                           title : "你的面板",

                           iconCls : "icon-no"

                  });

         });

</script>

<div id="p2" style=" 400px; height: 400px; padding: 10px; color: red; font-weight: bold; font-size: 18px;">

         <h1>是你面板</h1>

</div>
1. EasyUI创建组件的原理(html创建的方式)
最终还是调用js的方式来创建，$(“#p”).panel({json参数});

5.1. $.parser.parse()

页面加载完毕后

如果$.parser.auto=true;会自动调用$.parser.parse()方法,进行解析

easyuisrcjquery.parser.js

5.2. 支持创建组件的所有名称
1. 1.3.6版本
1. 1.5版本
5.3. 通过选择器获取相关元素对象,然后调用对应的组件方法

5.4. 使用

5.5. DIY简易版本linkbutton

<title>EasyUI 创建组件的原理</title>



<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">



<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">



<script type="text/javascript" src="/easyui/jquery.min.js"></script>

<script type="text/javascript">

         /* easyui插件定义 */

         $.fn.linkbutton = function(){

                  //添加类样式

                  this.addClass("l-btn");

                  //获取文本

                  var text = this.text();



                  //获取iconCls的值

                  var iconCls = this.attr("iconCls");



                  this.html('<span class="l-btn-left">'+

                                             '<span class="l-btn-text '+iconCls+' l-btn-icon-left">'+text+'</span>'+

                                    '</span>');

         };



         $(function(){

                  //easyui通过html代码创建组建的原理:

                  /*

                           1.页面加载完毕

                           2.获取页面中是以.easyui-{组件名}的选择器元素. {组件名} : easyui中所有组件,比如:panel,linkbutton,tree

                           3.判断是否有获取到的元素.

                           4.调用对应的组件方法.   (组件 : panel() , linkbutton() )

                  */

                  //var els = $(".easyui-linkbutton");

                  //els.linkbutton();



                  $("#mya").linkbutton();

         });

</script>

</head>

<body>

         

         <a id="mya" iconCls="icon-ok">我是一个按钮</a>



</body>

5.6. 是否自动解析EasyUI组件。默认为true;

<script type="text/javascript">

         //页面加载的时候,获取页面中以.easyui-{组件名}的元素,然后调用对应组件方法.

         $.parser.auto=false;

</script>

</head>

<body>

         <a class="easyui-linkbutton" iconCls="icon-ok">我是一个按钮</a>

</body>
1. LinkButton组件
Linkbutton组件需要通过<a>进行创建；

<script type="text/javascript">

         $(function(){

                  $("#editBtn").on("click",function(){

                           console.debug("编辑...");

                  });



                  $("#cutBtn").on("click",function(){

                           //组件的disabled禁用属性,无法控制事件.

                           if(!$(this).hasClass("l-btn-disabled")){//判断按钮是否有禁用样式.

                                    console.debug("剪切...");

                           }

                  });

         });

</script>

<body>

         

         <a href="#" class="easyui-linkbutton" iconCls='icon-remove' toggle="true" onclick="alert('删除....');">删除</a>

         <a href="#" class="easyui-linkbutton" iconCls='icon-edit' plain="true" iconAlign="right" id="editBtn">编辑</a>

         <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" id="cutBtn">剪切</a>





         <div style="padding:5px;border:1px solid #ddd;">

                  <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>

                  <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>

                  <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 3</a>

                  <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 4</a>

                  <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 5</a>

         </div>

</body>
1. Panel组件
7.1. panel组件需要通过<div>进行创建

面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。



<div id="p" class="easyui-panel" title="面板1"

                  style=" 300px; height: 200px; padding: 10px;"

                  iconCls="icon-save"

                  collapsible="true"

                  minimizable="false"

                  maximizable="true"

                  closable="true"

                  tools="#tt"

                  fit="false"

                  loadingMessage="加载中..."

                  href="/panel_content.txt"

         >

         <a class="easyui-linkbutton" iconCls="icon-add">添加</a>

         <a class="easyui-linkbutton" iconCls="icon-remove">删除</a>

</div>

<div id="tt">

         <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>

         <a href="javascript:void(0)" class="icon-ok" onclick="javascript:alert('ok')"></a>

</div>

7.2. Panel组件标签html结构

7.2.1.   panel面板的组成

面板头<div class="panel-header"> 和面板的内容<div class=”panel-body”>

7.2.2.   组件

<div id="p1" cls="mypanel" title="哈哈" style=" 200px;height: 200px;">

         </div>

panel组件被创建后:

<div class="panel mypanel"

                  style="display: block; left: 500px; 200px;">

                  <div class="panel-header" style=" 188px;">

                           <div class="panel-title">哈哈</div>

                           <div class="panel-tool"></div>

                  </div>

                  <div style=" 198px; height: 171px;" title="" cls="mypanel"

                           id="p1" class="panel-body">你好吗???</div>

</div>

7.3. 理解：Panel面板并不是每个属性都可以直接使用

<style type="text/css">

.mypanel {

         position: absolute;

}

</style>

<script type="text/javascript">

         $(function() {

                  $("#p1").panel({//创建一个easyui的组件

                           content : "你好吗???",

                           left : "500px",

                           cls : 'mypanel'

                  });



                  //以下操作都是错误的,因为控件(a,div)一旦变成了一个easyui组件,我们就不能使用"元素对象"操作方式去操作这个组件,我们应该按照easyui组件操作方式.

                  //$("#p1").width("800px");//只能操作body

                  //$("#p1").hide();//只能操作body

                  //$("#p1").attr("title","呵呵");//只能操作body

         });

</script>

</head>

<body>

         <div id="p1" cls="mypanel" title="哈哈" style=" 200px; height: 200px;"></div>

</body>
1. 组件三要素
Easyui组件都具有属性、方法、事件；

8.1. 属性

8.1.1.   定义：属性描述了组件的更多信息

我们通过配置这些属性，可以让easyui提供不同的显示效果或功能，比如面板组件有title属性，iconCls属性，collapsed属性。

8.1.2.   组件默认属性的值

所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。

   $.fn.{pluginName}.defaults , 作用:如果创建组件的时候,我们没有设置组件的属性,那么就使用默认属性.

//panel面板的默认属性

//console.debug($.fn.panel.defaults);

//修改组件的默认属性

//$.fn.panel.defaults.closable = true;

8.1.3.   属性的作用范围

属性只能在创建（初始化）组件有效，组件创建完毕后，如果对某个属性进行了修改无效；

//以下代码修改只是body的属性而已,并不是面板的属性.

$("#p1").attr("title","你的面板");无效

$("#p1").attr("closed","true");无效

属性编写方式，属性可以写在上面地方

8.2. 使用html定义属性的3种方式

8.2.1.         直接作为标签的自定义属性

            <div class="easyui-panel" title="面板标题" closed="true"></div>   title,closed都是自定义属性;

8.2.2.         使用html5中规范data属性. data-options

            <div class="easyui-panel" data-options="title:'面板标题',closed:true"></div>

8.2.3.         以上两种混合使用

            <div class="easyui-panel" title="面板标题" data-options="closed:true"></div>

8.2.4.   以上两种混合的区别

自定义属性的值只能是一个普通的字符串,不能写事件函数名和json数组.

                           <div id="p1" class="easyui-panel" title="我的面板" closed="false" tools="[

                                                      {

                                                               iconCls:'icon-add',

                                                               handler:function(){alert('add')}

                                                      },{

                                                               iconCls:'icon-edit',

                                                               handler:function(){alert('edit')}

                                                      }]">

                                    p1

                           </div>

                           data-options属性的值可以写函数名和json数组.

                           <div id="p1" class="easyui-panel" title="我的面板" closed="false" data-options="tools:[

                                                      {

                                                               iconCls:'icon-add',

                                                               handler:function(){alert('add')}

                                                      },{

                                                               iconCls:'icon-edit',

                                                               handler:function(){alert('edit')}

                                                      }]">

                                    p1

                           </div>

8.2.5.         使用js来创建

使用js创建的时候通过json对象传入

                  $("#p1").panel({

                           title:"标题",

                           closed:false

                  });

<body>

         <div id="p1" class="easyui-panel" title="我的面板" closed="false"> p1     </div>

         <a class="easyui-linkbutton" id="changeTitle">修改面板标题</a>

</body>

8.3. 方法

8.3.1.   创建组件的语法

$('selector').plugin(); //没有传递参数

$('selector').plugin({}); //传递json参数

8.3.2.   调用方法的语法

$('selector').plugin('method', [parameter]);

selector 是jQuery对象选择器。

plugin 是插件的名称。

method 是相应插件现有的方法。

parameter 是参数对象，可以是一个对象、字符串等。

8.3.3.   总结

如果写了easyui组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法,

如果不是一个字符串那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件.

8.3.4.   定义：方法其实就是组件中的某个功能

我们可以调用组件中方法，从而达到我们要求。比如：现在我想隐藏页面中的某个面板。 $(“#mypanel”).panel(“close”);

<script type="text/javascript">$(function(){

         $("#openBtn").on("click",function(){

                  //获取要操作面板

                  var p1 = $("#p1");

                  //一旦一个元素变成一个组件,请使用组件方法来操作它.

                  p1.panel("open"); // 调用panel组件的open方法. 千万别乱搞,p1.open();

         });

         $("#closeBtn").on("click",function(){

                  $("#p1").panel("close");

         });

         $("#loadBtn").on("click",function(){

                  //刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性。

                  $("#p1").panel("refresh","panel_content.txt?hehe=xxx&xxx=aaaa");

         });

});

</script>

<body>

         <a id="openBtn" class="easyui-linkbutton" href="javascript:;">打开面板</a>

         <a id="closeBtn" class="easyui-linkbutton" href="javascript:;">隐藏面板</a>

         <a id="loadBtn" class="easyui-linkbutton" href="javascript:;">加载远程内容</a>

         <div id="p1" class="easyui-panel" href="panel_content.txt" title="我的面板" closed="true">

                  p1111111111111111

         </div>

         <div id="p2" title="我的面板">

                  p2222222222222

         </div>

         <script type="text/javascript">

         //不能使用一个非组件的对象,调用组件方法.

         $("#p2").panel("open");

</script>

<script type="text/javascript">

         $("#p2").panel(); //或者 $("#p2").panel({}); 都代表创建组件,或者就是调用方法.

         $("#p2").panel("open");

</script>



8.3.5.   注意点

如果尝试调用一个非组件的组件方法那么直接报错；

创建组件和调用方法的区别

以上代码调用方法

8.4. 事件

8.4.1.   定义：如果组件发生了什么事情

那么它就会通过事件反应给我们。比如：我们点击tree组件的某个节点，那么就会触发onClick事件。

所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。

注意：注册事件不能采用dom传统方式注册，需要通过组件注册；

8.4.2.   树状菜单

<script type="text/javascript">

$(function() {

         //组件注册事件的写法与属性一模一样.

         $('#tree').tree({

                  //属性和事件

                  animate:true,

                  onClick: function(node){

                           alert(node.text); // 在用户点击的时候提示

                  }

         });

});

</script>

<body>

        <ul id="tree" data-options="url:'tree-data1.json'" ></ul>

</body>

8.4.3.   树需要的Json数据的格式

[

         {

                  "id": 1,

                  "text": "组织机构",

                  "iconCls": "icon-save",

                  "children": [{

                           "id": 11,

                           "text": "部门管理",

                           "iconCls": "icon-ok",

                           "url": "department.action"

                  },{

                           "id": 12,

                           "text": "员工管理",

                           "iconCls": "icon-ok",

                           "url": "employee.action"

                  }]

         },

         {

                  "id": 2,

                  "text": "系统管理",

                  "iconCls": "icon-save",

                  "children": [{

                           "id": 13,

                           "text": "权限管理",

                           "iconCls": "icon-ok",

                           "url": "permission.action"

                  },{

                           "id": 14,

                           "text": "角色管理",

                           "iconCls": "icon-ok",

                           "url": "role.action"

                  }]

         }

]

8.4.4.   因为tree这个树的json格式必须要有输出text的

8.4.5.   ssh输出指定text名称的json

@JSON("name=text")

public String getName(){

return name;

}

8.4.6.   ssm输出指定名称的json

添加一个兼容代码

public String getText(){//给树或者下拉列表

return name;

}

public String getName(){//显示datagrid

return name;

}
1. 右键菜单(上下文菜单)
<script>

$(function() {

         //contextmenu : 右键菜单(上下文菜单)

         $(document).on('contextmenu', function(event) {

                  //event 事件对象: 描述了事件发生时所有的信息,包含事件名,事件源,触发事件的坐标.

                  event.preventDefault();//阻止浏览器默认事件

                  $("#mm").menu("show", {

                           left : event.pageX,

                           top : event.pageY

                  });

         });

});

</script>

</head>

<body>

         

<div id="mm" class="easyui-menu" style=" 120px;">

         <div onclick="javascript:alert('new')">New</div>

         <div>

                  <span>Open</span>

                  <div style=" 150px;">

                           <div>

                                    <span>M1</span>

                                    <div style=" 120px;">

                                                      <div>sub1</div>

                                                      <div>sub2</div>

                                                      <div>sub3</div>

                                             </div>

                                    </div>

                           </div>

                  </div>

                  <div data-options="iconCls:'icon-save'">Save</div>

                  <div data-options="iconCls:'icon-print',disabled:true">Print</div>

                  <div class="menu-sep"></div>

                  <div>Exit</div>

         </div>

</body>
1. 课程总结
10.1. 重点
1. 怎样使用easyui，LinkButton,Panel,Tree
2. Tree返回的json数据的格式
10.2. 难点
1. Html的方式创建组件的原理：本质还是js的方式，理解，面试
2. 区分怎样是创建组件，调用方法
3. 常见异常
4. TypeError: $.data(...) is undefined
尝试调用一个非组件的组件方法那么直接报错；

<div id="p" 普通的div

style=" 500px; height: 200px; padding: 10px;" title="My Panel"

iconCls="icon-save" collapsible="true">The panel content</div>

$("#p").panel("close");
1. 课后练习
2. 自学easyui的datagrid
步骤1：把easyui目录拷贝到pss的webapp下面，把今天写的common.jsp里面拷贝里面的内容到datagrid.jsp

步骤2：把pss打一个勾

步骤3：修改tomcat/config/server.xml指向pss/src/main/webapp

步骤4：下面的第一步

案例web路径

http://localhost:8888/demo/main/index.php?plugin=Application&theme=metro&dir=ltr&pitem=
1. 面试题
2. 扩展知识或课外阅读推荐
14.1. 扩展知识

14.2. 课外阅读
1. 怎样才能学会easyui
先看官方案例

http://localhost:8888/demo/main/index.php
查看全文

相关阅读:
VS中编码格式的问题(待总结)
第一次搭建Eureka服务器的虐心之路
 Eureka相关
 【移动开发】SparseArray替代HashMap
【移动开发】plurals
皮尔森相似度计算举例(R语言)
据说，年薪百万的程序员，都是这么开悟的
 RDD：基于内存的集群计算容错抽象
 使用IDEA运行Spark程序
 scala for spark

原文地址：https://www.cnblogs.com/Src-z/p/11218856.html

jQuery EasyUI学习一

1. jQuery EasyUI介绍