加载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. LTS原理分析（version:1.6.9）

    LTS做到分布式唯一执行的原理:LTS采用类似Hadoop作业提交的方式,由JobClient submit作业任务给JobTracker,然后JobTracker会预生成一批作业任务的执行时间记录( ...

  2. 8 -- 深入使用Spring -- 2...4 使用@PostConstruct和@PreDestroy定制生命周期行为

    8.2.4 使用@PostConstruct和@PreDestroy定制生命周期行为 @PostConstruct 和 @PreDestroy 同样位于javax.annotation 包下,也是来自 ...

  3. cocos2d-x 3.0 在lua中调用自定义类

    环境 windows8, cocos2d-x 3.0, 现在开始安装需要的一些其它包 1. 按README.mdown文档上面要求的, 下载在windows下要安装的东东, 主要就是python2.7 ...

  4. python BeautifulSoup库用法总结

    1. Beautiful Soup 简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: Beautiful Soup提供一些简单的.pyt ...

  5. 【安全开发】Android安全编码规范

    申明:本文非笔者原创,原文转载自:https://github.com/SecurityPaper/SecurityPaper-web/blob/master/_posts/2.SDL%E8%A7%8 ...

  6. SimpleDateFormat 取当前周的周一和周日的日期，当前月第一个和最后一天的日期

    /** * 类说明 :以及获取当前周的周一和周日的日期,当前月第一个和最后一天的日期 * 日期格式化:格式参数  G 年代标志符  y 年 M 月 d 日    h 时 在上午或下午 (1~12)  ...

  7. CentOS配制FTP服务器，并且能用root权限登录

    步骤如下: 1.运行yum install vsftpd命令 具体的细节如下:(如果无法更新,你先配置能访问互联网,我有文档叫 CentOS 在 VMware下,如何联网到Internet的解决办法可 ...

  8. C语言中打印返回值

    demo: ----return :返回值------------------ int mosquitto_username_pw_set(struct mosquitto *mosq, const ...

  9. N76E003之SPI

    串行外围总线 (SPI)N76E003系列提供支持高速串行通信的SPI模块.SPI 为微控制与外设 EEPROM, LCD 驱动, D/A 转换之间提供全双工.高速.同步传输的总线.可提供主机从机模式 ...

  10. 有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

    本文转载至 http://www.cnblogs.com/ios122/p/4832859.html Apple 算是最重视应用开发体验的公司了.从Xib到StoryBoard,从Auto Layou ...