Как я могу использовать div в Popover Twitter с несколькими кнопками?

Это решение подходит для случаев с одной кнопкой: Можно ли использовать div в качестве контента для всплывающего окна Twitter

Но на моей странице есть куча всплывающих окон (скажем, 50-100).
Поэтому мне нужно изменить это решение.

Это решение wa @jävi:

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

У каждой моей кнопки есть свой идентификатор.

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

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

Итак, как я могу переписать этот фрагмент кода javascript, чтобы охватить все мои кнопки?


javascript html jquery twitter-bootstrap popover
person trante    schedule 05.07.2012    source источник

Ответы (5)


arrow_upward
13
arrow_downward

Только что сам с этим боролся. Вам нужно поместить идентификатор в элемент, который вызывает всплывающее окно. Используйте настраиваемый атрибут данных, подобный этому (называемый «data-id»):

<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>

Затем вы можете немного изменить свой javascript, чтобы программно получить значение атрибута data-id:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $($(this).attr('data-id')).html();
    }
  });
});
person Jeff Perrin    schedule 25.07.2012

arrow_upward
4
arrow_downward

Если вы не хотите загрязнять исходный элемент другим атрибутом data-*, вот простой и универсальный способ использования атрибута data-content в качестве текста или селектора CSS:

$('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
        var content = $(this).data('content');
        try { content = $(content).html() } catch(e) {/* Ignore */}
        return content;
    }
});

Теперь вы можете использовать атрибут data-content с текстовым значением:

<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>

...или используйте атрибут data-content со значением селектора CSS:

<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>

<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>

Вы можете протестировать это решение здесь: http://jsfiddle.net/almeidap/eX2qd/

...или здесь, если вы используете Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (обратите внимание на имя атрибута data-content-target!)

person almeidap    schedule 19.05.2013

arrow_upward
1
arrow_downward

Вы можете сделать это без дополнительных атрибутов кнопки, например:

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

.popper-content {
    display: none;
}

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

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

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

$('.popper').popover({
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.pop-content').html();
    }
});
person isherwood    schedule 07.02.2014

arrow_upward
0
arrow_downward

Сохраните идентификатор div, содержащего всплывающий HTML-код, внутри атрибута rel элемента a.

<a rel="popover_div2" ... >click</a>

А затем получите ссылку привязки клика внутри вашего прослушивателя кликов (не уверен, как метод popover хранит его, но я уверен, что так и есть):

var myRel = $(this).attr(rel);
return $(myRel).html();
person Doug Molineux    schedule 05.07.2012

arrow_upward
0
arrow_downward

Для меня это должно быть

data-id="#popover_div1"

в HTML для кнопки (с # для обращения к идентификатору div).

person Bruno    schedule 03.03.2013