У текста диалогового окна jQuery UI есть опция новой строки?

Я делаю сайт, используя данные из Pokemon и пытаюсь выполнить диалоговое окно. Я попытался использовать символ новой строки JS в тексте:

function alertBox(monster) {
    $("#dialog").dialog();
    $("#dialog").dialog("option", "title", monster);
    $("#dialog").text("Height: "  + pokemon.height[monster] + "\n" +
                      "Weight: " + pokemon.weight[monster]);
}

... И я также пробовал использовать тег разрыва строки html:

function alertBox(monster) {
    $("#dialog").dialog();
    $("#dialog").dialog("option", "title", monster);
    $("#dialog").text("Height: "  + pokemon.height[monster] + "<\br>" +
                      "Weight: " + pokemon.weight[monster]);
}

Но, похоже, я не возвращаю новый эффект, который я ищу! Оболочка JS просто действует как пробел, а тег разрыва строки html просто конкатенируется с строкой. Есть ли способ заставить новую строку в тексте диалога?

Ответы

Ответ 1

Функция jQuery .text() автоматически ускользает от объектов HTML, поэтому тэг <br /> больше не интерпретируется как HTML, а вместо этого преобразуется в экранированный текст.

Чтобы предотвратить это экранирование HTML, вам нужно использовать .html() вместо .text(), чтобы установите содержимое:

function alertBox(monster) {
    $("#dialog").dialog();
    $("#dialog").dialog("option", "title", monster);
    $("#dialog").html("Height: "  + pokemon.height[monster] + "<br />" +
                      "Weight: " + pokemon.weight[monster]);
}

Ответ 2

Рассмотрим добавление:

$("#dialog").css("white-space","pre-wrap");

Это сделает \n значимым, и оно будет отображаться как таковое.

В качестве альтернативы рассмотрим использование некоторого фактического HTML. Например, ваш диалог может быть:

$("#dialog").html("<ul>" +
    "<li><b>Height:</b> "+pokemon.height[monster]+"</li>" +
    "<li><b>Weight:</b> "+pokemon.weight[monster]+"</li>" +
"</ul>");

Для более сложных макетов я бы предложил использовать шаблонную систему вместо HTML-кода жесткого кодирования в вашем JavaScript.

Ответ 3

Надеюсь, что это поможет увидеть, как работают функции text() val() и html()

$(document).ready(function () {

    $("#dialog").html("Height: " + 11 + "<br>" +
        "Weight: " + 22);

    $("#dialog2").val("Height: " + 11 + "\n" +
        "Weight: " + 22);

    $("#dialog3").text("Height: " + 11 + "\n" +
        "Weight: " + 22);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="dialog"></div>
<textarea rows="5" cols="20" name="text" id="dialog2"></textarea>
<textarea rows="5" cols="20" name="text" id="dialog3"></textarea>