jQuery EasyUI Accordion可伸缩面板组件使用详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery EasyUI Accordion可伸缩面板组件使用详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2454字，纯文字阅读大概需要4分钟。
内容图文
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" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" />
<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>
效果图：
点此下载源代码：Accordion可伸缩面板组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的jQuery EasyUI Accordion可伸缩面板组件使用详解全部内容，希望文章能够帮你解决jQuery EasyUI Accordion可伸缩面板组件使用详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】