Il testo della finestra di dialogo dell'interfaccia utente jQuery ha un'opzione di nuova riga?

Question

Realizzo un sito Web utilizzando i dati di Pokemon e cercando di eseguire una finestra di dialogo. Ho provato con JS carattere di nuova riga nel testo:

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

... E ho anche provato utilizzando il codice HTML tag di interruzione di riga:

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

ma sembra non essere di ritorno il ritorno a capo effetto che sto cercando! JS newline agisce semplicemente come spazio e il tag di interruzione di riga html si concatena semplicemente sulla stringa. C'è un modo per forzare una nuova riga nel testo del dialogo?

Answer 1

La funzione jQuery .text() scappa automaticamente le entità HTML, quindi il tag <br /> non viene più interpretato come HTML, ma viene convertito in testo di escape.

Onde evitare che questo HTML, è necessario utilizzare .html() invece di .text() per impostare il contenuto:

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

Answer 2

considerare l'aggiunta di:

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

Questo renderà la \n significativa, e renderà come tale.

In alternativa, è possibile utilizzare un codice HTML effettivo. Per esempio, il dialogo potrebbe essere:

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

Per i layout più complessi, io suggerirei di utilizzare un sistema di template invece di hardcoding HTML nella tua JavaScript.

Answer 3

Speranza che aiuterà a vedere come il testo() val() e html() funziona

$(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>