SORU
16 Ocak 2012, PAZARTESİ


Twitter için içerik'In Popover olarak bir div kullanmak mümkün

Popover here twitter bootstrap kullanıyorum. Popover metin üzerinde kaydırma zaman şu anda, bir popover <a>sadece metin ile'data-content s özniteliği görünür. Eğer zaten popover içinde <div> bir koyun için ise, merak ediyordum. Potansiyel olarak, orada php ve mysql kullanmak istiyorum, ama eğer bir div çalışmak alabilirsem gerisini ben halledebilirim. Veri-içerik ayarı div KİMLİĞİ etmeye çalıştım, ama işe gitmedim.

HTML:

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

CEVAP
18 Ocak 2012, ÇARŞAMBA


Eğer içerik içinde HTML kullanmak istiyorsanız, öncelikle doğru HTML seçeneği ayarlamanız gerekir:

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

Sonra bir Popover içeriği ayarlamak için iki seçeneğiniz vardır

  • Veri-içerik özniteliği kullanın. Bu varsayılan seçenektir.
  • HTML içeriği döndüren özel bir JS fonksiyonu kullanın.

Veri-içerik kullanımı: Bu gibi HTML içerik, bir şeylerden kaçmak gerekir:

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

HTML el ile kaçış ya da bir işlevi kullanın. PHP bilmem ama Raylar *html_safe* kullanıyoruz.

Bir JS fonksiyonu: Eğer bunu yaparsanız, birkaç seçeneğiniz vardır. Bence en kolay div içeriğinizi istediğiniz yerde gizli koy ve popover için içeriğini iletmek için bir fonksiyon yazın. Şöyle bir şey:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

Ve sonra da HTML bu gibi görünüyor:

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

Umarım bu yardımcı olur!

PS: popover kullanarak ve bu başlık ayarı yok... o yüzden bazı sıkıntılar yaşadım, her zaman başlık ayarlamayı unutmayın.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • andyabc45

    andyabc45

    1 Mayıs 2011
  • ExcelTutorials

    ExcelTutoria

    2 Mayıs 2009
  • HowToBasic

    HowToBasic

    8 Aralık 2011