Czy można użyć elementu DIV jako treści dla Popover na Twitterze?

151

Używam tutaj popovera bootstrapa Twittera . W tej chwili, kiedy przewijam tekst popover, pojawia się okienko z samym tekstem z atrybutu <a>' data-content. Zastanawiałem się, czy w ogóle można umieścić <div>wewnątrz popover. Potencjalnie chciałbym tam użyć php i mysql, ale jeśli uda mi się uruchomić div, myślę, że mogę znaleźć resztę. Próbowałem ustawić zawartość danych jako dividentyfikator, ale to nie zadziałało.

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>
kirby
źródło

Odpowiedzi:

305

Przede wszystkim, jeśli chcesz używać HTML w treści, musisz ustawić opcję HTML na true:

$('.danger').popover({ html : true});

Następnie masz dwie opcje ustawienia zawartości Popover

  • Użyj atrybutu data-content. Jest to opcja domyślna.
  • Użyj niestandardowej funkcji JS, która zwraca zawartość HTML.

Korzystanie z treści danych : musisz zmienić znaczenie zawartości HTML, na przykład:

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

Możesz ręcznie zmienić kod HTML lub użyć funkcji. Nie znam PHP, ale w Railsach używamy * html_safe *.

Korzystanie z funkcji JS : Jeśli to zrobisz, masz kilka opcji. Myślę, że najłatwiejszym rozwiązaniem jest umieszczenie zawartości div w dowolnym miejscu, a następnie napisanie funkcji, która przekaże jej zawartość do popover. Coś takiego:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

Twój kod HTML wygląda następująco:

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

Mam nadzieję, że to pomoże!

PS: Miałem kłopoty używając popover i nie ustawiając atrybutu title ... więc pamiętaj, aby zawsze ustawiać tytuł.

jävi
źródło
5
FYI, bootstrap ma klasę o nazwie „hide”, która ustawia display: none
Domenic
1
Uwaga, ale to podejście jest strasznie powolne dla IE7, prawdopodobnie dlatego, że kopia html wymaga wielu operacji na DOM. Z naszego doświadczenia wynika, że ​​nie nadaje się do użytku w IE7, więc musisz to naprawić w inny sposób.
philw
Jeśli okaże się, że potrzebujesz jakiejś funkcji javascript dołączonej do linku znajdującego się w twoim popover_content_wrapper, to rozwiązanie spowoduje problemy, ponieważ jest renderowane do html (bez twoich programów obsługi). Rozwiązaniem jest więc nasłuchiwanie zdarzenia „insert.bs.popover” i ponowne dołączenie modułu obsługi do nowego elementu, który jest teraz w DOM.
Ryan Shillington,
42

Opierając się na odpowiedzi jävi, można to zrobić bez identyfikatorów lub dodatkowych atrybutów przycisków, takich jak ten:

http://jsfiddle.net/isherwood/E5Ly5/

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My first popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My second popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My third popover content goes here.</div>

$('.popper').popover({
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});
isherwood
źródło
11

Inna alternatywna metoda, jeśli chcesz po prostu uzyskać efekt wyskoku. Oto metoda. Oczywiście jest to rzecz ręczna, ale ładnie wykonalna :)

HTML - przycisk

<button class="btn btn-info btn-small" style="margin-right:5px;" id="bg" data-placement='bottom' rel="tooltip" title="Background Image"><i class="icon-picture icon-white"></i></button>

HTML - popover

<div class="bgform popover fade bottom in">
            <div class="arrow"></div>
             ..... your code here .......
</div>

JS

$("#bg").click(function(){
        $('.bgform').slideToggle();
});
Jasny robotnik
źródło
U mnie to zadziałało, chociaż musiałem okablować na stałe lokalizację popovera, co nie jest świetne, np. Używając style="top: 200px; left: 90px;do bgformdiv. Czy istnieje sposób na wywołanie zamiast tego kodu automatycznego umieszczania programu bootstrap? Możesz także użyć fadeToggle () lub po prostu toggle (), aby uzyskać różne efekty w javascript.
Racing Tadpole
To jedyny właściwy sposób. html () tworzy kopię, co czyni ją niewykonalną do celów wiązania danych. Nie ma również żadnego zdarzenia związanego z przechodzeniem w stan przed przejściem, więc nie możesz powiązać popover, dopóki nie będzie widoczny.
Daryl Teo
11

Spóźniony na przyjęcie. Opierając się na innych rozwiązaniach. Potrzebowałem sposobu, aby przekazać docelową DIV jako zmienną . Oto co zrobiłem.

