Accordion 可伸缩的面板组件。基于panel,示为以下的比率：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

	<script type="text/javascript" src="easyui/jquery.min.js"></script>

	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>

	<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" />

	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

  <title>Document</title>

  <script>

		$(function(){

			$('#ac').accordion({

				//面板属性

				animate:true,	//定义展开和折叠的时候是否显示动画效果

				width:600,		//面板宽度

				height:200,		//面板高度

				fit	:false,		//自适应父容器 默认false  在此例中就是浏览器。设置为true面板会铺满浏览器

				border:true,	//是否显示边框

				multiple:false,	//能否够同一时候展示多个面板1.3.5可用

				selected:0,		//设置默认展开的顺序号

				//面板操作触发事件

				//面板被选中时触发事件

				onSelect:function(title,index){

					//alert(title+':'+index)

				}

				//onUnselect

				//onAdd

				//onBeforeRemove

				//onRemove

				//组件的方法

			}); 

			/**以下是accordion组件提供的一系列可调用的方法*/

			//alert($("ac").accordion("options").width)//获取组件对象的某个属性

			var panels =  $("#ac").accordion("panels");//返回的是panel数组,即每个单独面板,能够应用panel的属性

			//alert(panels[0].panel('options').width);

			$("#ac").accordion("resize");	//调整面板大小

			var selectedPanel=$("#ac").accordion("getSelected");//获取选中的面板

			var selectedPanels=$("#ac").accordion("getSelections");//获取全部选中的面板

			var panel=$("#ac").accordion("getPanel",2);//获取指定的面板，參数能够是面板编号和面板tatle

			var index = $('#ac').accordion('getPanelIndex', selectedPanel);//获取指定面板在accordion中的索引 ，參数是某个panel

			$("#ac").accordion("select",2);//指定被选中的面板 參数是面板编号或者title

			$("#ac").accordion("unselect",1);//跟上一个方法相相应

			//加入一个新的面板,为新面板指定属性

			$('#ac').accordion('add', {

				title: '新标题',

				content: '新内容',

				selected: false

			});

			$("#ac").accordion("remove",1)//移除一个面板，參数是面板编号或者title

		})

  </script>

 </head>

 <body>

<div id="ac" >

    <div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">

    </div>

    <div title="Title2" iconCls="icon-reload" split:true " style="padding:10px;">

    </div>

    <div title="Title3" iconCls="icon-edit">

    </div>

</div>

 </body>

</html>

点击这里下载源代码

版权声明：本文博客原创文章，博客，未经同意，不得转载。

jQuery Easy UI Accordion(可伸缩的面板)包的更多相关文章

  1. jQuery Easy UI LinkButton(button)包

    LinkButton(button)包,easyui其中一个基本组成部分 演示样例: <!DOCTYPE html> <html> <head> <title ...

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

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

  3. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  4. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  6. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  7. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  9. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

随机推荐

  1. C语言程序代写(QQ:928900200)

    1.学生成绩统计 要求描述: 用结构数组实现学生信息的统计功能. struct student { long no; /*学号*/ char name[10]; /*姓名*/ char sex; /* ...

  2. SQL Server提高并发查询效率

    同事写了个程序用创建多个线程使用ado同时对同个数据库进行相同的查询,涉及2张数据表的联查.当线程数非常多的情况下,读取数据的效率就会变得很慢,例如50个线程同时查询大概3000条数据,查询完成后通过 ...

  3. Codeforces Round #191 (Div. 2) D. Block Tower

    D. Block Tower time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  4. Codeforces Round #264 (Div. 2) C Gargari and Bishops 【暴力】

    称号: 意甲冠军:给定一个矩阵,每格我们有一个数,然后把两个大象,我希望能够吃的对角线上的所有数字.我问两个最大的大象可以吃值. 分析:这种想法是暴力的主题,计算出每一格放象的话能得到多少钱,然后求出 ...

  5. 阿里游戏大数据sesson2_RF&amp;GBRT（上）

    ----------一个小的游戏体验,对于不太熟悉Xlab RF和GBRT同学们都叫参考,不喜勿喷,大神绕道,米姆达. . .. .---------- 6月初的时候LR 做到4.9后一直上不去,看群 ...

  6. Xamarin.Android 使用 SQLiteOpenHelper 进行数据库操作

    一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...

  7. eclipse在maven项目交付svn忽略简介

    文章来源:http://blog.csdn.net/chaijunkun/article/details/34805385,转载请注明. 不时因为它将有关鲍恩梳理,它会做出相应的内容不变.文. ecl ...

  8. HYSBZ 2243 染色 （树链拆分）

    主题链接~~> 做题情绪:这题思路好想.调试代码调试了好久.第一次写线段树区间合并. 解题思路: 树链剖分 + 线段树区间合并 线段树的端点记录左右区间的颜色.颜色数目.合并的时候就用区间合并的 ...

  9. Linux高性能server规划——处理池和线程池

    进程池和线程池 池的概念 由于server的硬件资源"充裕".那么提高server性能的一个非常直接的方法就是以空间换时间.即"浪费"server的硬件资源.以 ...

  10. cocos2d-x -- 渠道SDK【棱镜】接入(1)

    棱镜SDK简单介绍 若想让游戏上线,渠道接入步骤是不可缺少的,为了避免一对一接入渠道问题,我选择了棱镜SDK,由于棱镜是游戏与渠道SDK的中间层,为CP厂商屏蔽各个渠道SDK之间的差异,整个接入过程, ...