2011-10-05 8 views
12

मैं ट्विटर के बूटस्ट्रैप जेएस से पॉपओवर सुविधा का उपयोग कर रहा हूं। मैं एक बटन है, जिसे क्लिक करें, यह जावास्क्रिप्ट निष्पादित करता है:ट्विटर के बूटस्ट्रैप का उपयोग करते समय, मैं पॉपओवर की सामग्री कैसे बदल सकता हूं?

$("#popover_anchor").popover({trigger: "manual", 
           placement: "below", 
           offset: 10, 
           html: true, 
           title: function(){return "TITLE";}, 
           content: function(){return "CONTENT TEXT";}}); 
$("#popover_anchor").popover("show"); 

वहाँ भी एक और बटन है कि मूलतः एक ही जावास्क्रिप्ट निष्पादित करता है, सिवाय इसके कि शीर्षक और सामग्री कार्यों अलग पाठ वापसी है।

ध्यान दें कि वे दोनों अलग-अलग सामग्री के साथ, उसी तत्व पर पॉपओवर को परिभाषित करते हैं।

समस्या यह है कि, एक बार या तो बटन क्लिक किया जाता है और जेएस निष्पादित किया जाता है, अन्य बटन से आने वाले क्लिक पॉपओवर सामग्री को बदल देंगे। तो पॉपओवर शुरू होने के बाद, मैं सामग्री को अपडेट/बदल सकता हूं?

उत्तर

16

title विशेषता का उद्देश्य function का मान स्वीकार करना है जो यह बहुत कार्यक्षमता प्रदान करता है।

उदाहरण के लिए

: यदि आप करने के लिए अपने शीर्षक सेट:

title: function() { return randomTxt(); } 

और तुम हो,

function randomTxt() 
{ 
    arr = ['blah blah', 'meh', 'another one']; 
    return arr[Math.floor(Math.random() * 4)]; 
} 

आप अपने पॉपओवर के लिए भिन्न शीर्षक हो रही रखेंगे। एक शीर्षक गतिशील रूप से लाने के लिए randomText के तर्क को बदलने के लिए आप पर निर्भर है।

+1

तो पॉपओवर को फिर से शुरू करने के बजाय, मुझे शीर्षक/सामग्री विशेषताओं के लिए एक अलग फ़ंक्शन असाइन करना चाहिए? – brentmc79

6

आपको लगता है कि सीधे पॉपओवर उदाहरण डेटा तक पहुँचने के रूप में द्वारा यहां बताए कर सकते हैं:
https://github.com/twbs/bootstrap/issues/813

यह उदाहरण lnked पेज से लिया जाता है:

var myPopover = $('#element').data('popover') 
myPopover.options.someOption = 'foo' 
0

यहाँ समाधान मैं वहीं कहा है:

Bootstrap popover content cannot changed dynamically

var popover = $('#exemple').data('bs.popover'); 
popover.options.content = "YOUR NEW TEXT"; 

पॉपओवर एक ऑब्जेक्ट है यदि आप इसके बारे में अधिक जानना चाहते हैं, तो आप इसे परिभाषित करने के बाद console.log (popover) करने का प्रयास करें कि आप इसका उपयोग कैसे कर सकते हैं!