`

[转]panel,dialog,window组件越界问题汇总

 
阅读更多
来源: http://www.easyui.info/archives/689.html

使用的时候,请在引入easyui的核心文件后,直接追加以上代码,注意不要写在document.ready里面。

效果演示:
http://www.easyui.info/easyui/demo/window/062.html

var ie = (function() {   
    var undef, v = 3, div = document.createElement('div'), all = div   
            .getElementsByTagName('i');   
    while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0]);   
    return v > 4 ? v : undef;   
}());   
/**
 * add by cgh  
 * 针对panel window dialog三个组件调整大小时会超出父级元素的修正  
 * 如果父级元素的overflow属性为hidden,则修复上下左右个方向  
 * 如果父级元素的overflow属性为非hidden,则只修复上左两个方向  
 * @param width  
 * @param height  
 * @returns  
 */  
var easyuiPanelOnResize = function(width, height) {   
    if (!$.data(this, 'window') && !$.data(this, 'dialog'))   
        return;   
  
    if (ie === 8) {   
        var data = $.data(this, "window") || $.data(this, "dialog");   
        if (data.pmask) {   
            var masks = data.window.nextAll('.window-proxy-mask');   
            if (masks.length > 1) {   
                $(masks[1]).remove();   
                masks[1] = null;   
            }   
        }   
    }   
    if ($(this).panel('options').maximized == true) {   
        $(this).panel('options').fit = false;   
    }   
    $(this).panel('options').reSizing = true;   
    if (!$(this).panel('options').reSizeNum) {   
        $(this).panel('options').reSizeNum = 1;   
    } else {   
        $(this).panel('options').reSizeNum++;   
    }   
    var parentObj = $(this).panel('panel').parent();   
    var left = $(this).panel('panel').position().left;   
    var top = $(this).panel('panel').position().top;   
  
    if ($(this).panel('panel').offset().left < 0) {   
        $(this).panel('move', {   
                    left : 0   
                });   
    }   
    if ($(this).panel('panel').offset().top < 0) {   
        $(this).panel('move', {   
                    top : 0   
                });   
    }   
  
    if (left < 0) {   
        $(this).panel('move', {   
                    left : 0   
                }).panel('resize', {   
                    width : width + left   
                });   
    }   
    if (top < 0) {   
        $(this).panel('move', {   
                    top : 0   
                }).panel('resize', {   
                    height : height + top   
                });   
    }   
    if (parentObj.css("overflow") == "hidden") {   
        var inline = $.data(this, "window").options.inline;   
        if (inline == false) {   
            parentObj = $(window);   
        }   
  
        if ((width + left > parentObj.width())   
                && $(this).panel('options').reSizeNum > 1) {   
            $(this).panel('resize', {   
                        width : parentObj.width() - left   
                    });   
        }   
  
        if ((height + top > parentObj.height())   
                && $(this).panel('options').reSizeNum > 1) {   
            $(this).panel('resize', {   
                        height : parentObj.height() - top   
                    });   
        }   
    }   
    $(this).panel('options').reSizing = false;   
};   
/**
 * add by cgh  
 * 针对panel window dialog三个组件拖动时会超出父级元素的修正  
 * 如果父级元素的overflow属性为hidden,则修复上下左右个方向  
 * 如果父级元素的overflow属性为非hidden,则只修复上左两个方向  
 * @param left  
 * @param top  
 * @returns  
 */  
var easyuiPanelOnMove = function(left, top) {   
    if ($(this).panel('options').reSizing)   
        return;   
    var parentObj = $(this).panel('panel').parent();   
    var width = $(this).panel('options').width;   
    var height = $(this).panel('options').height;   
    var right = left + width;   
    var buttom = top + height;   
    var parentWidth = parentObj.width();   
    var parentHeight = parentObj.height();   
  
    if (left < 0) {   
        $(this).panel('move', {   
                    left : 0   
                });   
    }   
    if (top < 0) {   
        $(this).panel('move', {   
                    top : 0   
                });   
    }   
  
    if (parentObj.css("overflow") == "hidden") {   
        var inline = $.data(this, "window").options.inline;   
        if (inline == false) {   
            parentObj = $(window);   
        }   
        if (left > parentObj.width() - width) {   
            $(this).panel('move', {   
                        "left" : parentObj.width() - width   
                    });   
        }   
        if (top > parentObj.height() - height) {   
            $(this).panel('move', {   
                        "top" : parentObj.height() - height   
                    });   
        }   
    }   
};   
  
$.fn.window.defaults.onResize = easyuiPanelOnResize;   
$.fn.dialog.defaults.onResize = easyuiPanelOnResize;   
$.fn.window.defaults.onMove = easyuiPanelOnMove;   
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;  

分享到:
评论

相关推荐

    js dialog弹窗组件

    在JS中,`dialog`对话框组件是一种常见的用户交互元素,它用于显示警告、确认信息或者进行简单的输入操作。在网页设计中,对话框能够提供更加直观和丰富的用户体验,使得用户在不离开当前页面的情况下,可以执行特定...

    Android技术知识点:如何改造过时的DialogUI组件

    在Android开发中,DialogUI组件是用户界面设计中不可或缺的一部分,它用于显示临时的通知或获取用户的简短输入。然而,随着时间的推移,系统默认的Dialog样式可能变得过时,不符合现代应用的设计趋势。本文将深入...

    YUI3 dialog组件

    **YUI3 Dialog组件详解** YUI3是Yahoo!推出的一款强大的JavaScript库,它提供了丰富的UI组件和工具,用于构建高性能、跨平台的Web应用程序。Dialog组件是YUI3中的一个重要部分,它允许开发者创建可交互的弹出窗口,...

    editText和Dialog等组件的圆角边框设置

    editText和Dialog等组件的圆角边框设置

    各种自定义Dialog 以及Dialog加载动画

    在Android开发中,自定义Dialog和Dialog加载动画是提升应用用户体验的重要手段。默认的Dialog样式虽然功能齐全,但在追求个性化和美观的今天,往往显得过于简单甚至有些过时。因此,开发者常常需要根据应用的设计...

    jquery ui中的dialog

    **jQuery UI中的Dialog组件** jQuery UI是一个功能丰富的JavaScript库,它提供了许多用户界面元素,如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)等。在这些元素中,Dialog是创建弹出式窗口或模拟...

    根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z

    在这个特定的案例中,我们讨论的是如何在Element UI的基础上自定义Dialog(对话框)和Drawer(抽屉)组件,以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作,而Drawer则常用于...

    第14章 Dialog(对话框)组件1

    Dialog组件的事件完全继承自Window组件,因此可以使用Window组件的所有事件,如打开、关闭、移动等。以下是一个`onClose`事件的例子,当对话框关闭时会触发一个警告框: ```javascript $('#box').dialog({ width : ...

    js window.open iframe dialog

    在JavaScript的世界里,`window.open`、`iframe`和`dialog`是三个非常重要的概念,它们在网页交互和页面通信中扮演着关键角色。这里我们将深入探讨这些知识点,并结合实例来帮助你理解它们的用法。 1. `window.open...

    qml 用item自定义dialog 对话框

    本文将深入探讨如何使用QML中的`Item`来创建一个自定义的`Dialog`组件。 首先,了解`Dialog`的基本概念。在Qt Quick中,`Dialog`是一个用于展示临时信息或进行用户交互的窗口,通常会有一个确定的关闭机制,如点击...

    EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi

    EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以渔。 第01课(大概介绍一下easyui,和组织...

    Dialog实现3D翻转效果

    Dialog是Android系统提供的一个基础组件,用于弹出一个与背景半透明的窗口,展示重要的信息或提示用户进行操作。通常,Dialog会覆盖在当前活动(Activity)之上,并且当用户与其交互后才会消失。 实现3D翻转效果...

    自定义dialog位置

    在Android开发中,自定义Dialog是一项常见的需求,它允许开发者根据应用的特定需求来调整Dialog的外观和行为。本文将详细讲解如何实现自定义Dialog,尤其是如何改变Dialog的位置,使其能够像PopupWindow那样灵活地...

    自定义Dialog弹窗

    Window dialogWindow = getWindow(); WindowManager.LayoutParams lp1 = dialogWindow.getAttributes(); WindowManager wm = (WindowManager) getContext() .getSystemService(Context.WINDOW_SERVICE); ...

    微信小程序使用 vant Dialog组件的正确方式

    Vant包含了近50个经过实际业务检验的组件,例如 Dialog 组件,它在微信小程序中的使用方法是本文的重点。 首先,Vant 的 Dialog 组件是一个弹窗对话框,它可以用于显示警告、确认或输入等操作。在微信小程序中使用 ...

    【JavaScript源代码】详解如何在vue+element-ui的项目中封装dialog组件.docx

    本篇文章主要讲解如何在 Vue 和 Element-UI 的环境下封装 Dialog 组件,以解决频繁使用弹窗时的重复代码问题,降低业务逻辑的耦合度。 1、问题起源 在实际开发中,我们可能会遇到多个类似功能的弹窗,如展示地图的...

    dialog去除边框代码

    在Android开发中,Dialog是一种常用的UI组件,用于显示简短的警告、信息或者与用户进行交互。默认情况下,Dialog会带有系统定义的边框,但有时候为了满足特定的界面设计需求,开发者可能需要去除Dialog的边框。标题...

    Android dialog显示位置

    在Android开发中,Dialog是一种非常常见的用户界面组件,它用于向用户展示临时信息或进行简单的交互操作。对话框通常会浮现在应用主界面之上,但它的显示位置可以根据开发者的需求进行定制。本文将深入探讨如何在...

    自定义圆角的dialog

    在Android应用开发中,Dialog是一种重要的用户交互组件,它用于显示临时信息或提示用户进行选择。系统提供的默认Dialog样式虽然实用,但往往无法满足开发者对于界面个性化和用户体验优化的需求。因此,自定义Dialog...

    Jquery Easyui对话框组件Dialog使用详解(14)

    Dialog 组件继承了 Window 组件的所有事件,并提供了一个额外的 `onClose` 事件,用于处理对话框关闭时的逻辑。 ```javascript $('#box').dialog({ width: 600, height: 400, modal: true, onClose: function()...

Global site tag (gtag.js) - Google Analytics