EasyUI中的panel组件在前面一节中我们简单告诉了大家代码如何写。这一节我们会从panel的入门级开始讲起走，重点包括它的事件监听，属性tool介绍

1. 事件监听-通过data-options方式实现

<div class=”easyui-panel” data-options=”width…..” data-options=”onCollapse:function() {console.log(‘Hello Wrold’);}”>

2. 事件监听-通过JS创建组件并定义事件监听

<script type="text/javascript">

    $(function() {

        $("#d01").panel({

            width: 500,

            height: 200,

            iconCls: 'icon-save',

            collapsible: true,

            title: '我的面板',

            onCollapse: function() {

                console.log('Hello World');

            }

        });

    });

</script>

<div id="d01">

    我的第一个easyui程序

</div>

3. easyui-panel组件扩展，主要使用tools

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<!--

1.引入jquery.min.js

2.引入jquery.easyui.min.js

3.引入jqueryeasyui的css

4.引入国际化资源文件

EasyUI创建组件有两种方式

1.html方式创建（推荐使用data-options方式来添加组件属性, data-options方式是html5）

2.js方式创建, 属性的添加是一种json格式风格

 -->

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

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

<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/locale/easyui-lang-zh_CN.js"></script>

</head>

<body>

<div class="easyui-panel" style="width:500px;height:200px;padding:10px;" data-options="iconCls:'icon-save',collapsible:true,title:'我的面板',tools:'#tt'">

    我的第一个easyui程序

</div>

<div id="tt">

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

    <a href="#" class="icon-edit" onclick="javascript:alert('icon-edit');"></a>

</div>

</body>

</html>

[刘阳Java]_easyui-panel组件入门级_第3讲的更多相关文章

  1. [刘阳Java]_Spring常用注解介绍_第6讲

    Spring的注解是在Spring2.5的版本中引入的,目的简化XML配置.在企业开发过程中使用注解的频率非常高,但是学习注解的前提是大家一定要对Spring基于XML配置要熟悉,这是我个人建议,因为 ...

  2. [刘阳Java]_SpringMVC访问静态资源_第9讲

    有些时候我们在使用SpringMVC的时候造成无法访问静态资源文件(如:html,js,css,image等等).其主要的原因出在web.xml文件我们设置SpringMVC前端控制器的映射路径 &l ...

  3. [刘阳Java]_BeanNameViewResolver视图解析器_第8讲

    BeanNameViewResolver:这个视图解析器跟XmlViewResolver有点类似,也是通过把返回的逻辑视图名称去匹配定义好的视图bean对象.它要求视图bean对象都定义在Spring ...

  4. [刘阳Java]_ResourceBundleViewResolver视图解析器_第7讲

    ResourceBundleViewResolver是根据proterties文件来找对应的视图来解析"逻辑视图".该properties文件默认是放在classpath路径下的v ...

  5. [刘阳Java]_Spring相关配置介绍_第5讲

    这一节我们介绍一下Spring框架的相关常用配置 Spring依赖注入的两种方式(构造方法注入和setter方式注入) p-namespace方式配置 properties属性文件配置方式 集合对象配 ...

  6. [刘阳Java]_MyBatis_注解基本用法_第10讲

    MyBatis注解提出,可以说是非常好简化了MyBatis配置文件的使用.下面我们简单地来告诉大家如何使用MyBatis的注解 定义接口 package com.gxa.dao; import jav ...

  7. [刘阳Java]_MyBatis_实体关系映射_第8讲

    MyBatis既然是一个ORM框架,则它也有像Hibernate那样的一对多,多对多,多对一的实体关系映射功能.下面我们就来介绍一下如何使用MyBatis的实体关系映射 1.MyBatis实体关系映射 ...

  8. [刘阳Java]_InternalResourceViewResolver视图解析器_第6讲

    SpringMVC在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就需要通过视图解析器 InternalResourceViewResolver是SpringMVC中比较常用视图解析器. 网 ...

  9. [刘阳Java]_EasyUI环境搭建_第2讲

    在EasyUI的第1讲中我们介绍了学习EasyUI能够做什么,这次我们得快速搭建一个EasyUI环境,来测试一下它的运行效果 1.jQuery EasyUI环境搭建 <script type=& ...

随机推荐

  1. ALD技术，相机去噪，图像传感器

    ALD技术,相机去噪,图像传感器 1. 作为镜片的防反射涂层技术被关注的ALD(atomic layer deposition)的引入趋势. (a)为什么需要一种新的防止反射的涂层技术? ALD被认为 ...

  2. 怎样训练YOLOv3

    怎样训练YOLOv3 Training YOLOv3 : Deep Learning based Custom Object Detector 本文将在一些公开的雪人图片和视频上分享训练过程.有助于训 ...

  3. 视频系列：RTX实时射线追踪（下）

    视频系列:RTX实时射线追踪(下) Key things from part 4 光线有效载荷是从一个着色器传递到另一个着色器的结构. 这一切都发生在RTX的引擎下. 更小的有效载荷要好得多! 新的D ...

  4. Task02：基础查询与排序

    2.1 SELECT语句基础 2.1.1 从表中选取数据 SELECT语句 从表中选取数据时需要使用SELECT语句,也就是只从表中选出(SELECT)必要数据的意思.通过SELECT语句查询并选取出 ...

  5. 【NX二次开发】设置了“附加包含目录”，还是提示“无法打开包括文件”的解决方法

    项目属性中的"附加包含目录"路径完全正确,但是还是无法找到头文件: 这个问题我遇到过不止一次,纠结了很久,终于发现了解决方法: 改为: 问题解决! 分析原因:项目中的属性配置 与 ...

  6. 「10.11」chess(DP,组合数学)·array(单调栈)·ants(莫队,并茶几)

    菜鸡wwb因为想不出口胡题所以来写题解了 A. chess 昨天晚上考试,有点困 开考先花五分钟扫了一边题,好开始肝$T1$ 看了一眼$m$的范围很大,第一反应矩阵快速幂?? $n$很小,那么可以打$ ...

  7. 【模拟8.09】建设城市（city） （容斥）

    放在了考试T1 发现70分的DP很水啊,f[i][j]为当前位置是i分配了j个队的方案 我们用前缀和统计,在将i删去,j倒序枚举,就可以删掉一维(也可以滚动数组滚起来) 1 #include<i ...

  8. SprignBoot是如何访问工程目录下的静态资源？

    ​ 目录 1.牛刀小试 1.1 图片静态资源的访问 1.2 为静态资源添加访问前缀 1.3  WelCome Page 的奇妙跳转 2.那么,SpringBoot是如何做到的呢? ​​​​​​​ 1. ...

  9. Mongo写入安全机制

    写入安全(Write Concern) 是一种客户端设置,用于控制写入的安全级别.默认况下,插入.删除和更新都会一直等待数据库响应(写入是否成功),然后才会继续执行.通常,遇到错误时,客户端会抛出一个 ...

  10. [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark

    [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark 目录 [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark ...