Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir.
- Video, Bootstrap'in popover özelliğinin nasıl kullanılacağını adım adım göstermektedir. İlk bölümde popover'ın temel kullanımı, title ve content bilgilerinin tanımlanması, trigger özellikleri ve HTML içeriğinin eklenmesi anlatılırken, ikinci bölümde sayfada bulunan tüm data toggle'lara popover özelliği kazandırma, data placement ayarları ve JavaScript ile popover elementlerini listeleme işlemleri gösterilmektedir.
- Eğitim boyunca kod yazımı, konsolda sonuçların incelenmesi ve pratik örnekler üzerinden Bootstrap popover'ın farklı kullanım şekilleri detaylı olarak açıklanmaktadır. Ayrıca, popover'ın göstermeden önce, gösterdikten sonra, gizlenmeden önce ve gizlendikten sonra çalışacak olayların nasıl tanımlanacağı da gösterilmektedir.
- 00:00Popover Kullanımı
- Popover komponent toolları tool tiplerine benzer ancak daha zengin bir arayüz sunar.
- Popover eklemek için "data-toggle" özelliğine "popover" yazarak title ve content bilgilerini belirleyebilirsiniz.
- Popover'ı çalıştırmak için JavaScript ile "new BootstrapPopover" objesi oluşturup, popover'a bilgi göndermeniz gerekir.
- 01:32Popover Özellikleri
- Popover'ı butona tıklayarak açabilir, butona tıklamadan başka bir yere tıklandığında kapanmaz.
- "data-trigger" özelliğine "focus" veya "hover" değerleri vererek popover'ın tetiklenme koşullarını değiştirebilirsiniz.
- Hover özelliği ile butona geldiğinizde popover görünür, butonun dışına çıktığınızda kapanır.
- 02:23HTML İçeriği ile Popover
- Popover'ın içeriğini HTML olarak tanımlayabilirsiniz.
- "data-html" özelliğine "true" vererek ve content bilgisini HTML içeriği olarak belirleyebilirsiniz.
- Popover'ın title kısmı üst tarafta, content kısmı ise aşağıda görüntülenir.
- 03:18Popover İçeriği Oluşturma
- Popover'ın content kısmını HTML div'i içinde oluşturabilirsiniz.
- Popover'ın content kısmını sayfa üzerinde bulunan bir HTML içeriği olarak da alabilirsiniz.
- Popover'ın header kısmı ve body kısmı ayrı ayrı tanımlanabilir.
- 06:04Popover'ı Butonlarla Kontrol Etme
- Popover'ı butonlarla kontrol etmek için "btn-show", "btn-high" ve "btn-toggle" gibi butonlar ekleyebilirsiniz.
- Butonlara click event listener ekleyerek popover'ları aktif hale getirebilirsiniz.
- Popover'ın gösterilme, gizlenme ve tetiklenme olaylarını "addEventListener" ile takip edebilirsiniz.
- 09:18Bootstrap Popover Özelliklerinin Ekleme
- Sayfada bulunan tüm data toggle'lara popover özelliği kazandırmak için yeni bir buton ekleniyor.
- Popover text özelliği ekleniyor ve data placement özelliği kullanılarak top, right, bottom ve left konumları belirleniyor.
- Popover elementlerine erişmek için ren data toggle aracı kullanılıyor.
- 10:15Popover Elementlerini Listeleme ve Objeye Çevirme
- Popover elementleri tek tek ulaşmaktansa popover element list özelliği kullanılarak obje aracılığıyla slice metodu ile bir diziye çevriliyor.
- Document query select all metodu ile birden fazla eleman seçiliyor ve to popover yazarak liste şeklinde bilgiler alınıyor.
- Map metodu kullanılarak alınan elementler objelere çevriliyor ve yeni bootstrap popover elementi ile popover özelliği kazandırılıyor.
- 11:46Popover Objelerinin Kontrolü
- Popover text özellikleri top, right, bottom ve left konumlarına göre görüntüleniyor.
- Konsola bakıldığında sayfada bulunan yedi tane popover nesnesi obje olarak görüntüleniyor.
- Popover objeleri daha sonra istenilen şekilde kullanılabilir.