panel笔记:

      

EASYUI

panel:
class:easyui-panel,带有title
打开:onclick="javascript:$('#c').panel('open')"
关闭:onclick="javascript:$('#c').panel('close')"
展开:onclick="javascript:$('#panel').panel('expand',true)"
折叠:onclick="javascript:$('#panel').panel('collapse',true)"
页脚:data-options="footer:'#footer'"//将id为footer的容器作为页脚

关闭(右上角小工具):data-options="closable:true"
折叠展开(右上角小工具):collapsible:true
类似局部刷新(右上角小工具):data-options="
tools:[{
iconCls:'icon-reload',
handler:function(){
$('#p').panel('refresh', '_content.html');//#p为被刷新的容器,_content.html代表的是将那个页面内容加进来
}
}]
布局(放置在panel内部):
<div class="easyui-layout" data-options="fit:true">
  <div data-options="region:'west',split:true" style="width:100px;padding:10px">
    Left Content
  </div>
  <div data-options="region:'east'" style="width:100px;padding:10px">
    Right Content
  </div>
  <div data-options="region:'center'" style="padding:10px">
    Center Content
  </div>
</div>

1.连接好easyui

2.开始

<div class="easyui-panel" style="width: 100%;height:650px;">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#panel').panel('open')">打开事件</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#panel').panel('close')">关闭事件</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#panel').panel('expand',true)">展开</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#panel').panel('collapse',true)">折叠</a>
<div id="panel" style="width:700px;height:200px;padding:10px;" class="easyui-panel"

data-options="closable:true,collapsible:true,minimizable:true,maximizable:true,footer:'#footer',

tools:[{

iconCls:'icon-reload',

handler:function(){

  $('#panel').panel('refresh', '_content.html');
}
}]" title="这是一个panel">
  <div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',split:true" style="width:100px;padding:10px">
      Left Content
    </div>
    <div data-options="region:'east'" style="width:100px;padding:10px">
      Right Content
    </div>
    <div data-options="region:'center'" style="padding:10px">
      Center Content
    </div>
    </div>
    <div id="footer" style="padding:5px;">主意这是一个页脚</div>
  </div>
</div>

3.效果图

    

easyui---panel(面板)的更多相关文章

  1. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  2. EasyUI - Panel 面板控件

    效果: html代码: <div id="p" style="padding: 10px;"> <p>panel content.< ...

  3. EasyUI Accordion下的Panel面板初始化时全部折叠

    EasyUI Accordion下的Panel面板有一个属性:selected,默认值为:false.初始化时,若设置'selected:true',则面板默认打开,效果如下: <div tit ...

  4. 第一百九十九节,jQuery EasyUI,Panel(面板)组件

    jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

  5. EasyUI系列学习(九)-Panel(面板)

    一.加载方式 1.class加载 <div class="easyui-panel" title="面板一" style="width:500p ...

  6. easyUI panel组件

    easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  8. Html - Bootstrap Panel面板

    http://v3.bootcss.com/components/#panels Bootstrap Panel面板 <div class="panel panel-default&q ...

  9. 修改easyui panel 默认样式

    有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就 ...

  10. fedora23然后创建workspace?或者说是panel面板?

    好像在fedora23中 无法再添加工作空间workspace. 系统会自动的在非空工作空间后面再生成一个空的工作空间. 而且 工作空间 好像不只 4个, 可以有很多个. panel面板好像也不能添加 ...

随机推荐

  1. 1--单独使用jdbc开发问题总结

    1.数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭,造成数据库资源浪费,影响 数据库性能. 设想:使用数据库连接池管理数据库连接. 2.将sql语句硬编码到java代码中,如 ...

  2. 【详解】苹果AppStore审核被拒,原因终逃不过这些!

    近日,相信很多开发者都留意到了: 苹果针对应用标题的审核确有明显的变严趋势!我们在<惊!苹果再次加强审核力度,众App纷纷止步应用标题>中也对该现象进行了详细的分析,并给出了相应的解决方案 ...

  3. JS事件派发器EventEmitter

    原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html 需求 随着Browser客户端JS越来越复杂,MVC(Client端)设计 ...

  4. 分享知识-快乐自己:全面解析 java注解实战指南

    请你在看这篇文章时,不要感到枯燥,从头到尾一行行看,代码一行行读,你一定会有所收获的. 问: 为什么学习注解? 学习注解有什么好处? 学完能做什么? 答: 1):能够读懂别人的代码,特别是框架相关的代 ...

  5. 机器学习(九)—逻辑回归与SVM区别

    逻辑回归详细推导:http://lib.csdn.net/article/machinelearning/35119 面试常见问题:https://www.cnblogs.com/ModifyRong ...

  6. 「P3385」【模板】负环(spfa

    题目描述 暴力枚举/SPFA/Bellman-ford/奇怪的贪心/超神搜索 输入输出格式 输入格式: 第一行一个正整数T表示数据组数,对于每组数据: 第一行两个正整数N M,表示图有N个顶点,M条边 ...

  7. Data Guard 异构平台支持手册

    背景 最简单的DG 环境是同数据库版本,同操作系统平台. 但有时需要在异构平台上来部署DG 环境,比如异构下使用DG 来进行数据迁移,从而降低停机时间和风险等等. 1. 查看主备库的Platform ...

  8. 中国移动推出NB-IoT/eMTC/GSM多模通信模组Qualcomm调制解调器支持

    亚洲电子消费展(CES Asia)在上海举行.期间,中国移动正式推出NB-IoT/eMTC/GSM三模通信模组A9500.该通信模组采用Qualcomm MDM9206 LTE IoT调制解调器,具有 ...

  9. Java面试知识点总结(1)

    1.Java中的原始数据类型都有哪些,它们的大小及对应的封装类是什么? 原始数据类型 大小(byte) 对应封装类型 boolean 1或4 Boolean byte 1 Byte short 2 S ...

  10. win 10 无线标志都不出现

    http://jingyan.baidu.com/article/e75057f2fdd2f1ebc91a89f1.html ipconfig /flushdns netsh winsock rese ...