HTML dla źródła Popover (dodano wyskakujący atrybut danych, który będzie zawierał wartość dla docelowego identyfikatora / lub klasy DIV):

<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">

HTML dla zawartości Popover (używam klasy bootstrap hide):

<div id="popper-content" class="hide">Content goes here</div>

Scenariusz:

$('.popper').popover({
placement: popover_placement,
container: 'div.page-content',
html: true,
trigger: 'hover',
content: function () {
    var pop_dest = $(this).attr("data-pop");
    //console.log(plant);
    return $("#"+pop_dest).html();
}});
Roman K.
źródło
Czy możesz dodać skrzypce? To nie działa po wyjęciu z pudełka.
RedSands
8

Oprócz innych odpowiedzi. Jeśli zezwolisz htmlna opcje, możesz przekazać jQueryobiekt do treści i zostanie on dołączony do zawartości popover ze wszystkimi zdarzeniami i powiązaniami. Oto logika z kodu źródłowego:

  • jeśli przekażesz funkcję, zostanie ona wywołana w celu rozpakowania danych zawartości
  • jeśli htmlnie jest dozwolone, dane o treści zostaną zastosowane jako tekst
  • jeśli jest to htmldozwolone, a dane treści są ciągami, zostaną zastosowane jakohtml
  • w przeciwnym razie dane treści zostaną dołączone do kontenera zawartości popover
$("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});
Birbone
źródło
5

Wszystkie te odpowiedzi pomijają bardzo ważny aspekt!

Używając .html, innerHtml lub externalHtml, w rzeczywistości nie używasz elementu, do którego się odwołuje. Używasz kopii kodu HTML elementu. Ma to poważne wady.

  1. Nie możesz użyć żadnych identyfikatorów, ponieważ zostaną one zduplikowane.
  2. Jeśli załadujesz zawartość za każdym razem, gdy pojawi się popover, stracisz wszystkie dane wprowadzone przez użytkownika.

To, co chcesz zrobić, to załadować sam obiekt do popover.

https://jsfiddle.net/shrewmouse/ex6tuzm2/4/

HTML:

<h1> Test </h1>

<div><button id="target">click me</button></div>

<!-- This will be the contents of our popover -->
<div class='_content' id='blah'>
<h1>Extra Stuff</h1>
<input type='number' placeholder='number'/>
</div>

JQuery:

$(document).ready(function() {

    // We don't want to see the popover contents until the user clicks the target.
    // If you don't hide 'blah' first it will be visible outside of the popover.
    //
    $('#blah').hide();

    // Initialize our popover
    //
    $('#target').popover({
        content: $('#blah'), // set the content to be the 'blah' div
        placement: 'bottom',
        html: true
    });
    // The popover contents will not be set until the popover is shown.  Since we don't 
    // want to see the popover when the page loads, we will show it then hide it.
    //
    $('#target').popover('show');
    $('#target').popover('hide');

    // Now that the popover's content is the 'blah' dive we can make it visisble again.
    //
    $('#blah').show();


});
złośnica
źródło
1
Gdybym mógł zagłosować za to 100 razy, zrobiłbym to. Ciągle goniłem za swoim ogonem, próbując dowiedzieć się, dlaczego wywołanie $ ('#' + id) .val () w wyskakującym okienku zwracało pusty ciąg. Dzieje się tak z powodu cholernego html, który tworzy kopię div.
Ntellect13
-1

Dlaczego tak skomplikowane? po prostu umieść to:

data-html='true'
Sulung Nugroho
źródło
Wyjaśnij i dodaj skrzypce lub pełny kod. To nie jest pomocne, jak jest.
RedSands
-2
here is an another example

<a   data-container = "body" data-toggle = "popover" data-placement = "left" 
    data-content = "&lt;img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' &gt;&lt;div&gt;&lt;h3&gt; <?php echo $row1['1'] ?>&lt/h3&gt; &lt;p&gt; &lt;span&gt;<?php echo $countsss ?>videos &lt;/span&gt;
&lt;span&gt;<?php echo $countsss1 ?> followers&lt;/span&gt;
&lt;/p&gt;&lt;/div&gt;
<?php echo $row1['4'] ?>   &lt;hr&gt;&lt;div&gt;
&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Follow  &lt;/button&gt;  &lt;/span&gt; &lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt; Go to channel page&lt;/button&gt;   &lt;/span&gt;&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Close  &lt;/button&gt;  &lt;/span&gt;

 &lt;/div&gt;">

<?php echo $row1['1'] ?>
  </a>
Dinesh Sarak
źródło