Wie fügt man mehrere Dateninhalte in jQuery popup hinzu?

Ich möchte, dass mein Popover mehrere Dateninhalte anzeigt, d. H. Drei verschiedene Textzeilen innerhalb des Popover. Ich habe den folgenden Code, der von w3schols stammt.Wie fügt man mehrere Dateninhalte in jQuery popup hinzu?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h3>Popover Example</h3> 
    <a href="#" data-toggle="popover" title="Popover Header" data-placement="bottom" data-content="Info 1">Toggle popover</a> 
</div> 

<script> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
}); 
</script> 

</body> 
</html>

Das Popover sieht so aus.

Popover example

Ich mag die popover wie "Info 1" drei weitere Optionen anzuzeigen, "Info 2" und "Info 3" wie eine Listenansicht. Wie kann ich das erreichen?

Quelle

2016-06-11 Arijit Goswami

Versuchen:

Demo; http://jsfiddle.net/jo6og612/

1) definieren div mit HTML, die Sie in popover zeigen wollen

<div class="container"> 
    <h3>Popover Example</h3> 
    <a href="#" data-toggle="popover" title="Popover Header" data-placement="bottom">Toggle popover</a> 
    <div id="popover-content"> 
    <ul> 
     <li> Info 1 </li> 
     <li> Info 2 </li> 
     <li> Info 3 </li> 
    </ul> 
    </div> 
</div>

2) Inhalte hinzufügen und HTML-Eigenschaften von popover

<script> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(
     html: true, 
     content: function() { 
      return $('#popover-content').html(); 
     } 
    ); 
}); 
</script>

Quelle

2016-06-11 06:38:10

Wie fügt man mehrere Dateninhalte in jQuery popup hinzu?

Antwort

Verwandte Themen