क्या ट्विटर के पॉपओवर के लिए सामग्री के रूप में एक डिव का उपयोग करना संभव है

Question

मैं यहां ट्विटर के बूटस्ट्रैप के पॉपओवर का उपयोग कर रहा हूं । अभी, जब मैं पॉपओवर पाठ पर स्क्रॉल एक पॉपओवर से सिर्फ पाठ के साथ प्रकट होता <a>है data-contentविशेषता। मैं सोच रहा था अगर वहाँ वैसे भी एक डाल करने के लिए किया गया था<div> पॉपओवर के अंदर । संभावित रूप से, मैं वहां php और mysql का उपयोग करना चाहूंगा, लेकिन अगर मुझे काम करने के लिए div मिल सकता है तो मुझे लगता है कि मैं बाकी का पता लगा सकता हूं। मैंने एक divआईडी में डेटा-सामग्री सेट करने की कोशिश की , लेकिन यह काम नहीं किया।

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>

Answer 1

सबसे पहले, यदि आप HTML सामग्री का उपयोग करना चाहते हैं, तो आपको HTML विकल्प को सही करने की आवश्यकता है:

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

फिर आपके पास पॉपओवर के लिए सामग्री सेट करने के लिए दो विकल्प हैं

• डेटा-सामग्री विशेषता का उपयोग करें। यह डिफॉल्ट विकल्प है।
• एक कस्टम 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 के बारे में नहीं जानता, लेकिन रेल में हम * html_safe * का उपयोग करते हैं।

JS फ़ंक्शन का उपयोग करना : यदि आप ऐसा करते हैं, तो आपके पास कई विकल्प हैं। मुझे सबसे आसान लगता है कि आप जहां चाहें अपनी दिव्य सामग्री को छिपा कर रख सकते हैं और फिर इसकी सामग्री को पॉपओवर करने के लिए एक फंक्शन लिख सकते हैं। कुछ इस तरह:

$(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>

आशा करता हूँ की ये काम करेगा!

पुनश्च: पॉपओवर का उपयोग करते समय और शीर्षक विशेषता को सेट न करने पर मुझे कुछ परेशानी हुई है ... इसलिए, हमेशा शीर्षक सेट करना याद रखें

Comments

FYI करें, बूटस्ट्रैप में एक वर्ग है जिसे "Hide" कहा जाता है जो डिस्प्ले सेट करता है: कोई नहीं

— डोमिनिक

बस एक नोट, लेकिन यह दृष्टिकोण IE7 के लिए बहुत ही धीमी गति से है, संभवतः क्योंकि html की प्रतिलिपि में बहुत अधिक डोम हेरफेर शामिल है। यह IE7 में प्रयोग करने योग्य नहीं है, हमारे अनुभव में, इसलिए आपको इसे दूसरे तरीके से लैश करने की आवश्यकता है।

— फिल्माया गया

यदि आप पाते हैं कि आपको अपने लिंक के साथ जुड़े कुछ जावास्क्रिप्ट फ़ंक्शन की आवश्यकता है जो आपके अंदर है popover_content_wrapper, तो यह समाधान समस्याओं का कारण बनेगा क्योंकि इसे html (आपके हैंडलर के बिना) प्रदान किया जा रहा है। इसके बाद समाधान "सम्मिलित .bs.popover" इवेंट के लिए सुनना है और अपने हैंडलर को नए तत्व से जोड़ना है जो अब DOM में है।

— रायन

Answer 2

जावी के उत्तर पर निर्माण, यह बिना आईडी या अतिरिक्त बटन विशेषताओं के बिना किया जा सकता है:

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

Answer 3

एक और वैकल्पिक तरीका है अगर आप सिर्फ पॉप ओवर की तरह दिखना और महसूस करना चाहते हैं। निम्नलिखित विधि है। ऑफकोर्स यह एक मैनुअल बात है, लेकिन अच्छी तरह से व्यावहारिक है :)

एचटीएमएल - बटन

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

जे एस

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

Comments

