最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery EasyUI Accordion可伸缩面板组件使用详解
时间:2017-05-11 编辑:简简单单 来源:一聚教程网
Accordion 可伸缩面板组件,基于panel,示例如下:
代码如下 | 复制代码 |
$(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
})
|