加载easyui有两种方式：1种是html方式加载，1种是js加载。 要加载内容非常多时，用js,如果加载的东西比较少，用html就可以了。

panel组件：面板 就是头 身展示 ，一个滚动条，几个关闭等小控件

html方式加载：

一个div,加上class="easyui-panel" class里面都是easy-组件形式。

<body>

<div id="panelid"  class="easyui-panel"></div>

</body>

给panel加个宽高，

<body>

<div id="panelid"  class="easyui-panel" style="width:300px;height:300px"></div>

</body>

加个title标记，<div id="panelid"  class="easyui-panel" style="width:300px;height:300px" title="这是头部信息"></div>

身体部分，不能再html里面加content,没效果，直接在div中输入内容

<div id="panelid"  class="easyui-panel" style="width:300px;height:300px" title="这是头部信息" >

我是内容

</div>

iconCls:图标，在引入easyui icon css找到            是iconClass简写

<body>

<div id="panelid"  class="easyui-panel" style="width:300px;height:300px" title="这是头部信息" iconCls="icon-save">

我是内容

</div>

closable 是否显示关闭按钮

</head>

<body>

<div id="panelid"  class="easyui-panel" style="width:300px;height:300px" title="这是头部信息" iconCls="icon-save" closable="true">

我是内容

</div>

collapsible 显示折叠按钮，collapsed是初始时，显示折叠还是 展开

<div id="panelid"  class="easyui-panel" style="width:300px;height:300px" title="这是头部信息" iconCls="icon-save" closable="true" collapsible="true">
collapsible 英[kəˈlæpsəbl] 美[kəˈlæpsəbl:]
  可折叠的，可拆卸的;

minimizable="true" maximizable=true ，最大化，最小化

如果内容分行的，<p><p>独占一行

<body>

<div id="panelid"  class="easyui-panel" style="width:300px;height:300px" title="这是头部信息" iconCls="icon-save" closable="true" collapsible="true" minimizable="true" maximizable=true>

<p>我是内容</p>

<p>我是内容</p>

<p>我是内容</p>

<p>我是内容</p>

</div>

</body>

js来加载easyui组件

必须onload中，加载什么组件，就jquery获取div对象，.什么组件

<script>

$(function(){

    $("#panelid").panel({

    })

})

</script>

</head>

<body>

<div id="panelid" ></div>

</body>

这就相当于在里面声明class="easyui-panel"

注意里面是option的json格式

<script>

$(function(){

    $("#panelid").panel({

        width:,

           height:,

          title: 'My Panel'

    })

})

</script>

</head>

<body>

<div id="panelid" ></div>

</body>

这里面有content选项

$(function(){

    $("#panelid").panel({

        width:,

           height:,

          title: 'My Panel',

          content:"aaaa"

    })

})

tools自定义工具组，每个工具包含两个特性：

iconCls和handler

$("#panelid").panel({

        width:,

           height:,

          title: 'My Panel',

          content:"aaaa",

          iconCls:"icon-edit",

          collapsible:"true",

          minimizable:"true",

          maximizable:"true",

          closable:"true",

          tools: [{   

              iconCls:'icon-add',   

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

        },{   

               iconCls:'icon-save'  ,

             handler:function(){alert('save')}   点击工具，触发的事件

              }]   

    })

easyui---基础组件：panel的更多相关文章

  1. Easyui部分组件讲解

    Easyui部分组件讲解 目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBo ...

  2. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...

  3. Ext学习-基础组件介绍

    1.目标    学习对象获取,组件基础,事件模型以及学习ExtJS中的基础组件的应用. 2.内容   1.对象获取   2.组件原理以及基础   3.事件模型   4.常用组件的介绍 3.学习步骤 1 ...

  4. EasyUI基础入门之Parser(解析器)

    前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...

  5. Ext JS 6学习文档-第3章-基础组件

    Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...

  6. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

  7. CentOS安装LNMP环境的基础组件

    注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. 在安装LNMP环境之前,请确保已经使用yum安装了以下各类基础组件(如果系统已自带,还可以考虑yum update下基础组件): ...

  8. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  9. 如何从零开始实现一个soa远程调用服务基础组件

    说起soa远程调用基础组件,最著名的莫过于淘宝的dubbo了,目前很多的大型互联网公司都有一套自己的远程服务调用分布式框架,或者是使用开源的(例如dubbo),或者是自己基于某种协议(例如hessia ...

  10. android学习——必学基础组件

    android基础组件是一个Android的开发人员必须要了解,且深刻理解的东西: 1.应用程序基础 2.应用程序组件 2.1.活动(Activities) 2.2.服务(Services) 2.3. ...

随机推荐

  1. linux 安装lnmp

    wget -c http://soft.vpser.net/lnmp/lnmp1.4.tar.gz && tar zxf lnmp1.4.tar.gz && cd ln ...

  2. MongoDB 2.4企业版分析

    作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs MongoDB v2.4版于3月19日发布,它引入了内置的文本搜索功能,以及基于哈希的分片和众所期盼的安全 ...

  3. FileSaver.js 浏览器导出Excel文件

    限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自 FileSaver.js): Browser Constructs as Filenames Max Blob Size ...

  4. Javascript获取IFrame内容(兼容IE&FF)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://wintys.blog.51cto.com/425414/123303 作者: W ...

  5. MFC之自绘控件

    在描绘MFC界面时,MFC自带的控件样式是绝对不满足界面的需求的. 所以我们就要在MFC自带控件基础上对控件样式进行重绘. 在采用自绘前界面样式 采用自绘后界面样式 是不是自绘控件后看起来正常了很多? ...

  6. Kafka与Flink集成

    Apache Flink是新一代的分布式流式数据处理框架,它统一的处理引擎既可以处理批数据(batch data)也可以处理流式数据(streaming data).在实际场景中,Flink利用Apa ...

  7. mybayis 之resultType="map"

    List<Map> publishInfos = memberShareMapper.shareToCouponCountGroupByPublishId(memberShare.getA ...

  8. 解决react-router 的activeClassName 首页重复匹配问题

    首先先看一下我的inedx.js入口文件: 这是未点击的时候index默认的是选中状态, 这是我点击其他的路由之后:,明显index路由重复了,仔细看了官方文档之后,发现其实Navlink也应该使用e ...

  9. Linux用户态程序计时方式详解

    前言 良好的计时器可帮助程序开发人员确定程序的性能瓶颈,或对不同算法进行性能比较.但要精确测量程序的运行时间并不容易,因为进程切换.中断.共享的多用户.网络流量.高速缓存访问及转移预测等因素都会对程序 ...

  10. c++ 类前置声明【转】

    [转自 here] 在编写C++程序的时候,偶尔需要用到前置声明(Forward declaration).下面的程序中,带注释的那行就是类B的前置说明.这是必须的,因为类A中用到了类B,而类B的声明 ...