easyui之panel控件分析

/**  * panel - jQuery EasyUI  *  * Licensed under the GPL:  * http://www.gnu.org/licenses/gpl.txt  *  * Copyright 2010 stworthy [ stworthy@gmail.com ]  *  */ /**  * 首先要了解面板的组成,面板由两部分组成,上面是header下面是body,使用时,我们只指定了body的元素,header元素和父元素都是自动生成的,首先生成父元素(.panel),然后根据设置组装header  */ (function ($) {     //删除指定节点  function removeNode(node) {         node.each(function () {             $(this).remove();             if ($.browser.msie) {                 this.outerHTML = '';             }         });     }      //设置面板尺寸,最后会触发"_resize"事件  function setSize(target, param) {         var opts = $.data(target, 'panel').options;         var panel = $.data(target, 'panel').panel;         var pheader = panel.find('>div.panel-header');         var pbody = panel.find('>div.panel-body');          if (param) {             if (param.width) opts.width = paam.width;
            if (param.height) opts.height = param.height;
            if (param.left != null) opts.left = param.left;
            if (param.top != null) opts.top = param.top;
        }

        if (opts.fit == true) {
            var p = panel.parent();
            opts.width = p.width();
            opts.height = p.height();
        }
        panel.css({
            left: opts.left,
            top: opts.top  });
        panel.css(opts.style);
        panel.addClass(opts.cls);
        pheader.addClass(opts.headerCls);
        pbody.addClass(opts.bodyCls);

        if (!isNaN(opts.width)) {
            if ($.boxModel == true) {
                panel.width(opts.width - (panel.outerWidth() - panel.width()));
                pheader.width(panel.width() - (pheader.outerWidth() - pheader.width()));
                pbody.width(panel.width() - (pbody.outerWidth() - pbody.width()));
            } else {
                panel.width(opts.width);
                pheader.width(panel.width());
                pbody.width(panel.width());
            }
        } else {
            panel.width('auto');
            pbody.width('auto');
        }
        if (!isNaN(opts.height)) {
// var height = opts.height - (panel.outerHeight()-panel.height()) - pheader.outerHeight(); // if ($.boxModel == true){ // height -= pbody.outerHeight() - pbody.height(); // } // pbody.height(height);   if ($.boxModel == true) {
                panel.height(opts.height - (panel.outerHeight() - panel.height()));
                pbody.height(panel.height() - pheader.outerHeight() - (pbody.outerHeight() - pbody.height()));
            } else {
                panel.height(opts.height);
                pbody.height(panel.height() - pheader.outerHeight());
            }
        } else {
            pbody.height('auto');
        }
        panel.css('height', null);

        opts.onResize.apply(target, [opts.width, opts.height]);

        panel.find('>div.panel-body>div').triggerHandler('_resize');
    }

    //移动面板  function movePanel(target, param) {
        var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;
        if (param) {
            if (param.left != null) opts.left = param.left;
            if (param.top != null) opts.top = param.top;
        }
        panel.css({
            left: opts.left,
            top: opts.top  });
        opts.onMove.apply(target, [opts.left, opts.top]);
    }

    //包装面板  function wrapPanel(target) {
        //首先给用户指定的面板元素加一个父元素(div)  var panel = $(target).addClass('panel-body').wrap('
