Bootstrap의 'popover'컨테이너에 동적으로 클래스 추가
StackOverflow와 Google을 모두 철저히 검색했지만 비어 있습니다. 따라서 이미 요청 및 해결 된 경우 미리 사과드립니다.
NB : 저는 jQuery의 초보자이므로 어떻게 직접 작성해야할지 모르겠습니다. 나는 이것이 쉬운 코드 스 니펫이라고 확신하지만 내 머리를 감쌀 수는 없습니다.
내가하려는 것은 data-요소 (예 : data-class또는 이와 유사한)를 사용하여 새 클래스 (또는 ID, 더 이상 까다 롭지 않습니다!)를 최상위 팝 오버에 연결하는 것 <div>입니다. 현재 가지고있는 코드는 다음과 같습니다.
jQuery :
$('a[rel=popover]')
.popover({
placement : 'bottom',
trigger : 'hover'
})
.click(function(e) {
e.preventDefault()
});
HTML :
<a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here">
이상적으로는 내가 뱉어 낸 HTML의 종류는 다음과 같습니다.
<div class="popover ... dynamic-class">
<!-- remainder of the popover code as per usual -->
</div>
내가 할 수있는 일인가? 팝 오버에 대한 부트 스트랩 사이트의 문서는 약간 드물기 때문에 불행히도이 지점에 도달하는 데 시간이 조금 걸렸습니다.
모든 답변에 미리 감사드립니다!
Bootstrap을 해킹하지 않고 템플릿을 변경하지 않고도 호출자의 팝 오버 객체를 가져와 data해당 $tip속성에 액세스하여이를 수행 할 수 있습니다.
$('a[rel=popover]')
.popover({ placement: 'bottom', trigger: 'hover' })
.data('bs.popover')
.tip
.addClass('my-super-popover');
2.3 버전에서는 실제로 매우 간단한 또 다른 방법이 있습니다. 컨테이너에 클래스를 포함하도록 기본 템플릿을 재정의합니다.
var pop = $('a', this.el).popover({
trigger: 'click'
, template: '<div class="popover awesome-popover-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});
@bchhun이 쓴 글과 머리를 많이 긁는 것을 바탕으로, 저는 제 질문에 답해야한다고 느꼈습니다. 나는 또한 이것이 좋아하고 좋아한다는 것을 알았으므로 나처럼 jQuery의 초보자 인 다른 사람을 돕고 싶습니다.
현재 부트 스트랩 빌드 [v2.1.0]에서는 스크립트가 모두 통합되어 있습니다. 따라서 빌드에 모든 스크립트를 포함하고 새 줄을 편집하지 않았거나 일부를 제거하지 않았다면 축소되지 않은 .js파일의 1108 줄로 이동 하십시오. 다음과 같은 코드를 찾을 수 있습니다.
$tip
.css(tp)
.addClass(placement)
.addClass('in')
여기에 새 줄을 추가 할 것입니다.
.addClass(this.$element.attr("data-class"))
이제 data-class팝 오버 호출에 추가 할 때마다 속성이 <div class="popover">div에 추가됩니다 .
이제 보니까 너무 뻔해 :)
오래된 게시물이지만 참조 용으로 추가하고 있습니다. Shankar Cabus 응답을 수정 하면 동적 클래스를 부모에 추가하는 대신 생성 된 .popover div에 추가됩니다.
$(function(){
$('a[rel=popover]')
.popover({
placement : 'bottom',
trigger : 'hover'
})
.on("hover", function(){
$('.popover').addClass($(this).data("class")); //Add class .dynamic-class to <div>
});
});
도움이 되었기를 바랍니다 :)
툴팁을 초기화 할 때 숨겨진 "템플릿"옵션을 설정하기 만하면됩니다. 왜 부트 스트랩 팀이 이것을 비밀로 유지하는지 모르겠습니다 ...
$(elem).popover({
template: '<div class="popover YOURCLASS"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
}).popover('show');
도움이 되었기를 바랍니다...
다른 사람을 대상으로하지 않고 적절한 팝 오버에만 해당 클래스를 추가하는 것은 어떻습니까?
$('#someElement').popover({placement: function(context, src) {
$(context).addClass('my-custom-class');
return 'top'; // - 'top' placement in my case
});
또는 'someElement'의 데이터에서 사용자 정의 클래스 이름을 가져 오는 것과 같은 변형이 있습니다.
$('#someElement').popover({placement: function(context, src) {
$(context).addClass($(src).data('customClassName'));
return 'top';
});
이것은 몇 년 전에 요청되었으며 많은 답변이 있습니다. 하지만 ... 최근에 같은 문제를 직접 해결해야했고, (a) 소스 코드 조작을 피하고 싶었고 (b) 지속적으로 재사용 할 일반 솔루션이 필요했습니다 ( template: '...'각 초기화에 대한 솔루션 사용 이 중단되었습니다).
나의 해결책은 간단 충분하고, 정렬 표시 대답과 같은의입니다 - 내가 생각 된 팝 오버는 확장 의 tooltip.js라이브러리입니다. 내 말은-확인해 보세요 . 소스 코드는 거의 100 줄이 넘지 않습니다. 그래서라는 파일을 만들고 popover-extend.js전체 팝 오버 소스 코드를 복사하여 붙여 넣었습니다. 거기에서 간단하게 다음 행을 조작 할 수 있습니다.
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
// add this:
cls: ''
});
그때:
Popover.prototype.setContent = function () {
// add this:
if (this.options.cls) {
$tip.addClass(this.options.cls);
}
이제 다음을 수행 할 수 있습니다.
<a href="#" rel="popover"
data-cls="dynamic-class"
title="Title goes here" data-content="Content goes here">
저와 같고 더 많은 기능을 추가하고 싶다면 정말 좋은 접근 방식입니다. 예를 들어 다음은 제목에 일반 닫기 버튼을 추가 한 방법입니다 (팝 오버에 지정된 ID가 있어야 함).
// added this to the the DEFAULTS
close: ''
// added this to the setContent function
if (this.options.close) {
var id = this.$element.attr('id'),
btn = $("<button></button>", {
"class": "close",
"id": "close",
"onclick": "$('#"+id+"').popover('hide');"
}),
title = $tip.find('.popover-title');
btn.html("×");
btn.appendTo(title);
}
멋진 점은 DEFAULTS에서 설정 한 모든 것이 html을 통해 구성 될 수 있다는 것입니다. 즉 foo, 라는 변수를 추가 하면을 통해 자동으로 조작 할 수 있습니다 data-foo=.
이것이 소스 코드 조작에 대한 대안을 찾는 사람에게 도움이되기를 바랍니다.
나는 같은 문제가 있었고 @Kate의 대답이 마음에 들었지만 소스 파일의 변경으로 인해 앞으로 많은 문제가 발생할 수 있으므로 부트 스트랩 버전을 업데이트하면 이러한 작은 변경 사항을 잊을 것입니다. 그래서 다른 방법을 찾았습니다.
$(element).popover({...}).data("popover").tip().addClass("your_class")
@CorayThan으로 수정하십시오. data("popover")
popover의 tip () 메소드 는 popover 요소를 반환하고 생성되지 않았을 때 생성하므로 popover 초기화에 있더라도 항상 올바른 popover 요소를 얻을 수 있습니다 (이것은 내 경우 = D입니다).
여기에 늦어지고 피곤해 지지만 부트 스트랩의 js 파일을 업데이트하기로 결정한 경우 미래에 작동하지 않을 빠른 한 줄짜리 줄이 있습니다.
150 행에 있는이 요점 의 bootstrap-tooltip.js 파일을 살펴보십시오 .
수정 된 툴팁은 다음과 같습니다.
아래에있는 인스펙터의 창을 확인하면 동적 클래스 가 툴팁에 추가되었음을 알 수 있습니다.
내일 더 장기적이고 적절한 답변을 게시하겠습니다.
이것은 나를 위해 작동합니다. 여기 , 이벤트 섹션 의 부트 스트랩 문서에서 영감을 얻었습니다 .
$("a[rel=popover]").popover().on("show.bs.popover", function(){
$(".popover").addClass("your-custom-class");
});
또한 '템플릿'옵션을 사용할 수 있습니다.
$element.popover({
html: true,
trigger: 'click',
template: '<div class="popover '+MY_CLASS+'" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
content: function() {
return 'hello';
}
});
데이터 클래스 속성에서 MY_CLASS를 업데이트하십시오.
이것은 당신의 클래스를 외부에서 확장 하고, 당신의 함수에 bootstrap core class속성 data-class과 옵션을 추가하십시오.dataClass:tooltip
!function($){
$.extend($.fn.tooltip.Constructor.DEFAULTS,{
dataClass: false
});
var Tooltip = $.fn.tooltip.Constructor;
_show = Tooltip.prototype.show;
Tooltip.prototype.show = function (){
_show.apply(this,Array.prototype.slice.apply(arguments));
if (this.options.dataClass!=="undefined" && this.options.dataClass){
var that = this;
var $tip = this.tip();
if (this.$element.attr("data-class") !== undefined)
$tip.addClass(this.$element.attr("data-class"));
}
};
}(jQuery);
부트 스트랩 v3.3.2의 경우 bootstrap.js에서 다음 행을 찾을 수 있습니다.
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.addClass(placement)
.data('bs.' + this.type, this)
그런 다음이 줄을 추가합니다
.addClass(this.$element.attr("data-class"))
이제 팝 오버 요소에 클래스를 추가하려면 속성 만 입력하면 data-class="classexemple"모든 것이 완벽하게 작동합니다.
www.mixpres.com에서 찾아보세요
container옵션을 사용 하여이 문제를 해결할 수 있습니다 .
$('[data-toggle="popover"]').popover({
container: '#foo'
});
또는 태그 속성을 통해 설정
<a href="#" data-toggle="popover" data-container="#foo" data-content="Content">Foo</a>
그리고 body 태그를 닫기 전에 이것을 어딘가에 추가하십시오.
<div id="foo"></div>
그런 다음 #foo > .popover. 나는 이것이 하나의 해결책이 아니라는 것을 알고 있지만 그것을 수행하는 한 가지 방법입니다.
Bootstrap 4에서는 다음 data-template속성을 사용할 수 있습니다 .
<button data-toggle="popover" data-template='<div class="popover MYSUPERCLASS" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' data-offset="-10 0" data-html="true" data-trigger="focus" data-placement="bottom" data-content='My Popover'>Button</button>
$('a[rel=popover]')
.popover({ placement: 'bottom', trigger: 'hover' })
.data('bs.popover')
.addAttachmentClass('my-own-popover')
당신은 얻을 것이다 bs-popover-my-own-popover클래스 내부의 .popover요소를.
죄송합니다. 질문을 잘 이해하지 못했습니다.하지만 원하는 것은 상위 div를 추가하는 것입니까? 진정하세요 ... 이것이 당신이 원하는 것인지 확인하십시오 :
$(function(){
$('a[rel=popover]')
.popover({
placement : 'bottom',
trigger : 'hover'
})
.on("click", function(){
$(this).closest("div").addClass($(this).data("class")); //Add class .dynamic-class to <div>
});
});
데모 : http://jsfiddle.net/PRQfJ/
BS의 모든 버전에서 작동하는 가장 좋은 옵션은 특정 클래스 내부로 만들고이를 표시 한 후 해당 클래스를 찾고 클래스 이름을 팝 오버 패 런트에 추가하는 것입니다.
// create a template that add the message inside
var $tmp = $("<div class='popoperrormessage'>" + error + "</div>");
$(this).popover("destroy").popover({
trigger: "manual",
animation: false,
html: true,
placement:"right",
content: $tmp,
container: "body"
}).popover("show");
// now we have to find the parent of the popoperrormessagemessage
$(".popoperrormessage").parents(".popover").addClass("hello");
이제 팝 오버에 hello 클래스가 있습니다.
내 해결 방법은 아마도 가장 효율적이지는 않지만 구현하는 것이 가장 쉽다는 것을 알았습니다.
$('[data-content]').each(function(){
var options = {
html: true //optional
};
if ($(this)[0].hasAttribute('data-class')) {
options['template'] = '<div class="popover" role="tooltip ' + $(this).attr('data-class') + '"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';
}
$(this).popover(options);
});
data-class="custom-class"다른 예제처럼 요소에 추가 하기 만하면 됩니다.
이 문제에 대한 최선의 해결책은 팝 오버를 확장하고 자신 만의 팝 오버 버전을 구축하는 것입니다. 아래는 코드이며 부트 스트랩 버전 3.3.7을 기반으로합니다.
(function($){
var PopoverEx = function(element, options){
this.init('popover', element, options);
}
PopoverEx.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {
constructor: PopoverEx,
tip: function(){
if(!this.$tip){
this.$tip = $(this.options.template);
if(this.options.modifier) this.$tip.addClass(this.options.modifier);
}
return this.$tip;
}
});
$.fn.popoverex = function(option){
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.popover')
var options = typeof option == 'object' && option
if (!data && /destroy|hide/.test(option)) return
if (!data) $this.data('bs.popover', (data = new PopoverEx(this, options)))
if (typeof option == 'string') data[option]()
})
}
})(window.jQuery);
용법
HTML 코드
<a href="#" class="btn btn-large btn-danger"
rel="popover"
data-modifier="popover-info"
title="A Title"
data-content="And here's some amazing content.right?">Hover for popover</a>
JS 스크립트
jQuery(document).ready(function($) {
$('[rel="popover"]').popoverex();
});
이 git 페이지 https://gist.github.com/vinoddC/475669d94e97f4d7b6bcfde4cef80420 에서 전체 버전과 설명을 찾을 수 있습니다.
브라이언 우드워드 작품의 업데이트 된 버전입니다.
왜 이렇게 하려는지 잘 모르겠지만 제 예에서는 사용자 지정 스타일을 설정하고 싶었습니다. 따라서 CSS에서는 현재 팝 오버에 대한 올바른 선택기를 작성했습니다. a.rating-popover-이것은 팝 오버를 여는 링크입니다. -> 팝 오버 요소는 해당 요소의 다음 요소에 생성됩니다. 그래서 우리는 그것을 선택할 수 있습니다
a.rating-popover + div.popover{
background: blue;
}
그리고 짜잔, 파란색 배경. .rating-popover 요소로 열린 팝 오버에만 해당됩니다.
참고 URL : https://stackoverflow.com/questions/12170357/dynamically-add-a-class-to-bootstraps-popover-container
'Program Tip' 카테고리의 다른 글
| 제출 후 유효성 검사 오류가 발생하면 p : dialog를 열어 둡니다. (0) | 2020.11.22 |
|---|---|
| 네트워크 유형이 2G, 3G 또는 4G인지 확인하는 방법 (0) | 2020.11.22 |
| 부트 스트랩 : 패널 바닥 글에서 왼쪽 및 오른쪽으로 당겨 바닥 글 나누기 (0) | 2020.11.22 |
| mongoimport를 사용하여 파일에서 mongodb로 json 가져 오기 (0) | 2020.11.22 |
| 부모 컨테이너를 기준으로 범위의 시작 및 끝 오프셋 가져 오기 (0) | 2020.11.22 |