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


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

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>
8   143   2012-01-16 07:04:32

8 ответов:

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

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

тогда у вас есть два варианта, чтобы установить содержимое диалогового окна

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

использование данных-контент: Вам нужно избежать содержимого 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... итак, не забудьте всегда устанавливать заголовок.

основываясь на ответе 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();
    }
});

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

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

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

JS

$("#bg").click(function(){
        $('.bgform').slideToggle();
});

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

HTML для источника Popover (добавлен атрибут данных data-pop что будет содержать значение для назначения DIV id / или класса):

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

HTML для содержимого Popover (я использую bootstrap hide class):

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

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

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

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

С помощью .html или innerHtml или outerHtml вы фактически не используете ссылочный элемент. Вы используете копию HTML-код этого элемента. Это имеет некоторые серьезные недостатки.

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

то, что вы хотите сделать, это загрузить сам объект в 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();


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

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

data-html='true'