Позиционирование негабаритного диалогового окна jQuery.UI - PullRequest
Новая
       14

Позиционирование негабаритного диалогового окна jQuery.UI

0 голосов
/ 29 января 2012

У меня есть экран панели инструментов, заполненный диалогами, расположенными в три столбца.Это работает довольно хорошо. 

var leftContent;
var middleContent;
var rightContent;
var verticalOffset;

$(document).ready(function() {
    leftContent = $('#columnTop');
    middleContent = $('#columnTop');
    rightContent = $('#columnTop');
    verticalOffset = (jQuery.browser.safari) ? 40 : 5;

    includeJavascriptFile('inlineForumFunctions.js');

    $('.dialog').each(function(){
        var p = '';
        if ($(this).hasClass('dialogLeft')) p = 'posLeft';
        if ($(this).hasClass('dialogCenter')) p = 'posCenter';
        if ($(this).hasClass('dialogRight')) p = 'posRight';

        $(this).dialog({
            title: $(this).attr('title'),
            maxHeight: 400
        }).parent().attr('id', $(this).attr('id') + 'Dialog')
        .addClass('cfDialog').addClass(p);
    });

    $('.cfDialog').css('width', '30%');

    $('.cfDialog.posLeft').each(function(){
        addToLeftColumn($(this).attr('id'));
    });

    $('.cfDialog.posCenter').each(function(){
        addToCenterColumn($(this).attr('id'));
    });

    $('.cfDialog.posRight').each(function(){
        addToRightColumn($(this).attr('id'));
    });

    $('.menu ul').hover(function(){
        $(this).maxZIndex();
        $(this).children().maxZIndex();
    });

});

$.maxZIndex = $.fn.maxZIndex = function(opt) {
    /// <summary>
    /// Returns the max zOrder in the document (no parameter)
    /// Sets max zOrder by passing a non-zero number
    /// which gets added to the highest zOrder.
    /// </summary>
    /// <param name="opt" type="object">
    /// inc: increment value,
    /// group: selector for zIndex elements to find max for
    /// </param>
    /// <returns type="jQuery" />
    var def = {
        inc: 10,
        group: "*"
    };
    $.extend(def, opt);
    var zmax = 0;
    $(def.group).each(function() {
        var cur = parseInt($(this).css('z-index'));
        zmax = cur > zmax ? cur : zmax;
    });
    if (!this.jquery)
        return zmax;

    return this.each(function() {
        zmax += def.inc;
        $(this).css("z-index", zmax);
    });
}

function addToLeftColumn(elementId){
        $('#'+elementId)
        .position({
            my: 'left top',
            at: 'left bottom',
            of: leftContent,
            offset: '0 ' + verticalOffset
        });
    if ($('#'+elementId).html().length > 0){
        leftContent = $('#'+elementId);
    }
}

function addToCenterColumn (elementId){
        $('#'+elementId)
        .position({
            my: 'center top',
            at: 'center bottom',
            of: middleContent,
            offset: '0 ' + verticalOffset
        });
        alert(middleContent.attr('id'));
        middleContent = $('#'+elementId);

}

function addToRightColumn (elementId){
        $('#'+elementId)
        .position({
            my: 'right top',
            at: 'right bottom',
            of: rightContent,
            offset: '0 ' + verticalOffset
        });
    if ($('#'+elementId).html().length > 0){
        rightContent = $('#'+elementId);
    }
}

... однако свойство maxHeight, похоже, игнорируется.У меня есть одно диалоговое окно, которое намного больше, чем 400 пикселей в высоту, и при отображении экрана самый нижний край диалога виден вверху экрана.

1 Ответ

1 голос
/ 29 января 2012

Вы хотите установить свойство height, в противном случае это auto. Свойство maxHeight используется для диалогов, размер которых может изменяться пользователем.

...