加载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. win7 IIS7 发布网站遇到 HTTP 错误 500.19 由于权限不足

    win7 IIS7 发布网站遇到 HTTP 错误 500.19 - Internal Server Error 一看是5xx错误,就知道是服务器的问题,网上查了下,原来是权限问题 解决方法       ...

  2. nginx配置http协议和tcp协议配置文件案例

    注意 nginx 1.9版本之后才支持 tcp #user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/e ...

  3. web实现QQ头像上传截取功能

    由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传 ...

  4. iOS中js与objective-c的交互(转)

    因为在iOS中没有WebKit.Framework这个库的,所以也就没有 windowScriptObject对象方法了.要是有这个的方法的话 就方便多了,(ps:MacOS中有貌似) 现在我们利用其 ...

  5. WAMP运行分析

  6. goto的用法

    using UnityEngine; using System.Collections; public class goto1 : MonoBehaviour { public bool can = ...

  7. MVC的初步认识理论

    说起来写博客可以说一个月没来啦,我们狠狠的放假一个月,想一想都奇怪.而是想一下以后的假期还会这样吗?或许这是作为学生的我们的最后一个长的假期啦,以后就要面对工作再也没有寒假暑假之分啦,在这一个月的时间 ...

  8. .net垃圾收集机制【转】

    在.NET Framework中,内存中的资源(即所有二进制信息的集合)分为"托管资源"和"非托管资源".托管资源必须接受.NET Framework的CLR( ...

  9. codeforcess水题100道

    之所以在codeforces上找这100道水题的原因是为了巩固我对最近学的编程语言的掌握程度. 找的方式在codeforces上的PROBLEMSET中过的题最多的那些题里面出现的最前面的10个题型, ...

  10. 《转》win7 安装ujson 出现的“error: Microsoft Visual C++ 9.0 is required. Get it from http://aka.ms/vcpython27”

    本文转载自http://blog.csdn.net/Tilyp/article/details/72842800?locationNum=2&fps=1 我的python环境是 D:\work ...