accordion（分类）组件

一、依赖于 Panel（面板）组件

二、class加载方式

三、js加载方式

$(function () {

$("#box").accordion({
　　　　//属性
　　　　　　width:'500',//分类容器的宽度。默认值 auto。值为number
　　　　　　height:'auto',//分类容器的高度。默认值 auto。值为number
　　　　　　// fit:true,//分类容器大小将自适应父容器。默认值 false。值为boolean
　　　　　　//border:false,//定义是否显示边框。默认值 true。值为boolean
　　　　　　animate:true,//定义在展开和折叠的时候是否显示动画效果。默认值 true。值为boolean
　　　　　　//multiple:true,//如果为 true时,同时展开多个面板。默认值 false。值为boolean
　　　　　　selected:2,//设置初始化时默认选中的面板索引号。默认值0。值为number
　　//事件
　　　　　　onSelect:function(title,index){
　　　　　　console.log(title+"---"+index)
　　　　　　},//在面板被选中的时候触发
　　　　　　unselect:function (title,index) {
　　　　　　console.log(title+"|"+index)
　　　　　　},//在面板被取消选中的时候触发

　　　　});
　　//方法
　　　　　　console.log($('#box').accordion('options'));//返回属性对象
　　　　　　console.log($('#box').accordion('panels')); //返回所有分类面板
　　　　　　// $(document).click(function () {
　　　　　　// $('#box').accordion().css('display', 'block');
　　　　　　// $('#box').accordion('resize');
　　　　　　// });//调整分类组件大小
　　　　　　console.log($('#box').accordion('getSelected'));//选择选中的分类面板
　　　　　　console.log($('#box').accordion('getSelections'));//选择所有选中的分类面板
　　　　　　console.log($('#box').accordion('getPanel', 1));//获取指定下标的分类面板
　　　　　　console.log($('#box').accordion('getPanelIndex', '#a2'));//获取指定分类面板的下标值
　　　　　　$('#box').accordion('select', 1);//选中指定下标的分类面板
　　　　　　$('#box').accordion('unselect', 0);//取消选中指定下标的分类面板
　　　　　　$('#box').accordion('add', {
　　　　　　title : '新分类',
　　　　　　closable : true,
　　　　　　content : '123',
　　　　　　collapsible : false,
　　　　　　selected : false,
　　　　　　});//新增一个分类面板
　　　　　　$('#box').accordion('remove', 0);//移除一个分类面板

　　　　})

巴特西

accordion（分类）组件

最新文章

热门文章