如何在添加新div时自动滚动JQuery UI对话框？

I have a JQuery UI dialog popup that displays a form. By clicking add more button i can add new form into the JQuery UI dialog.

我有一个显示表单的JQuery UI对话框弹出窗口。通过单击添加更多按钮，我可以将新表单添加到JQuery UI对话框中。

How can I make the JQuery UI dialog automatically scroll and show the user the new blank form when the add new button is clicked.

当单击添加新按钮时，如何使JQuery UI对话框自动滚动并向用户显示新的空白表单。

Div added

Div添加了

<div>
    <form id="1">
        <label class="dbright">DashBoard ID:</label><span class="dbleft"><select id="dashboard_id" class="dbSettingDD"><option>-------Select-------</option><option id="#dashboard">Inventory</option><option id="#dashboard2">Quality</option><option id="#dashboard3">Complaints</option></select><br></span>

        <label class="dbright">Filtering parameter:</label><span class="dbleft"><select id="filter_by"><option>-------Select-------</option></select><br></span>

        <label class="dbright">Y-Axis:</label><span class="dbleft"><select id="yAxis"><option>-------Select-------</option></select><br></span>

        <label class="dbright">Chart Tiltle:</label><span class="dbleft"><input type="text" id="title"><br></span>

        <label class="dbright">Chart Type:</label><span class="dbleft"><input type="text" id="chart_type"><br></span>

        <label class="dbright">Main Chart:</label><span class="dbleft"><input type="radio" name="mainchart" value="yes">Yes <input type="radio" name="mainchart" value="No">No<br></span>

    </form>
</div>

Dialog

对话

$("#dbSetting_div").dialog({
    height: 315,
    width: 500,
    autoOpen: false,
    modal: true,
    draggable: false,
    buttons: {
        "Save": function () {},
        "Add More": function () {
            l_i++;
            formHtml = "<div>";
            formHtml += "<form id='" + l_i + "'>";
            formHtml += "<label class = 'dbright'>DashBoard ID: </label><span class = 'dbleft'><select id='dashboard_id' class='dbSettingDD'><option>-------Select-------</option>" + dropDownDashboardName + "</select></br></span>";
            formHtml += "<label class = 'dbright'>Filtering parameter: </label><span class = 'dbleft'><select id='filter_by'><option>-------Select-------</option></select></br></span>";
            formHtml += "<label class = 'dbright'>Y-Axis: </label><span class = 'dbleft'><select id='yAxis'><option>-------Select-------</option></select></br></span>";
            formHtml += "<label class = 'dbright'>Chart Tiltle: </label><span class = 'dbleft'><input type='text' id='title'/></br></span>";
            formHtml += "<label class = 'dbright'>Chart Type: </label><span class = 'dbleft'><input type='text' id='chart_type'/></br></span>";
            formHtml += "<label class = 'dbright'>Main Chart: </label><span class = 'dbleft'><input type='radio' name='mainchart' value='yes'/>Yes <input type='radio' name='mainchart' value='No'/>No</br></span>";
            formHtml += "</form>";
            formHtml += "</div>";
            $("#dbSetting_div").append("<p>" + formHtml + "</p>");
            console.log(scroll);
        }
    }
}).css("font-size", "12px");

1 个解决方案

#1

Here's how I would do it, especially the adding of the form's new HTML.

这是我将如何做，特别是添加表单的新HTML。

First off, I would add the HTML to the Page, with a display of none and some sort of template ID, like so:

首先，我将HTML添加到页面，显示无和某种模板ID，如下所示：

<div id="formTemplate" style="display: none;">
    <form id="1">
        <label class="dbright">DashBoard ID:</label><span class="dbleft"><select id="dashboard_id" class="dbSettingDD"><option>-------Select-------</option><option id="#dashboard">Inventory</option><option id="#dashboard2">Quality</option><option id="#dashboard3">Complaints</option></select><br></span>
        <label class="dbright">Filtering parameter:</label><span class="dbleft"><select id="filter_by"><option>-------Select-------</option></select><br></span>
        <label class="dbright">Y-Axis:</label><span class="dbleft"><select id="yAxis"><option>-------Select-------</option></select><br></span>
        <label class="dbright">Chart Tiltle:</label><span class="dbleft"><input type="text" id="title"><br></span>
        <label class="dbright">Chart Type:</label><span class="dbleft"><input type="text" id="chart_type"><br></span>
        <label class="dbright">Main Chart:</label><span class="dbleft"><input type="radio" name="mainchart" value="yes">Yes <input type="radio" name="mainchart" value="No">No<br></span>
    </form>
</div>

Then, I can use this in the add method to quickly clone the material i need, remove the display none, and paste new form in! Something like so:

然后，我可以在add方法中使用它来快速克隆我需要的材料，删除display none，并粘贴新表单！像这样的东西：

$("#dbSetting_div").css("font-size", "12px").dialog({
    height: 315,
    width: 500,
    autoOpen: false,
    modal: true,
    draggable: false,
    buttons: {
        "Save": function () { /*    do work */ },
        "Add More": function () {
            $("#dbSetting_div").append($('<p />').append($('#formTemplate').clone().show()))
                .animate({ scrollTop: $('#dbSetting_div')[0].scrollHeight}, 500);
        }
    }
});

Within that, I use .animate to scroll dialog to bottom whenever a new form is added. You could also just go pure straight change and skip the animation like: $("#dbSetting_div").scrollTop($('#dbSetting_div')[0].scrollHeight);

在其中，每当添加新表单时，我都会使用.animate将对话框滚动到底部。您也可以进行纯粹的直接更改并跳过动画，如：$（“＃dbSetting_div”）。scrollTop（$（'＃dbSetting_div'）[0] .scrollHeight）;

Anyway, that should help ya get started. Let me know if you need more help. For now, check out the

无论如何，这应该有助于你开始。如果您需要更多帮助，请告诉我。现在，看看

Working Example