Hat der Text des jQuery UI-Dialogfelds eine Zeilenumbruchoption?

Question

Ich mache eine Website mit Daten von Pokemon und versuche, ein Dialogfeld auszuführen. Ich habe versucht mit JS Newline-Zeichen im Text:

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

... Und ich habe auch versucht, die HTML-Zeilenumbruch-Tag:

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

aber scheint weder die Newline zurückkehren Effekt, den ich suche! Der JS-Zeilenumbruch fungiert nur als Leerzeichen, und das HTML-Zeilenumbruch-Tag wird nur mit der Zeichenfolge verkettet. Gibt es eine Möglichkeit, eine neue Zeile im Dialogtext zu erzwingen?

Answer 1

Die jQuery .text()-Funktion entkoppelt automatisch HTML-Entitäten, sodass Ihr <br />-Tag nicht mehr als HTML interpretiert wird, sondern in Escape-Text konvertiert wird.

diese HTML Flucht zu verhindern, müssen Sie .html() statt .text() verwenden, um den Inhalt zu setzen:

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

Answer 2

Erwägen Sie:

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

Dies wird die \n signifikant machen, und es wird als solche machen.

Alternativ können Sie einige tatsächliche HTML verwenden. Zum Beispiel könnte Ihr Dialog sein:

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

Für komplexere Layouts, würde ich vorschlagen, ein Template-System statt hartzucodieren HTML-Code in Ihr JavaScript verwenden.

Answer 3

Hoffe, es wird dazu beitragen, um zu sehen, wie der Text() val() und html() funktioniert

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