Accordion 是一个 收缩的组件

类似挂历的

百度了一下

意思是

accordion 英[əˈkɔ:diən]
美[əˈkɔrdiən] n. 手风琴
adj. 可折叠的

他就是 一个折叠的 很适合 做菜单

使用方法

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>

这样 就是一个大的div 的accordion 里面有三个 可折叠的 panel

我们 可以在某个panel 中去加载 一个 别的 页面

var pp = $('#aa').accordion('getSelected'); // get the selected panel     

 if (pp){     

     pp.panel('refresh','new_content.aspx');  // call 'refresh' method to load new content     

 }  

这样 每次 以选择 某个页面 就会 去 加载某个独立的页面'new_content.aspx' 的 内容 显示出来

在 chm文档中的 Container Options

表示 是 容器的一些属性

Name Type Description Default
width number The width of accordion container. auto
height number The height of accordion container. auto
fit boolean Set to true to set the accordion container size fit it's parent container. false
border boolean Defines if to show the border. true
animate boolean Defines if to show animation effect when expand or collapse panel. true

其中 animate 属性 表示 是否 显示 画册效果

当然 我们 也可以 动态的 通过 js 添加 属性

$('#aa').accordion('add', {
title: 'New Title',
content: 'New Content',
selected: false
});

下载地址

http://pan.baidu.com/s/1eQ3hhgY

Easyui入门视频教程 第07集---Accordion的使用的更多相关文章

  1. Easyui入门视频教程 第11集---Window的使用

    目录 Easyui入门视频教程 第11集---Window的使用   Easyui入门视频教程 第10集---Messager的使用  Easyui入门视频教程 第09集---登录完善 图标自定义   ...

  2. Easyui入门视频教程 第09集---登录完善 图标自定义

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  3. Easyui入门视频教程 第08集---登录实现 ajax button的使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  4. Easyui入门视频教程 第06集---Layout初始化和属性方法使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  5. Easyui入门视频教程 第05集---Easyui复杂布局

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  6. Easyui入门视频教程 第04集---Easyui布局

    目录 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的 ...

  7. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...

  8. Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境

    Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标 ...

  9. Easyui入门视频教程 第01集---认识Easyui

    认识EasyUI 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax b ...

随机推荐

  1. cesium原理篇(二)--网格划分【转】

    转自:http://www.cnblogs.com/fuckgiser/p/5772077.html 上一篇我们从宏观上介绍了Cesium的渲染过程,本章延续上一章的内容,详细介绍一下Cesium网格 ...

  2. Http协议中Get和Post的浅谈

    起名困难户,每次写文章最愁的就是不知道该如何起个稍具内涵的名字,如果这篇文章我只是写写Get和Post的区别,我可以起个名字“Get和Post的那点事”,如果打算阐述一下Http协议原理性内容,那该叫 ...

  3. Neo4j 2.0 生产环境集群搭建

    一.在windows上搭建Neo4j ha cluster的配置方法: 例如:建立集群的三台机器的ip分别为:10.230.9.91,10.230.9.92,10.230.9.93. 10.230.9 ...

  4. 【python3】集合set (转)

    https://www.cnblogs.com/onepeace/p/4791578.html set原理 Python 还 包 含 了 一 个 数 据 类 型—— set ( 集 合 ) . 集 合 ...

  5. OnBecameVisible和OnBecameInvisible ,OnWillRenderObject

    OnBecameVisible 和 OnBecameInvisible ,OnWillRenderObject 只有在所挂物体(不包括子物体)有render才有效 //可见 private void ...

  6. matlab中subplot函数的功能 类似python

    原文:http://blog.163.com/my_it_dream_pwj/blog/static/17841430520112294342649/ 和python 中类似 subplot 功能 分 ...

  7. Window.sessionStorage

      The sessionStorage property allows you to access a session Storage object for the current origin. ...

  8. Maven镜像收集

    本贴主要收集国内国外速度比较快的maven镜像,OSC的MAVEN已经关闭了 0.阿里Maven镜像 setting.xml https://github.com/ae6623/Zebra/blob/ ...

  9. linux不解压超大日志gz包直接查找特定内容

    gzip -dc myfile.gz | grep 'Exception' | more 或者 gzip -c myfile.gz | grep 'Exception' | more

  10. C++中引用传递与指针传递的区别

    最近Garena面试的过程中,面试官提了一个问题,C++中引用传递和指针传递的区别? 根据自己的经验,联想到了swap函数,只知道既可以用引用来实现,又可以用指针传递来实现,至于二者有何区别,自己还真 ...