Можно ли использовать div в качестве контента для Twitter'а Popover?

151

Я использую попсовый твиттер здесь . Сейчас, когда я прокрутка над текстом поповера поповер появляется только с текстом из <a>«s data-contentатрибута. Мне было интересно, можно ли было положить <div>внутрь поповер. Потенциально я хотел бы использовать там php и mysql, но если бы я мог заставить работать div, я думаю, что смогу выяснить все остальное. Я попытался установить data-content в divID, но это не сработало.

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>
Кирби
источник

Ответы:

305

Прежде всего, если вы хотите использовать HTML внутри контента, вам нужно установить для параметра HTML значение true:

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

Тогда у вас есть два варианта, чтобы установить контент для Popover

  • Используйте атрибут data-content. Это опция по умолчанию.
  • Используйте пользовательскую функцию JS, которая возвращает содержимое HTML.

Использование data-content : вам нужно экранировать HTML-контент, что-то вроде этого:

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

Вы можете либо выйти из HTML-кода вручную, либо использовать функцию. Я не знаю о PHP, но в Rails мы используем * html_safe *.

Использование функции JS : если вы сделаете это, у вас есть несколько вариантов. Самое простое, что я думаю, - это спрятать содержимое div в любом месте, а затем написать функцию для передачи его содержимого в popover. Что-то вроде этого:

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

И тогда ваш HTML выглядит так:

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

Надеюсь, поможет!

PS: у меня были некоторые проблемы, когда я использовал popover и не устанавливал атрибут title ... так что не забывайте всегда устанавливать заголовок.

JAVI
источник
5
К вашему сведению, у bootstrap есть класс с именем hide, который устанавливает отображение: нет
Domenic,
1
Просто примечание, но этот подход ужасно медленен для IE7, предположительно потому, что копия html включает в себя много манипуляций с DOM. По нашему опыту, в IE7 его нельзя использовать, поэтому вам нужно наброситься на него по-другому.
philw
Если вы обнаружите, что вам нужна какая-то функция javascript, прикрепленная к ссылке, которая находится внутри вашей popover_content_wrapper, это решение вызовет проблемы, потому что оно отображается в html (без ваших обработчиков). Тогда решение состоит в том, чтобы прослушать событие "вставлено.bs.popover" и повторно присоединить ваш обработчик к новому элементу, который теперь находится в DOM.
Райан Шиллингтон
42

Основываясь на ответе jävi, это можно сделать без идентификаторов или дополнительных атрибутов кнопок, например:

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
источник
11

Еще один альтернативный метод, если вы хотите просто посмотреть и почувствовать поп-ап. Ниже приведен метод. Конечно, это ручная вещь, но приятно работоспособная :)

HTML - кнопка

<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 - поповер

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

JS

$("#bg").click(function(){
        $('.bgform').slideToggle();
});
Яркий работник
источник
Это сработало для меня, хотя мне пришлось жестко связать местоположение поповера, что не очень хорошо, например, использовать style="top: 200px; left: 90px;для bgformdiv. Можно ли вместо этого вызвать код автоматического размещения начальной загрузки? Кроме того, вы можете использовать fadeToggle () или просто toggle () для различных эффектов в JavaScript.
Гоночный головастик
Это единственный правильный путь. html () создает копию, делая ее неработоспособной для целей привязки данных. Также нет события для подключения в состояние перед переходом, поэтому вы не можете привязаться к popover, пока он не станет видимым.
Дэрил Тео
11

Поздно на вечеринку. Создавая другие решения. Мне нужен был способ передать целевой DIV в качестве переменной . Вот что я сделал.

HTML для источника Popover (добавлен атрибут data data pop, который будет содержать значение для целевого идентификатора DIV / или класса):

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

HTML для контента Popover (я использую класс начальной загрузки):

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

Автор сценария:

$('.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();
}});
Роман К
источник
Можете ли вы добавить скрипку? Это не работает из коробки.
RedSands
8

В дополнение к другим ответам. Если вы разрешите htmlв настройках, вы можете передать jQueryобъект контенту, и он будет добавлен к контенту поповера со всеми событиями и привязками. Вот логика из исходного кода:

  • если вы передадите функцию, она будет вызвана, чтобы развернуть данные содержимого
  • если htmlне разрешено, данные контента будут применяться как текст
  • если htmlразрешено и данные содержимого являются строковыми, они будут применяться какhtml
  • в противном случае данные контента будут добавлены в контейнер контента popover
$("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});
Birbone
источник
5

Все эти ответы упускают очень важный аспект!

Используя .html, innerHtml или outerHtml, вы фактически не используете указанный элемент. Вы используете копию html элемента. Это имеет некоторые серьезные недостатки.

  1. Вы не можете использовать любые идентификаторы, потому что идентификаторы будут продублированы.
  2. Если вы загружаете содержимое каждый раз, когда отображается всплывающее окно, вы потеряете весь ввод пользователя.

То, что вы хотите сделать, это загрузить сам объект в поповер.

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();


});
землеройка
источник
1
Если бы я мог поднять это 100 раз, я бы. Я преследовал свой хвост навсегда, пытаясь понять, почему вызов $ ('#' + id) .val () во всплывающем окне продолжал возвращать пустую строку. Это из-за того, что чертовски html делает копию div.
Ntellect13
-1

Почему так сложно? просто поместите это:

data-html='true'
Сулунг Нугрохо
источник
Пожалуйста, объясните и добавьте скрипту или полный код. Это не полезно, как есть.
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>
Динеш Сарак
источник