如何使用jQuery UI创建级联对话框? [英] How do I create Cascading Dialog boxes using jQuery UI?

问题描述

我正在使用jQuery UI的对话框功能，位于此处:

I'm using jQuery UI's dialog feature found here:

http://jqueryui.com/dialog (我想以级联的方式推出一堆这样的盒子.不幸的是，我认为位置选项不会对我这样做仅限于屏幕上非常特定的区域(我可能会错了).

I'd like to launch a bunch of these boxes in a cascading fashion. Unfortunately I don't think that the Position option will do this for me as it seems pretty limited to very specific areas of the screen (I may be wrong through).

看看这个小提琴，了解我当前拥有的代码: http://jsfiddle.net /bUFnE/1/

Take a look at this Fiddle for the code I have currently: http://jsfiddle.net/bUFnE/1/

这是我的JS:

//Code used to launch little score cards of the the leads
var boxID = 0;
$('a.manageLead').click(function() {
    boxID = boxID + 1;

    var url = this.href;

    // show a spinner or something via css
    var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');

    // open the dialog
    dialog.dialog({
        // add a close listener to prevent adding multiple divs to the document
        close: function(event, ui) {
            // remove div with all data and events
            dialog.remove();
        },
        modal: false,
        resizable: false,
        dialogClass: "dialog-box-"+boxID,
        position: { my: "center top", at: "center top" },
        title: "Lead Details"
    });

    // load remote content
    dialog.load(
        url, 
        {}, 
        function (responseText, textStatus, XMLHttpRequest) {
            // remove the loading class
            dialog.removeClass('loading');
        }
    );

    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////

      ////// THIS IS WHERE I'M TRYING TO MAKE THE MAGIC HAPPEN ///////

    var modalTop    = Number($('.dialog-box-'+boxID).css("top").replace("px", "")) + 20;
    var modalLeft   = Number($('.dialog-box-'+boxID).css("left").replace("px", "")) + 20;
    $('.dialog-box-'+boxID).css("top", modalTop+"px !important");
    $('.dialog-box-'+boxID).css("left", modalLeft+"px !important");

    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////              


    //prevent the browser to follow the link
    return false;               

});

如果您多次单击该链接并四处移动新打开的对话框，您会发现它们只是堆叠在一起.我希望他们慢慢在页面顶部+ 20px处向左爬行+ 20px，然后一旦它达到200px便重新从头开始.

If you click the link multiple times and move the newly opened dialogs around, you'll see that they are just stacking on top of each other. I'd like them to slowly creep down the page +20px top, and +20px left, then once it hits 200px to start back at the beginning again.

推荐答案

关键是在.position函数的参数上添加偏移量.

The key is to add offsets on your parameters for the .position function.

您可以在此处看到它们.

这是更新的小提琴，在其中起作用. http://jsfiddle.net/xGsCC/

Here is an updated fiddle where it works. http://jsfiddle.net/xGsCC/

position: { my: ("center+"+ center + " top+" + top), at: "center top" }

只需根据口味将添加到中心和顶部的10更改为所需的任何内容即可.

Just change the 10 that is added to center and top to whatever you need depending on tastes.

注意:"close:"函数也将它们减去，以防止它们最终溢出.

Note: they are subtracted in the "close:" function as well to keep them from eventually overflowing.

这篇关于如何使用jQuery UI创建级联对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！