首页 > Web开发 > 详细

网站前端_EasyUI.基础入门.0004.带你玩转jQuery EasyUI Accordion组件?

时间:2017-01-17 21:53:26      阅读:393      评论:0      收藏:0      [点我收藏+]

简单介绍:


说明: 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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!