Можно ли использовать div в качестве контента для Popover Twitter
я использую поповер bootstrap twitter здесь. Прямо сейчас, когда я прокручиваю текст popover, появляется popover только с текстом из <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 ответов
прежде всего, если вы хотите использовать HTML внутри содержимого, вам нужно установить параметр HTML в true:
$('.danger').popover({ html : true});
тогда у вас есть два варианта, чтобы установить содержимое диалогового окна
- используйте атрибут data-content. Это параметр по умолчанию.
- используйте пользовательскую функцию JS, которая возвращает содержимое HTML.
использование данных-контент: Вам нужно избежать содержимого HTML, что - то вроде это:
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
title="Title" href='#'>Click</a>
вы можете либо избежать HTML вручную, либо использовать функцию. Я не знаю о PHP, но в Rails мы используем * html_safe*.
использование функции JS: Если вы это сделаете, у вас будет несколько вариантов. Проще всего, я думаю, поместить ваш контент div, скрытый там, где вы хотите, а затем написать функцию для передачи его содержимого в popover. Что-то вроде этого:--5-->
$(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-код - пирог
<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 data-pop это будет содержать значение для назначения DIV id / или класса):
<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">
HTML для содержимого Popover (я использую класс Bootstrap hide):
<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 элемента. У этого есть серьезные недостатки.
- вы не можете использовать идентификаторы, потому что идентификаторы будут дублироваться.
- если вы загружаете содержимое каждый раз, когда отображается всплывающее окно, вы потеряете все пользовательские вход.
то, что вы хотите сделать, это загрузить сам объект в 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 = "<img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' ><div><h3> <?php echo $row1['1'] ?></h3> <p> <span><?php echo $countsss ?>videos </span>
<span><?php echo $countsss1 ?> followers</span>
</p></div>
<?php echo $row1['4'] ?> <hr><div>
<span> <button type='button' class='btn btn-default pull-left green'>Follow </button> </span> <span> <button type='button' class='btn btn-default pull-left green'> Go to channel page</button> </span><span> <button type='button' class='btn btn-default pull-left green'>Close </button> </span>
</div>">
<?php echo $row1['1'] ?>
</a>