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>

 

插件效果