0

我有一个页面，其中包含一个带有三个选项卡的 jquery 选项卡元素。在该元素中，有一个地图（选项卡 1 - PolyMap）、图表（选项卡 2 - Devexpress）和数据网格（选项卡 3 - Devexpress）。该网站本身建立在 Foundation 4 之上，以提供响应式设计。使用基础，页面的宽度和高度会随着屏幕尺寸的变化而变化，但实际的地图和图形元素并没有改变。我实现了以下代码，以使地图和图形在屏幕尺寸发生变化（即纵向-横向）或初始加载页面时自动调整大小。

我对 javascript 编程相当陌生，所以我仍在尝试了解浏览器之间差异的复杂性。我通常使用 Chrome 进行开发，因此我根据 Chrome 中的工作原理开发了代码。我遇到的问题是，当我现在在 IE 或 Firfox（两个当前版本）中进行测试时，我得到了不同的结果。在 IE 中，两个元素都以 0px 的高度加载。在 Firefox 中，地图已正确加载（默认显示的选项卡），但图表加载的高度为 0px（图表选项卡最初未显示）。如果屏幕尺寸发生变化，脚本会触发并且尺寸会立即更正，所以我猜这要么是使用的问题$(window).load，或者代码在页面在 IE 或 Firefox 中完全加载之前触发（尽管我很难理解它如何在 Chrome 中正常工作）。

有什么建议吗 - 请记住，我是新手，所以如果整个代码块应该重新设计，我完全愿意接受 - 我想学习......

代码（出现在关闭 html 标记之前）：

    function ResizeMap() {
        var mPadding = $('#MapContent').css("padding");
        mPadding = mPadding.substring(0, mPadding.length - 2);
        mPadding = mPadding * 2;
        if (MapContent.offsetWidth > 970) {
            var nWidth = 970-mPadding;
            var nHeight = 650;
        } else {
            var nWidth = MapContent.offsetWidth-mPadding;
            var nHeight = nWidth * (650/(970-mPadding));
        }
        $('#map').width(nWidth);
        $('#map').height(nHeight);
    }
    function ResizeChart() {
        var cPadding = $('#ChartContent').css("padding");
        cPadding = cPadding.substring(0, cPadding.length - 2);
        cPadding = cPadding * 2;
        if (ChartContent.offsetWidth > 970) {
            var nWidth = 970-cPadding;
            var nHeight = 650;
        } else {
            var nWidth = ChartContent.offsetWidth-cPadding;
            var nHeight = nWidth * (650/(970-cPadding));
        }
        chart.SetWidth(nWidth);
        chart.SetHeight(nHeight);
    }
    $(window).resize(function() {
        ResizeMap();
        ResizeChart();
    });
    $(window).load(function() {
        ResizeMap();
        ResizeChart();
    });
4

0 回答 0