টুইটারের পপওভারের জন্য বিষয়বস্তু হিসাবে কোনও ডিভি ব্যবহার করা কি সম্ভব?

Question

আমি এখানে টুইটারের বুটস্ট্র্যাপের পপওভার ব্যবহার করছি । ঠিক এখন, যখন আমি popover টেক্সট উপর স্ক্রল একটি popover থেকে মাত্র পাঠ্য সহ উপস্থিত <a>এর data-contentঅ্যাট্রিবিউট। আমি ভাবছিলাম <div>পপওভারের ভিতরে কোনও উপায় আছে কিনা। সম্ভাব্যভাবে, আমি সেখানে পিএইচপি এবং মাইএসকিএল ব্যবহার করতে চাই, তবে যদি আমি কাজ করার জন্য একটি ডিভ পেতে পারি তবে আমার মনে হয় আমি বাকীটি খুঁজে বের করতে পারি। আমি একটি divআইডিতে ডেটা-সামগ্রী সেট করার চেষ্টা করেছি , তবে এটি কার্যকর হয়নি।

এইচটিএমএল:

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

Answer 1

প্রথমত, আপনি যদি সামগ্রীর ভিতরে এইচটিএমএল ব্যবহার করতে চান তবে আপনার এইচটিএমএল বিকল্পটি সত্য হিসাবে সেট করতে হবে:

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

তারপরে একটি পপওভারের জন্য সামগ্রী সেট করার জন্য আপনার কাছে দুটি বিকল্প রয়েছে

• ডেটা-সামগ্রী বৈশিষ্ট্য ব্যবহার করুন। এটি ডিফল্ট বিকল্প।
• একটি কাস্টম জেএস ফাংশন ব্যবহার করুন যা এইচটিএমএল সামগ্রী সরবরাহ করে returns

ডেটা-সামগ্রী ব্যবহার : আপনার এইচটিএমএল সামগ্রীগুলি এড়াতে হবে:

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

আপনি হয় ম্যানুয়ালি এইচটিএমএল থেকে পালাতে পারেন বা কোনও ফাংশন ব্যবহার করতে পারেন। আমি পিএইচপি সম্পর্কে জানি না তবে কারাগারে আমরা * এইচটিএমএল_সেফ * ব্যবহার করি।

জেএস ফাংশন ব্যবহার করে : আপনি যদি এটি করেন তবে আপনার কাছে বেশ কয়েকটি বিকল্প রয়েছে। আমার মনে হয় সবচেয়ে সহজ যেটি আপনার ডিভ সামগ্রীটি আপনি যেখানেই চান লুকিয়ে রাখুন এবং তারপরে পপওভারে এর সামগ্রীটি পাস করার জন্য একটি ফাংশন লিখুন। এটার মতো কিছু:

$(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_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

আশা করি এটা সাহায্য করবে!

পিএস: পপওভার ব্যবহার করার সময় এবং শিরোনামের বৈশিষ্ট্যটি সেট না করার সময় আমার কিছু সমস্যা হয়েছিল ... সুতরাং, সর্বদা শিরোনামটি সেট করতে ভুলবেন না।

Comments

এফওয়াইআই, বুটস্ট্র্যাপের "লুকান" নামে একটি শ্রেণি রয়েছে যা প্রদর্শনটি সেট করে: কিছুই নেই

— ডোমেনিক

কেবল একটি নোট, তবে এই পদ্ধতিটি আই 7 এর জন্য ভয়ঙ্করভাবে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে এইচটিএমএল অনুলিপিটিতে অনেকগুলি ডিওএম ম্যানিপুলেশন জড়িত। এটি আমাদের অভিজ্ঞতায় আই 7-তে ব্যবহারযোগ্য নয়, সুতরাং আপনাকে এটি অন্য কোনও উপায়ে ফেলা উচিত।

— ফিলিপ

যদি আপনি দেখতে পান যে আপনার ভিতরে থাকা কোনও লিঙ্কের সাথে আপনার কিছু জাভাস্ক্রিপ্ট ফাংশন সংযুক্ত রয়েছে popover_content_wrapper, তবে এই সমাধানটি সমস্যার কারণ হতে পারে কারণ এটি এইচটিএমএল (আপনার হ্যান্ডলারগুলি ছাড়াই) রেন্ডার করা হচ্ছে। তারপরে সমাধানটি হ'ল "insert.bs.popover" ইভেন্টটি শোনার জন্য এবং আপনার হ্যান্ডলারটিকে নতুন উপাদানের সাথে পুনরায় সংযুক্ত করুন যা এখন ডিওমে রয়েছে।

— রায়ান শিলিংটন

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>

এইচটিএমএল - পপওভার

<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। পরিবর্তে বুটস্ট্র্যাপের স্বয়ংক্রিয় প্লেসমেন্ট কোডটি কল করার কোনও উপায় আছে? এছাড়াও, আপনি জাভাস্ক্রিপ্টে বিভিন্ন প্রভাবের জন্য ফেইডটগল () বা কেবল টগল () ব্যবহার করতে পারেন।

— রেডিং ট্যাডপোল

এটিই একমাত্র সঠিক উপায়। এইচটিএমএল () একটি অনুলিপি তৈরি করে, এটি ডেটা-বাঁধাইয়ের উদ্দেশ্যে অকার্যকর করে তোলে। প্রাক-রূপান্তর অবস্থায় হুক করার কোনও অনুষ্ঠানও নেই, সুতরাং এটি পপওভারে দৃশ্যমান হওয়া অবধি বাঁধাই করতে পারবেন না।

— ড্যারিল টিও

Answer 4

পার্টিতে লে। অন্যান্য সমাধান বন্ধ করা। আমি যেমন লক্ষ্য DIV পাস একটি উপায় প্রয়োজন পরিবর্তনশীল । এখানে আমি কি করেছি।

পপওভার উত্সের জন্য এইচটিএমএল (একটি ডেটা অ্যাট্রিবিউট ডেটা-পপ যুক্ত করেছে যা গন্তব্য ডিআইভি আইডি / বা শ্রেণীর মান ধরে রাখবে):

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

পপওভার সামগ্রীর জন্য এইচটিএমএল (আমি বুটস্ট্র্যাপ লুকানোর ক্লাস ব্যবহার করছি):

<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

আপনি একটি ফিজল যোগ করতে পারেন? এটি বক্সের বাইরে কাজ করে না।

— রেডস্যান্ডস

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/

এইচটিএমএল:

<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 বার upvote করতে পারে। আমি আমার লেজটি চিরকালের জন্য তাড়া করেছিলাম কেন $ ('#' + আইডি) কল করে figure ('#' + আইডি) কল করুন val এটি হ'ল এইচটিএমএল ডিভের একটি অনুলিপি তৈরি করার কারণে।

— Ntellect13

Answer 7

এত জটিল কেন? শুধু এই রাখুন:

data-html='true'

Comments

দয়া করে একটি ফিডাল বা পূর্ণ কোডটি ব্যাখ্যা করুন এবং যুক্ত করুন। এটি যেমনটি তেমন সহায়ক নয়।

— রেডস্যান্ডস

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>