টুইটার বুটস্ট্র্যাপ পপওভারের মধ্যে এইচটিএমএল

288

আমি বুটস্ট্র্যাপ পপওভারের ভিতরে এইচটিএমএল প্রদর্শনের চেষ্টা করছি, তবে কোনওভাবে এটি কাজ করছে না। আমি এখানে কিছু উত্তর পেয়েছি তবে এটি আমার পক্ষে কার্যকর হবে না। আমি কিছু ভুল করছি কিনা দয়া করে আমাকে জানান।

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>
html  twitter-bootstrap  popover 
— অ্যাড্রিয়ান মোজিকা
সূত্র
1
— ওলগা

উত্তর:

351

আপনি <li href="#"এটি ব্যবহার করতে পারবেন না কারণ এটি <a href="#"কাজ করে না কেন, এটি পরিবর্তন করুন এবং এটি সব ভাল all

এখানে জেএসফিডাল কাজ করছে যা আপনাকে বুটস্ট্র্যাপ পপওভার তৈরি করার উপায় দেখায়।

কোডের প্রাসঙ্গিক অংশগুলি নীচে রয়েছে:

এইচটিএমএল:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

javascript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

এবং $("[data-toggle=popover]").popover();যাইহোক , আপনার সর্বদা পপওভার সক্ষম করার জন্য কমপক্ষে প্রয়োজন । data-toggle="popover"আপনার জায়গায় কিন্তু ব্যবহার করতে পারেন id="my-popover"বা class="my-popover"। কেবলমাত্র এগুলি ব্যবহার করে তাদের সক্ষম করতে মনে রাখবেন: $("#my-popover").popover();এই ক্ষেত্রে।

সম্পূর্ণ বৈশিষ্টটির লিঙ্কটি এখানে: বুটস্ট্র্যাপ পপওভার

বোনাস:

যদি কোনও কারণে আপনি পছন্দ করেন না বা থেকে পপআপের সামগ্রীটি পড়তে পারেন না data-toggletitle ট্যাগ এবং ট্যাগগুলি । আপনি যেমন লুকানো ডিভিএস এবং আরও কিছুটা জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। এখানে সে সম্পর্কে একটি উদাহরণ দেওয়া আছে।

— মাওনো ভাää
সূত্র
1
পৃষ্ঠার শীর্ষে স্ক্রোলিং রোধ করতে ANCHOR ট্যাগ উপাদানগুলিতে HREF href = "#" সরান!
— পিটার_পিলগ্রিম
@ পেটার_পিলগ্রিম এটি বলার জন্য ধন্যবাদ। আমি বুটস্ট্র্যাপের সর্বশেষ সংস্করণটি ব্যবহার করার জন্য আমার উত্তর আপডেট করেছি এবং <a> ট্যাগগুলি থেকে href = "#" স্থির করেছি এবং তাদের পরিবর্তে বোতামগুলির মতো আচরণ করতে বাধ্য করেছি। (এটি বুটস্ট্র্যাপ সাইটেও নথিভুক্ত করা হয়েছে)। আমার উত্তরটির শেষে সেই লিঙ্কটি যুক্ত করা হয়েছে।
— মাওনো ভহি
আমি iOS ডিভাইসগুলির সাথে একটি সমস্যা পেয়েছি। পপওভার টাচ স্ক্রিনের সাথে কাজ করে। আপনি প্রায় একটি সাধারণ কাজ খুঁজে পেয়েছেন? আসলে, আমি মনে করি এটি বুটস্ট্র্যাপ পপওভার কোডেও ঘটে happens কোন ধারনা?
— পিটার_পিলগ্রিম
286

আপনি বৈশিষ্ট্যটি ব্যবহার করতে পারেন data-html="true":

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>
— ডেনিস মঙ্কলে
সূত্র
এটি gwtbootstra 3G এ ব্যবহার করার কোনও উপায় আছে কি না, এটি এই ফর্মটিতে কাজ করে না। আমি এখানে প্রশ্ন জিজ্ঞাসা করেছি stackoverflow.com/questions/34142815/… , তবে এখনও পর্যন্ত কোনও উত্তর নেই।
— ivan_bilan
উপরের উত্তরটি সঠিক হিসাবে কেন চিহ্নিত হয়েছে তা জানেন না। হয়তো লোকেরা তাদের কাজ সংরক্ষণের জন্য ইচ্ছাকৃতভাবে সবচেয়ে জটিল বিকল্পটি বেছে নেয়।
— স্টিফেন
আমার এই পপওভারটি আমার পৃষ্ঠার নীচে রয়েছে এবং ব্যতীত দুর্দান্ত কাজ করে ... এটি আমাকে পুরোপুরি পৃষ্ঠার শীর্ষে স্থানান্তরিত করে। আমি এটি বুটস্ট্র্যাপ থাম্বনেইসগুলির একটি ফোরচ লুপে সেট করেছি। কোন ধারনা?
— ফক্সট্যাঙ্গোচারলি
107

