加载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. selenium chrome登陆手机 pc淘宝

    接口登录淘宝,困难度极高,没有人已经实现过. 淘宝登录selenium 手机版  pc版. 由于每天需要使用ip代理大批量的异地登录淘宝帐号,这种情况必然会出现淘宝滑动验证码,使用ActionChai ...

  2. MAP参数估计

    (学习这部分内容大约需要40分钟) 摘要 在贝叶斯参数估计中, 除了先验是特别选定的情况下, 通常要积分掉所有模型参数是没有解析解的. 在这种情况下, 最大后验(maximum a posterior ...

  3. [OpenCV] Samples 03: kmeans

    注意Mat作为kmeans的参数的含义. 扩展:高维向量的聚类. 一.像素聚类 #include "opencv2/highgui.hpp" #include "open ...

  4. c#系统消息类封装

    今天封装了一个返回json的消息类 using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  5. 项目管理PMP输入输出ITTO联系记忆

    综述九大领域 项目管理的输入输出非常难记,原因在于理解起来也经不去推敲,故整理一个联想记忆版本,通过联想把输入输出都串起来达到记忆的目的,既然是联想,里面的内容逻辑只是为了好记,并无正确与否,请大家原 ...

  6. photoshop制作简单ico图标

    新建16 * 16透明画布 字体20px 半径4px

  7. Linux最大打开文件描述符数

    1.    系统最大打开文件描述符数:/proc/sys/fs/file-max a.    查看 $ cat /proc/sys/fs/file-max 186405 2. 设置 a.    临时性 ...

  8. 在 Ubuntu 13.10 安装 PyCharm 3.0.1 & Oracle JDK

    由于授权问题,在较新的Linux发行版本中都不再包含Oracle Java,取而代之的是OpenJDK.Ubuntu也是如此. OpenJDK能满足大部分的应用程序运行条件,但PyCharm无法在Op ...

  9. C++ template —— 模板特化（五）

    本篇讲解模板特化-------------------------------------------------------------------------------------------- ...

  10. WINDOWS消息和窗口简介

    一.WINDOWS的消息和窗口简介:1.什么是windows在这里我就不介绍了,但是作为一个程序员我们要知道WINDOWS最重要的一个也是我们程序员常用的一个东西就是消息.窗口是以消息的形式输入的,窗 ...