easyui源码翻译1.32--accordion(手风琴)

前言

　　前几天加班比较忙 未能及时更新翻译的 今天多发布几篇。。下载该插件翻译源码

Accordion 分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的

源码

/**
 * jQuery EasyUI 1.3.2
 *
 *翻译：lbq
 */
(function ($) {
    //调整大小
    function _resize(target) {
        var options = $.data(target, "accordion").options;
        var panels = $.data(target, "accordion").panels;
        var cc = $(target);
        //自适应
        options.fit ? $.extend(options, cc._fit()) : cc._fit(false);
        if (options.width > 0) {
            cc._outerWidth(options.width);
        }
        var height = "auto";
        if (options.height > 0) {
            cc._outerHeight(options.height);
            var h = panels.length ? panels[0].panel("header").css("height", "")._outerHeight() : "auto";
            var height = cc.height() - (panels.length - 1) * h;
        }
        for (var i = 0; i < panels.length; i++) {
            var panel = panels[i];
            var header = panel.panel("header");
            header._outerHeight(h);
            panel.panel("resize", { width: cc.width(), height: height });
        }
    };
    //获取被选中的Panel
    function _getSelected(target) {
        var panels = $.data(target, "accordion").panels;
        for (var i = 0; i < panels.length; i++) {
            var panel = panels[i];
            if (panel.panel("options").collapsed == false) {
                return panel;
            }
        }
        return null;
    };
 
    //获取指定面板的索引
    function _getPanelIndex(target, panel) {
        var panels = $.data(target, "accordion").panels;
        for (var i = 0; i < panels.length; i++) {
            if (panels[i][0] == $(panel)[0]) {
                return i;
            }
        }
        return -1;
    };
    //获取指定的面板，'which'参数可以是面板的标题或者索引
    function _getPanel(target, title, isDelete) {
        var panels = $.data(target, "accordion").panels;
        if (typeof title == "number") {
            if (title < 0 || title >= panels.length) {
                return null;
            } else {
                var panel = panels[title];
                if (isDelete) {
                    panels.splice(title, 1);
                }
                return panel;
            }
        }
        for (var i = 0; i < panels.length; i++) {
            var panel = panels[i];
            if (panel.panel("options").title == title) {
                if (isDelete) {
                    panels.splice(i, 1);
                }
                return panel;
            }
        }
        return null;
    };
 
    //设置边框
    function setnoBorder(target) {
        var opts = $.data(target, "accordion").options;
        var cc = $(target);
        if (opts.border) {
            cc.removeClass("accordion-noborder");
        } else {
            cc.addClass("accordion-noborder");
        }
    };
    //渲染折叠面板
    function renderAccordion(target) {
        var cc = $(target);
        cc.addClass("accordion");
        var panels = [];
        cc.children("div").each(function () {
            var options = $.extend({}, $.parser.parseOptions(this), { selected: ($(this).attr("selected") ? true : undefined) });
            var pp = $(this);
            panels.push(pp);
            createNewPanel(target, pp, options);//创建新增的Panel
        });
        cc.bind("_resize", function (e, _1e) {
            var opts = $.data(target, "accordion").options;
            if (opts.fit == true || _1e) {
                _resize(target);
            }
            return false;
        });
        return { accordion: cc, panels: panels };
    };
    // 创建新增的Panel--面板属性事件
    function createNewPanel(jq, pp, options) {
        pp.panel($.extend({}, options, {
            collapsible: false,
            minimizable: false,
            maximizable: false,
            closable: false,
            doSize: false,
            collapsed: true,
            headerCls: "accordion-header",
            bodyCls: "accordion-body",
            onBeforeExpand: function () {
                var selectedPanel = _getSelected(jq);//获取展开前被选中的panel
                if (selectedPanel) {
                    var header = $(selectedPanel).panel("header");
                    header.removeClass("accordion-header-selected");//把展开前被选中的panel的选中样式设置为未选中
                    header.find(".accordion-collapse").triggerHandler("click");//把展开前被选中的panel合上
                }
                var header = pp.panel("header");
                header.addClass("accordion-header-selected");//样式设置为已选中
                header.find(".accordion-collapse").removeClass("accordion-expand");//样式设置为已展开
            },
            onExpand: function () {
                var options = $.data(jq, "accordion").options;
                options.onSelect.call(jq, pp.panel("options").title, _getPanelIndex(jq, this));//返回选择的panle的title给onSelect事件作为参数，并响应事件
            },
            onBeforeCollapse: function () {
                var header = pp.panel("header");
                header.removeClass("accordion-header-selected");//去掉选中样式
                header.find(".accordion-collapse").addClass("accordion-expand");//样式设置为未展开
            }
        }));
        var header = pp.panel("header");
        var t = $("<a class=\"accordion-collapse accordion-expand\" href=\"javascript:void(0)\"></a>").appendTo(header.children("div.panel-tool"));
 
        t.bind("click", function (e) {
            var animate = $.data(jq, "accordion").options.animate;
            stopAll(jq);
            if (pp.panel("options").collapsed) {
                pp.panel("expand", animate);
            } else {
                pp.panel("collapse", animate);
            }
            return false;
        });
        header.click(function () {
            $(this).find(".accordion-collapse").triggerHandler("click");
            return false;
        });
    };
    //选择指定面板。'which'参数可以是面板标题或者索引
    function _select(jq, title) {
        var panel = _getPanel(jq, title);
        if (!panel) {
            return;
        }
        var selectedPanel = _getSelected(jq);
        if (selectedPanel && selectedPanel[0] == panel[0]) {
            return;
        }
        panel.panel("header").triggerHandler("click");
    };
 
    function setanimate(target) {
 
        var panels = $.data(target, "accordion").panels;
        for (var i = 0; i < panels.length; i++) {
            if (panels[i].panel("options").selected) {
                _31(i);
                return;
            }
        }
        if (panels.length) {
            _31(0);
        }
        function _31(index) {
 
            var opts = $.data(target, "accordion").options;
            var animate = opts.animate;
            opts.animate = false;
            _select(target, index);
            console.info(animate);
            opts.animate = animate;
        };
    };
    //停止折叠面板所有正在运行的动画
    function stopAll(target) {
        var panel = $.data(target, "accordion").panels;
        for (var i = 0; i < panel.length; i++) {
            panel[i].stop(true, true);
        }
    };
    //添加一个新面板。在默认情况下，新增的面板会变成当前面板。如果要添加一个非选中面板，不要忘记将'selected'属性设置为false
    function add(target, options) {
        var opts = $.data(target, "accordion").options;
        var panels = $.data(target, "accordion").panels;
        if (options.selected == undefined) {
            options.selected = true;
        }
        stopAll(target);
        var pp = $("<div></div>").appendTo(target);
        panels.push(pp);
        createNewPanel(target, pp, options);
        _resize(target);
        opts.onAdd.call(target, options.title, panels.length - 1);
        if (options.selected) {
            _select(target, panels.length - 1);
        }
    };
    //移除指定面板。'which'参数可以使面板的标题或者索引
    function _remove(target, title) {
        var opts = $.data(target, "accordion").options;
        var panels = $.data(target, "accordion").panels;
        stopAll(target);
 
        var panel = _getPanel(target, title);
        var title = panel.panel("options").title;
        var index = _getPanelIndex(target, panel);
        //删除前判断onBeforeRemove的返回结果
        if (opts.onBeforeRemove.call(target, title, index) == false) {
            return;
        }
        var panel = _getPanel(target, title, true);
        if (panel) {
            panel.panel("destroy");
            if (panels.length) {
                _resize(target);
                var selectedPanel = _getSelected(target);
                if (!selectedPanel) {
                    _select(target, 0);
                }
            }
        }
        opts.onRemove.call(target, title, index);
    };
    //创建手风琴
    $.fn.accordion = function (options, param) {
        if (typeof options == "string") {
            return $.fn.accordion.methods[options](this, param);
        }
        options = options || {};
        return this.each(function () {
            var accordion = $.data(this, "accordion");
            var opts;
            if (accordion) {
                opts = $.extend(accordion.options, options);
                accordion.opts = opts;
            } else {
                opts = $.extend({}, $.fn.accordion.defaults, $.fn.accordion.parseOptions(this), options);
                var r = renderAccordion(this);//渲染折叠面板
                $.data(this, "accordion", { options: opts, accordion: r.accordion, panels: r.panels });
            }
            setnoBorder(this);
            _resize(this);
            setanimate(this);
        });
    };
    //手风琴方法
    $.fn.accordion.methods = {
        //返回分类组件的属性
        options: function (jq) {
            return $.data(jq[0], "accordion").options;
        },
        //获取所有面板
        panels: function (jq) {
            return $.data(jq[0], "accordion").panels;
        },
        //调整分类组件大小
        resize: function (jq) {
            return jq.each(function () {
                _resize(this);
            });
        },
        //获取选中的面板
        getSelected: function (jq) {
            return _getSelected(jq[0]);
        },
        //获取指定的面板，'which'参数可以是面板的标题或者索引
        getPanel: function (jq, which) {
            return _getPanel(jq[0], which);
        },
        //获取指定面板的索引
        getPanelIndex: function (jq, panel) {
            return _getPanelIndex(jq[0], panel);
        },
        //选择指定面板。'which'参数可以是面板标题或者索引
        select: function (jq, which) {
            return jq.each(function () {
                _select(this, which);
            });
        },
        //添加一个新面板。在默认情况下，新增的面板会变成当前面板。如果要添加一个非选中面板，不要忘记将'selected'属性设置为false
        add: function (jq, options) {
            return jq.each(function () {
                add(this, options);
            });
        },
        //移除指定面板。'which'参数可以使面板的标题或者索引
        remove: function (jq, which) {
            return jq.each(function () {
                _remove(this, which);
            });
        }
    };
    //解析器
    $.fn.accordion.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.parser.parseOptions(target, ["width", "height", { fit: "boolean", border: "boolean", animate: "boolean" }]));
    };
    //手风琴默认属性、事件
    $.fn.accordion.defaults = {
        width: "auto",//分类容器的宽度
        height: "auto",//高度
        fit: false,//如果设置为true，分类容器大小将自适应父容器
        border: true,//定义是否显示边框
        animate: true,//定义在展开和折叠的时候是否显示动画效果
        //在面板被选中的时候触发
        onSelect: function (title, index) {
        },
        //在添加新面板的时候触发
        onAdd: function (title, index) {
        },
        //在移除面板之前触发，返回false可以取消移除操作
        onBeforeRemove: function (title, index) {
        },
        //在面板被移除的时候触发
        onRemove: function (title, index) {
        }
    };
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Accordion - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script src="../../plugins2/jquery.parser.js"></script>
    <script src="../../plugins2/jquery.panel.js"></script>
    <script src="../../plugins2/jquery.accordion.js"></script>
</head>
<body>
    <h2>Basic Accordion</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click on panel header to show its content.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div class="easyui-accordion" style="width:500px;height:300px;">
        <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
        </div>
        <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
            <p>The accordion allows you to provide multiple panels and display one at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
        </div>
        <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
            <ul class="easyui-tree">
                <li>
                    <span>Foods</span>
                    <ul>
                        <li>
                            <span>Fruits</span>
                            <ul>
                                <li>apple</li>
                                <li>orange</li>
                            </ul>
                        </li>
                        <li>
                            <span>Vegetables</span>
                            <ul>
                                <li>tomato</li>
                                <li>carrot</li>
                                <li>cabbage</li>
                                <li>potato</li>
                                <li>lettuce</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

插件效果