加载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. python对日志处理的封装

    一个适应性范围较广的日志处理 # coding=utf8 """ @author bfzs """ import os import log ...

  2. Java单例模式的应用

    单例模式用于保证在程序的运行期间某个类有且仅有一个实例.其优势在于尽可能解决系统资源.通过修改构造方法的访问权限就可以实现单例模式. 代码如下: public class Emperor { priv ...

  3. jdbc数据访问技术

    jdbc数据访问技术 1.JDBC如何做事务处理? Con.setAutoCommit(false) Con.commit(); Con.rollback(); 2.写出几个在Jdbc中常用的接口 p ...

  4. Lua协程-测试3

    print("Lua 协程测试3") -- 实现消费者-生产者关系(生产一个就消费一个) count = -- 生产总数 -- 生产者 local newProductorCo = ...

  5. 【代码审计】LaySNS_v2.2.0 System.php页面存在代码执行漏洞分析.

      0x00 环境准备 LaySNS官网:http://www.laysns.com/ 网站源码版本:LaySNS_v2.2.0 程序源码下载:https://pan.lanzou.com/i0l38 ...

  6. [C/E] 等差数列求和

    题目:要求给定一个整数 N,求从 0 到 N 之间所有整数相加之和. 解1:使用 for 循环依次递加. #include <stdio.h> int main(void){ int x; ...

  7. 团购已满,O2O只是个笑话吗？

    团购的用户习惯经过多年的“发酵”以后,大多数用户的团购习惯已经养成,同样一张电影票团购和直接现场购买的差价在一倍以上,当然O2O领域的其他情况也差不多,面对明显的“优惠”,用户当然乐意使用团购服务. ...

  8. 扩展方法以及LinQ的学习

    我们今天学习的内容其实还是蛮多的,学习了自动属性,扩展方法,复习初始化器,以及LinQ的一些方法,其实感觉有些还是很熟悉的,在前面的学习过程中有时间感觉学习的知识知道了怎么使用,但是还没有在项目中使用 ...

  9. Myeclipse10使用git

    用Myeclipse安装egit,使用官网最新地址或者下载最新的egit插件到本地安装均在team中看不到git,最后发现到http://download.eclipse.org/egit/updat ...

  10. 《转》Robot Framework 的安装配置和简单的实例介绍

    Robot Framework 介绍 Robot Framework 是一款基于 Python 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...