यह मेरे लिए काम करता है, हालांकि मुझे पॉपओवर के स्थान को सख्त करना पड़ा, जो महान नहीं है, उदाहरण style="top: 200px; left: 90px;के लिए bgformडिव का उपयोग करना । क्या इसके बजाय बूटस्ट्रैप के स्वचालित प्लेसमेंट कोड को कॉल करने का एक तरीका है? इसके अलावा, आप जावास्क्रिप्ट में अलग-अलग प्रभावों के लिए फीकाटॉगल () या सिर्फ टॉगल () का उपयोग कर सकते हैं।

— ताडपोल

यह एकमात्र सही तरीका है। html () एक प्रति बनाता है, जो डेटा-बाइंडिंग उद्देश्यों के लिए इसे अयोग्य बनाता है। पूर्व-संक्रमण की स्थिति में हुक करने की कोई घटना नहीं है, इसलिए जब तक यह दिखाई नहीं देता तब तक आप आबादी को बांध नहीं सकते।

— डेरिल टेओ

Answer 4

पार्टी के लिए देर से। अन्य समाधानों का निर्माण। मुझे लक्ष्य DIV को एक चर के रूप में पारित करने का एक तरीका चाहिए था । मैंने जो किया था यह रहा।

पॉपओवर स्रोत के लिए HTML (एक डेटा विशेषता डेटा-पॉप जोड़ा गया है जो गंतव्य DIV आईडी / या वर्ग के लिए मान रखेगा):

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

पॉपओवर सामग्री के लिए HTML (मैं बूटस्ट्रैप छिपाने की श्रेणी का उपयोग कर रहा हूं):

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

Comments

क्या आप एक बेला जोड़ सकते हैं? यह बॉक्स से बाहर काम नहीं करता है।

— RedSands

Answer 5

अन्य उत्तरों के अलावा। यदि आप htmlविकल्पों में अनुमति देते हैं तो आप jQueryसामग्री पर ऑब्जेक्ट पास कर सकते हैं , और इसे सभी घटनाओं और बाइंडिंग के साथ पॉपओवर की सामग्री में जोड़ा जाएगा। यहाँ स्रोत कोड से तर्क दिया गया है:

• यदि आप किसी फ़ंक्शन को पास करते हैं, तो उसे सामग्री डेटा को अनप्रेप करना कहा जाएगा
• यदि htmlअनुमति नहीं है तो सामग्री डेटा को पाठ के रूप में लागू किया जाएगा
• यदि htmlअनुमति दी गई है और सामग्री डेटा स्ट्रिंग है तो इसे इस रूप में लागू किया जाएगाhtml
• अन्यथा सामग्री डेटा को पॉपओवर के सामग्री कंटेनर में जोड़ दिया जाएगा

$("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});

Answer 6

इन सभी जवाबों का एक बहुत महत्वपूर्ण पहलू याद आता है!

। Html या इनरहेटलएम या आउटरएचटीएमएल का उपयोग करके आप वास्तव में संदर्भित तत्व का उपयोग नहीं कर रहे हैं। आप तत्व के HTML की एक प्रति का उपयोग कर रहे हैं। यह कुछ गंभीर ड्रा बैक है।

1. आप किसी भी आईडी का उपयोग नहीं कर सकते क्योंकि आईडी को डुप्लिकेट किया जाएगा।
2. यदि आप सामग्री को हर बार लोड करते हैं जो कि पॉपओवर दिखाया गया है तो आप उपयोगकर्ता के सभी इनपुट खो देंगे।

आप जो करना चाहते हैं वह वस्तु को पॉपओवर में लोड करना है।

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


});

Comments

अगर मैं इस 100 बार कर सकता हूं तो मैं करूंगा। मैंने हमेशा अपनी पूंछ का पीछा किया कि यह पता लगाने की कोशिश क्यों की जा रही है कि पॉपअप में $ ('#' + id) .val () को खाली स्ट्रिंग लौटाता रहे। इसकी वजह यह है कि HTML HTML की एक प्रति बना रही है।

— Ntellect13

Answer 7

इतना जटिल क्यों? बस यह डाल:

data-html='true'

Comments

कृपया समझाएं और एक फिडेल या पूर्ण कोड जोड़ें। यह मददगार नहीं है।

— RedSands

Answer 8

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>