Tagger.js

0
139
views

tagger
Youtube’ye  yeni bir  video eklerken video  için  etiket eklemenizi  isteyen bir  bölüm var. Bu bölümde  virgül ile  ayırarak yazdığınız  kelimeler otomatik etikete  dönüşüyor. Ayrıca WordPress kullanıcıları da  az çok bilirler input  alanına etiket  eklerken aralara virgül koyduktan sonra  virgülle ayrılmış bütün kelimeler  ayrı ayrı  etikete  dönüşüyorlar.

Basettiğim bu iki  örnek  pek çok kişinin bildiği bir özellik değil mutlaka. Buna  benzer herkesin bildiği Facebook  var tabi. Herhangi bir şey paylaşmadan önce arkadaşlarımızı  gönderiye etiketleyebiliyoruz Facebook üzerinden. Arkadaşlarımızın isimlerini yazmaya başladığımız  andan  itibaren otomatik tamamlama  özelliği devre giriyor ve yazdığımız harflere  en yakın kişiler listeleniyor.

Web sitenize buna  benzer  bir özellik eklemek istiyorsanız  eğer Nick Palmer tarafından geliştirilmiş olan jQuery Tagger  uygulaması  tam da bunun için hazırlanmış.  Demo sayfasında  yazmaya başladığınız andan itibaren otomatik tamamlama devreye giriyor ve seçtiğiniz  kişinin ismi etiket olarak input alanına  ekleniyor. Dilerseniz  verilerinizi .json dosyasından da otomatik tamamlama ile inputta  gösterebilirsiniz.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js,  css ve json dosya adresleri :

JavaScript :

Kapsamlı çoklu seçim

Çoklu seçim

Tekli Seçim

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

Html kodlarda dikkat ederseniz value=”item0″, value=”item1″, value=”item2″ gibi  değerleri görebilirsiniz. Bu değerler json dosyasında kayıtlı olan kişilerin  e-mail adresi, isimleri ve ilgili  resimleri ile eşleşip tagger eklentisi sayesinde select elementi açtığınızda karşınıza isim ve bir icon görünmesini sağlıyor. Her kişiye kendi resminide  ekleyerek kullanabilirsiniz.

1 oy (No Ratings Yet)
Loading...
Önceki İçerikBricks.js
Sonraki İçerikDeğişik onay kutusu tasarımları
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here