').parent();
        //然后给这个父元素绑定自定义事件("_resize"),从代码上看,这个事件只有在设置了面板自适应的时候才会真正起作用(去重绘尺寸)  panel.bind('_resize', function () {
            var opts = $.data(target, 'panel').options;
            if (opts.fit == true) {
                setSize(target);
            }
            return false;
        });

        return panel;
    }

    function addHeader(target) {
        //添加面板的标题栏  var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;
        //首先移除掉面板的标题栏  removeNode(panel.find('>div.panel-header'));
        if (opts.title && !opts.noheader) {
            //如果设置面板有title并且没用说明不能有标题头就加入面板标题块  var header = $('
' + opts.title + '
').prependTo(panel);
            if (opts.iconCls) {
                header.find('.panel-title').addClass('panel-with-icon');
                $('
').addClass(opts.iconCls).appendTo(header);
            }
            var tool = $('
').appendTo(header);
            if (opts.closable) {
                $('
').appendTo(tool).bind('click', onClose);
            }
            if (opts.maximizable) {
                $('
').appendTo(tool).bind('click', onMax);
            }
            if (opts.minimizable) {
                $('
').appendTo(tool).bind('click', onMin);
            }
            if (opts.collapsible) {
                $('
').appendTo(tool).bind('click', onToggle);
            }
            if (opts.tools) {
                for (var i = opts.tools.length - 1; i >= 0; i--) {
                    var t = $('
').addClass(opts.tools[i].iconCls).appendTo(tool);
                    if (opts.tools[i].handler) {
                        t.bind('click', eval(opts.tools[i].handler));
                    }
                }
            }
            tool.find('div').hover(
                function () {
                    $(this).addClass('panel-tool-over');
                },
                function () {
                    $(this).removeClass('panel-tool-over');
                }
            );
            panel.find('>div.panel-body').removeClass('panel-body-noheader');
        } else {
            panel.find('>div.panel-body').addClass('panel-body-noheader');
        }

        function onToggle() {
            if ($(this).hasClass('panel-tool-expand')) {
                expandPanel(target, true);
            } else {
                collapsePanel(target, true);
            }
            return false;
        }

        function onMin() {
            minimizePanel(target);
            return false;
        }

        function onMax() {
            if ($(this).hasClass('panel-tool-restore')) {
                restorePanel(target);
            } else {
                maximizePanel(target);
            }
            return false;
        }

        function onClose() {
            closePanel(target);
            return false;
        }
    }

    /**  * load content from remote site if the href attribute is defined  */  function loadData(target) {
        var state = $.data(target, 'panel');
        if (state.options.href && (!state.isLoaded || !state.options.cache)) {
            state.isLoaded = false;
            var pbody = state.panel.find('>div.panel-body');
            pbody.html($('
').html(state.options.loadingMessage));
            pbody.load(state.options.href, null, function () {
                if ($.parser) {
                    $.parser.parse(pbody);
                }
                state.options.onLoad.apply(target, arguments);
                state.isLoaded = true;
            });
        }
    }

    function openPanel(target, forceOpen) {
        //打开面板,正常打开的话会去调用一个用户的方法,如果返回为false就不打开了,但如果设置了暴力打开参数的话就直接打开,不再去调用用户的方法  var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;

        if (forceOpen != true) {
            if (opts.onBeforeOpen.call(target) == false) return;
        }
        panel.show();
        opts.closed = false;
        opts.onOpen.call(target);

        if (opts.maximized == true) maximizePanel(target);
        if (opts.minimized == true) minimizePanel(target);
        if (opts.collapsed == true) collapsePanel(target);

        if (!opts.collapsed) {
            loadData(target);
        }
    }

    function closePanel(target, forceClose) {
        //关闭面板,同样处理面板的暴力关闭事件  var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;

        if (forceClose != true) {
            if (opts.onBeforeClose.call(target) == false) return;
        }
        panel.hide();
        opts.closed = true;
        opts.onClose.call(target);
    }

    function destroyPanel(target, forceDestroy) {
        //销毁面板,这将面板控件从dom元素中除去  var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;

        if (forceDestroy != true) {
            if (opts.onBeforeDestroy.call(target) == false) return;
        }
        removeNode(panel);
        opts.onDestroy.call(target);
    }

    function collapsePanel(target, animate) {
        //折叠面板  var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;
        var body = panel.find('>div.panel-body');
        var tool = panel.find('>div.panel-header .panel-tool-collapse');

        if (tool.hasClass('panel-tool-expand')) return;

        body.stop(true, true); // stop animation  if (opts.onBeforeCollapse.call(target) == false) return;

        tool.addClass('panel-tool-expand');
        if (animate == true) {
            body.slideUp('normal', function () {
                opts.collapsed = true;
                opts.onCollapse.call(target);
            });
        } else {
            body.hide();
            opts.collapsed = true;
            opts.onCollapse.call(target);
        }
    }

    function expandPanel(target, animate) {
        //展开面板  var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;
        var body = panel.find('>div.panel-body');
        var tool = panel.find('>div.panel-header .panel-tool-collapse');

        if (!tool.hasClass('panel-tool-expand')) return;

        body.stop(true, true); // stop animation  if (opts.onBeforeExpand.call(target) == false) return;

        tool.removeClass('panel-tool-expand');
        if (animate == true) {
            body.slideDown('normal', function () {
                opts.collapsed = false;
                opts.onExpand.call(target);
                loadData(target);
            });
        } else {
            body.show();
            opts.collapsed = false;
            opts.onExpand.call(target);
            loadData(target);
        }
    }

    function maximizePanel(target) {
        //最大化面板  var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;
        var tool = panel.find('>div.panel-header .panel-tool-max');

        if (tool.hasClass('panel-tool-restore')) return;

        tool.addClass('panel-tool-restore');

        //最大化之前先存储现在的尺寸,方面后面的恢复  $.data(target, 'panel').original = {
            width: opts.width,
            height: opts.height,
            left: opts.left,
            top: opts.top,
            fit: opts.fit  };
        opts.left = 0;
        opts.top = 0;
        opts.fit = true;
        setSize(target);
        opts.minimized = false;
        opts.maximized = true;
        opts.onMaximize.call(target);
    }

    function minimizePanel(target) {
        //最小化面板  var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;
        panel.hide();
        opts.minimized = true;
        opts.maximized = false;
        opts.onMinimize.call(target);
    }

    function restorePanel(target) {
        var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;
        var tool = panel.find('>div.panel-header .panel-tool-max');

        if (!tool.hasClass('panel-tool-restore')) return;

        panel.show();
        tool.removeClass('panel-tool-restore');
        var original = $.data(target, 'panel').original;
        opts.width = original.width;
        opts.height = original.height;
        opts.left = original.left;
        opts.top = original.top;
        opts.fit = original.fit;
        setSize(target);
        opts.minimized = false;
        opts.maximized = false;
        opts.onRestore.call(target);
    }

    function setBorder(target) {
        var opts = $.data(target, 'panel').options;
        var panel = $.data(target, 'panel').panel;
        if (opts.border == true) {
            panel.find('>div.panel-header').removeClass('panel-header-noborder');
            panel.find('>div.panel-body').removeClass('panel-body-noborder');
        } else {
            panel.find('>div.panel-header').addClass('panel-header-noborder');
            panel.find('>div.panel-body').addClass('panel-body-noborder');
        }
    }

    function setTitle(target, title) {
        $.data(target, 'panel').options.title = title;
        $(target).panel('header').find('div.panel-title').html(title);
    }

    $(window).unbind('.panel').bind('resize.panel', function () {
        //给窗体绑定大小改变事件,先去看body是否有布局,如果有就调用body的布局方法,如果没有就调用body下面的div面板,触发它的"_resize"事件  var layout = $('body.layout');
        if (layout.length) {
            layout.layout('resize');
        } else {
            $('body>div.panel').triggerHandler('_resize');
        }
    });

    $.fn.panel = function (options, param) {
        if (typeof options == 'string') {
            //如果是字符串就表示是在调用方法  switch (options) {
                case 'options':
                    return $.data(this[0], 'panel').options;
                case 'panel':
                    return $. 

            锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！