扩展--实现右侧滑出弹层效果

最近写一个项目，前端用的是EasyUI，遇到了一个页面的筛选条件占了半屏幕....

想着来个分离，把不常用的刷选分离出来以改善页面展示效果，就想到了右侧滑出页面的方式，把搜索条件放到右侧滑出来的页面中。看了半天的API文档头疼的发现没有，又百度了半天，还是失望了...最后的最后还是自行扩展。

莫急..废话说完了...

基础用的easyui的 panel 和 layer 的load 效果。

实现以下功能：

• 右侧滑出层
• 自定义层宽度、名称
• 是否展示遮罩层
• 点击遮罩层自动关闭层
• 滑出几滑入回调事件
• 跟随窗口变化自动调整弹出层高度
• 木有了...

具体实现代码：

​
(function ($) {

    $.fn.extend({

        panelLayer: function (options) {

            var win_With = $(window).width();
            var win_Height = $(window).height();
            var $layer;
            var layer_index;
            var $o = $(this);
            var pLayer = {
                Flag: 'FLAG_PANEL_LAYER',
                Exist: function () {
                    var $panel = $o.parent();
                    if ($panel.hasClass(pLayer.Flag)) {
                        return true;
                    }
                    return false;
                },
                Init: function (options) {
                    if (pLayer.Exist()) {
                        return;
                    }
                    var $panel = $o.parent();
                    $o.panel({
                        title: options.title,
                        width: options.width,
                        height: win_Height-options.top,
                        left: win_With,
                        top: options.top,
                        closable: true,
                        cls: options.cls,
                        onBeforeOpen: function () {
                            $o.parent().css({
                                'position': 'absolute',
                                'opacity': 0.6,
                                'z-index': 10050,
                                'display': 'none'
                            });
                        },
                        onClose: function () {
                            pLayer.Hide(options);
                        }
                    });

                    if (options.shade) {
                        layer_index = layer.load(0, {
                            zIndex:10000,
                            shade: [0.4, "#ccc"],
                            shadeClose: options.shadeClose,
                            time: 0,
                            success: function (layero, index) {
                                $layer = $(layero);
                                $layer.hide();
                            },
                            end: function () {
                                pLayer.Hide(options);
                            }
                        });
                    }
                },
                Show: function (options) {
                    if (pLayer.Exist()) {
                        return;
                    }
                    var $panel = $o.parent();
                    $panel.show().animate({
                        left: win_With - options.width,
                        opacity: 1,
                    }, 800, function () {
                        $panel.addClass(pLayer.Flag).show();
                        try {
                            var showCall = options.show;
                            if (showCall != null && typeof showCall == 'function') {
                                showCall();
                            }
                        } catch (e) {
                            console.log(e);
                        }
                    })
                },
                Hide: function (options) {
                    var $panel = $o.parent();
                    $panel.show().animate({
                        left: win_With,
                        opacity: 0.6,
                    }, 500, function () {
                        $panel.removeClass(pLayer.Flag).hide();
                        if ($layer != null) {
                            layer.close(layer_index);
                        }
                        try {
                            var hideCall = options.hide;
                            if (hideCall != null && typeof hideCall == 'function') {
                                hideCall();
                            }
                        } catch (e) {
                            console.log(e);
                        }
                    })
                },
                ReSize: function (options) {
                    if (!pLayer.Exist()) {
                        return;
                    }
                    $o.panel('resize', {
                        width: options.width,
                        height: win_Height - options.top
                    });
                    $o.panel('move', {
                        left: win_With - options.width,
                        top: options.top
                    });
                }
            };

            var defaults = {
                title: '',
                width: 400,
                top: 8,
                cls: '',
                shade: true,
                shadeClose: true,
                show: null,
                hide: null
            };

            var opt = $.extend({},defaults, options);

            if (options == "close") {
                pLayer.Hide(opt);
                layer.closeAll("loading");
                return;
            } else {
                pLayer.Init(opt);

                pLayer.Show(opt);

                $(window).on('resize', function () {
                    win_With = $(window).width();
                    win_Height = $(window).height();
                    pLayer.ReSize(opt);
                });
            }
        }
    })

})(jQuery)

调用方式：

//<div id="div_Right">内容</div>

//滑出
$("#div_Right").panelLayer({
   title:'右侧滑出',
   width:300,
   shade:true,
   shadeClose:true
})

//关闭
 $("#div_Right").panelLayer('close');

谢谢浏览，技术有限，请多指教！