简单介绍:
说明: Accordion折叠面板基于Panel面板,但允许同时显示一个或多个面板,每个面板都支持展开和折叠内容可通过Ajax加载,如果没有指定默认选中面板,则默认选中第一个面板.
基础用法:
<div id="a" class="easyui-accordion" data-options="width:200,height:300"> <div style="padding:5px" data-options="title:‘菜单一标题区‘,iconCls:‘icon-ok‘">菜单一内容区</div> <div style="padding:5px" data-options="title:‘菜单一标题区‘,iconCls:‘icon-ok‘,selected:true">菜单二内容区</div> <div style="padding:5px" data-options="title:‘菜单一标题区‘,iconCls:‘icon-ok‘">菜单三内容区</div> </div>
异步加载:
<div id="a" class="easyui-accordion" data-options="width:200,height:300"> <div data-options="bodyCls:‘accordion_padding‘,iconCls:‘icon-ok‘,title:‘简单介绍‘"></div> <div data-options="bodyCls:‘accordion_padding‘,iconCls:‘icon-ok‘,title:‘异步加载‘"></div> <div data-options="bodyCls:‘accordion_padding‘,iconCls:‘icon-ok‘,title:‘容器属性‘"></div> <div data-options="bodyCls:‘accordion_padding‘,iconCls:‘icon-ok‘,title:‘容器事件‘"></div> <div data-options="bodyCls:‘accordion_padding‘,iconCls:‘icon-ok‘,title:‘容器接口‘"></div> </div> <!-- 说明: 加载jquery-easyui脚本文件 --> <script src="js/jquery-easyui/jquery.min.js"></script> <script src="js/jquery-easyui/jquery.easyui.min.js"></script> <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> var options = { onSelect: function(title, index){ var $p = $(‘#a‘).accordion(‘getPanel‘, index); var panelOptions = { href:‘/easyui/data.json‘, cache:false, extractor: function(data){ var d = JSON.parse(data); var r = d[‘menu‘][index]; return r; } }; $p.panel(panelOptions); } }; $(‘#a‘).accordion(options); </script>
容器属性:
width -> number
说明: 折叠面板容器宽度
height -> number
说明: 折叠面板容器高度
fit -> boolean
说明: 折叠面板容器尺寸是否适应其父类容器尺寸
border -> boolean
说明: 折叠面板是否显示边框
animate -> boolean
说明: 定义展开或折叠是否显示动画
multiple -> boolean
说明: 定义是否可同时展开多个面板
selected -> number
说明: 初始化默认容器内选中的面板索引,从0开始
<div id="a" class="easyui-accordion" data-options="width:200,height:300,fit:false,animate:true,multiple:false,selected:0"> <div style="padding:5px" data-options="title:‘菜单一标题区‘,iconCls:‘icon-ok‘">菜单一内容区</div> <div style="padding:5px" data-options="title:‘菜单一标题区‘,iconCls:‘icon-ok‘">菜单二内容区</div> <div style="padding:5px" data-options="title:‘菜单一标题区‘,iconCls:‘icon-ok‘">菜单三内容区</div> </div>
面板属性:
selected -> boolean
说明: 设置是否展开面板
collapsible -> boolean
说明: 设置是否显示可折叠按钮
容器事件:
onSelect -> function
说明: 当面板被选中时触发,回调函数必须接收title和index参数
onUnselect -> function
说明: 当面板未选中时触发,回调函数必须接收title和index参数
onAdd -> function
说明: 当添加新面板后触发,回调函数必须接收title和index参数
onBeforeRemove -> function
说明: 当移除一面板前触发,回调函数必须接收title和index参数,返回False将不移除
onRemove -> function
说明: 当移除一面板后触发
<div id="a" class="easyui-accordion" data-options="width:200,height:300,onUnselect:function(title,index){console.log(title, index)}"> <div style="padding:5px" data-options="title:‘菜单一标题区‘,iconCls:‘icon-ok‘,selected:true,collapsible:true">菜单一内容区</div> <div style="padding:5px" data-options="title:‘菜单二标题区‘,iconCls:‘icon-ok‘">菜单二内容区</div> <div style="padding:5px" data-options="title:‘菜单三标题区‘,iconCls:‘icon-ok‘">菜单三内容区</div> </div> <!-- 说明: 加载jquery-easyui脚本文件 --> <script src="js/jquery-easyui/jquery.min.js"></script> <script src="js/jquery-easyui/jquery.easyui.min.js"></script> <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> var oldTitle = ‘‘; var options = { onSelect: function(title, index){ var $p = $(‘#a‘).accordion(‘getPanel‘, index); oldTitle = title; var newTitle = title + ‘ [已选中] ‘; $p.panel(‘setTitle‘, newTitle); }, onUnselect: function(title, index){ var $p = $(‘#a‘).accordion(‘getPanel‘, index); $p.panel(‘setTitle‘, oldTitle?oldTitle:title); } }; var $accordion = $(‘#a‘).accordion(options) </script>
容器接口:
options -> object
说明: 返回折叠面板的选项.
panels ->array
说明: 返回所有的面板对象
resize -> none
说明: 设置折叠面板的尺寸,需要传入包含width/height/left/top的对象
getSelected -> object
说明: 获取折叠面板中选中面板对象,可调用其panel属性来调用panel面板接口
getSelections -> array
说明: 获取过去所有选中的面板,主要是配合容器的multiple属性多选.
getPanel -> object
说明: 获取折叠面板中指定的面板对象,需要接收title或index的值,可调用其panel属性来调用panel面板接口
getPanelIndex -> number
说明: 获取指定面板索引,需要接收panel对象
select -> none
说明: 选中指定的面板,并展开内容,需要接收面板title或index的值
unselect -> none
说明: 取消选中指定的面板,并收缩内容,需要接收面板title或index的值
add -> none
说明: 添加指定面板,需要接收面板options
remove -> none
说明: 移除指定面板,需要接收面板title或index的值
<div> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘options‘))">获取选项</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘panels‘))">获取面板</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$(‘#a‘).accordion(‘resize‘, {width:300,height:200})">改变尺寸</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘getSelected‘))">获取选中</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘getSelections‘))">过去选中</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘getPanel‘, 0).panel(‘header‘).text())">面板标题</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘getPanelIndex‘, $(‘#a‘).accordion(‘getSelected‘)))">面板索引</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘select‘, $(‘#a‘).accordion(‘panels‘).length-1))">选中最后</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘unselect‘, $(‘#a‘).accordion(‘panels‘).length-1))">取消选中</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘add‘, { iconCls: ‘icon-ok‘, title: ‘新菜单‘, content: ‘新菜单内容区‘, bodyCls: ‘accordion_padding‘ }))">添加面板</a> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($(‘#a‘).accordion(‘remove‘, $(‘#a‘).accordion(‘panels‘).length-1))">删除面板</a> </div> <hr> <div id="a" class="easyui-accordion" data-options="width:200,height:300,onUnselect:function(title,index){console.log(title, index)}"> <div style="padding:5px" data-options="title:‘菜单一标题区‘,iconCls:‘icon-ok‘,selected:true,collapsible:true">菜单一内容区</div> <div style="padding:5px" data-options="title:‘菜单二标题区‘,iconCls:‘icon-ok‘">菜单二内容区</div> <div style="padding:5px" data-options="title:‘菜单三标题区‘,iconCls:‘icon-ok‘">菜单三内容区</div> </div>
本文出自 “满满李 - 运维开发之路” 博客,请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1892719
网站前端_EasyUI.基础入门.0004.带你玩转jQuery EasyUI Accordion组件?
原文:http://xmdevops.blog.51cto.com/11144840/1892719