পুনঃব্যবহারযোগ্য উপায়ে পপওভার সামগ্রী নির্দিষ্ট করার আরেকটি উপায় হ'ল একটি নতুন ডেটা অ্যাট্রিবিউট তৈরি করা data-popover-contentএবং এটি এর মতো ব্যবহার করা:

এইচটিএমএল:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

জাতীয়:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

আপনার পপওভারগুলিতে রাখার জন্য যখন আপনার অনেকগুলি এইচটিএমএল থাকে তখন এটি কার্যকর হতে পারে।

এখানে একটি উদাহরণ ফিডল: http://jsfiddle.net/z824fn6b/

— নাবিক
সূত্র
1
এই মডুলার পদ্ধতির বেশ মার্জিত। আপনার কাছে অনেকগুলি পপওভার এবং কেবল একটি জেনেরিক জাভাস্ক্রিপ্ট ফাংশন থাকতে পারে।
— xtian
2
এটি দুর্দান্ত, @ জ্যাক, আপনাকে ধন্যবাদ। বৈশিষ্ট্যগুলিতে এইচটিএমএল স্থাপন করা আমার পছন্দ নয়। খুব এলোমেলো.
— জন ওয়াশাম
এখানে দুর্দান্ত কাজ, সরলতা এবং ব্যবহারযোগ্যতা পছন্দ করুন
— ফাস্টট্র্যাক
আপনি আসল এমভিপি
— plushyObject
বুটস্ট্র্যাপ ৩.৪.১ এর সাথে কাজ করছে বলে মনে হচ্ছে না, আপনি দয়া করে সহায়তা করতে পারেন? @Jack stackoverflow.com/questions/60514533/...
— user2513846
84

আপনাকে একটি পপওভার দৃষ্টান্ত তৈরি করতে হবে যাতে এইচটিএমএল বিকল্প সক্ষম করা আছে (এটি পপওভার জেএস কোডের পরে আপনার জাভাস্ক্রিপ্ট ফাইলটিতে রাখুন):

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

— মাইক লুসিড
সূত্র
22

আমি একটি তালিকার ভিতরে একটি পপ ব্যবহার করেছি, আমি এইচটিএমএলের মাধ্যমে একটি উদাহরণ দিচ্ছি

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
— user3319310
সূত্র
1
এইচটিএমএল কোড মোড়ানোর জন্য বিভিন্ন উদ্ধৃতি ব্যবহার করে সহজ পদ্ধতির। ভাল চিন্তা।
— জিমি Ilenloa
দুর্দান্ত, আসল কৌশলটি ডাবল কোটগুলিকে একক উদ্ধৃতিতে পরিবর্তন করছে!
— স্টিভেন ব্যারাগন
6

এটি জ্যাকের দুর্দান্ত উত্তরে সামান্য পরিবর্তন ।

নিম্নলিখিতটি নিশ্চিত করে তোলে যে সাধারণ পপওভারগুলি, এইচটিএমএল সামগ্রী ব্যতীত অপরিবর্তিত রয়েছে।

javascript:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});
— মার্ক এ
সূত্র
4

বৈশিষ্ট্যের ভিতরে দীর্ঘ HTML স্থাপন করা সত্যই আমি ঘৃণা করি, এখানে আমার সমাধান, পরিষ্কার এবং সরল (প্রতিস্থাপন? আপনি যা চান তাই দিয়ে):

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

তারপর

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
— user1079877
সূত্র
4

এটি একটি পুরানো প্রশ্ন, তবে পপওভার পুনরায় ব্যবহার করতে jQuery ব্যবহার করে এবং এটি আরও শব্দার্থক করে তুলতে মূল বুটস্ট্র্যাপের ডেটা অ্যাট্রিবিউটগুলি ব্যবহার করে চালিয়ে যাওয়ার এটি অন্য উপায়:

লিংকটি

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

কাস্টম সামগ্রী প্রদর্শন করতে

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

জাভাস্ক্রিপ্ট

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

সম্পূর্ণ উদাহরণ সহ ফিডল: http://jsfiddle.net/tomsarduy/262w45L5/

— টম সার্ডু
সূত্র
2

আপনি 'ui-bootstrap-tpls-0.11.0.js' ফাইলটিতে 'টেমপ্লেট / পপওভার / পপওভার html' পরিবর্তন করতে পারেন 'লিখুন: "এনজি-বাইন্ড" এর পরিবর্তে "বাইন্ড-এইচটিএমএল-অনিরাপদ"

এটি এইচটিএমএল সহ সমস্ত পপওভার প্রদর্শন করবে। * এটি অনিরাপদ এইচটিএমএল। আপনি যদি এইচটিএমএলকে বিশ্বাস করেন তবেই ব্যবহার করুন।

— গাই বিবার
সূত্র
0

আপনি পপওভার ইভেন্টটি ব্যবহার করতে পারেন এবং 'ডেটা-প্রস্থ' বৈশিষ্ট্য দ্বারা প্রস্থ নিয়ন্ত্রণ করতে পারেন

$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
    var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
    $("div[id^=popover]").css("max-width", width);
});
 <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
 <i class="far fa-question-circle"></i>
 </a>
স্নিপেট প্রসারিত করুন

— Vúnh Phú Ngô
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.