Flexdatalist -
HTML5 eleman modern ön uç gelişiminde oldukça faydalıdır. Ancak, pek çok geliştiricinin bilmediği öğelerden biri..
Yapabileceğiniz bir giriş alanı üzerinde çalışır. girdi için belirli değerleri otomatik olarak alma. Varsayılan ayar tamam görünüyor ve otomatik olarak en iyi değer veren uzmanlarla harika efektler oluşturma konusunda bazı kodlama ipuçlarını ele aldık.
Ancak, çok daha kolay eklenti ile çalışmak gibi Flexdatalist. O daha geniş tarayıcı dizisini destekler ve yapmanızı sağlar Veri uzmanınızın tasarımını tamamen kişiselleştirin.
Herkesin otomatik tamamlama özelliklerine ihtiyacı yoktur ve yerel HTML5 veri uzmanlarıyla bir eklentiyle uğraşmayabilirsiniz. Bununla birlikte, Flexdatalist belki de en iyisidir çünkü o yerel veri toplama davranışlarına dayanır eklemek:
- Mobil duyarlı destek
- Her öğe için ekstra açıklamalar
- Aynı anda birden fazla seçim için seçenekler
- Özel etkinlik işleyicileri
Onun tüm jQuery tarafından desteklenmektedir, yani yapacaksın En son sürümün bir kopyasına ihtiyacınız var Bunu çalıştırmak için. O da kendi CSS stil sayfasıyla birlikte gelir HTTP isteklerini azaltmak için tek bir CSS dosyasında birleştirmek isteyebileceğiniz.
Bulabilirsin tam kurulum talimatları içeren ana demo sayfasında Flexdatalist dosyalarına indirme bağlantıları.
Ayarlamak gerçekten çok kolay sadece bir JavaScript satırı. Varsayılan olarak, eklenti tüm girdileri sınıfla hedefler .flexdatalist, bu yüzden sadece kodu eklemek sadece sonuçları görmek için yeterli olmalı.
Siz sadece ekleyin Giriş alanınızdaki element ve Flexdatalist gerisini halleder. Olacak listeyi otomatik olarak stillendir, isteğe bağlı açıklayıcı metin dahil.
Ekstra metin eklemenin en basit yolu JSON dosyası aracılığıyla hangisini yapabilirsin veri özniteliği aracılığıyla girişinize ekleyin.
Örneğin, Flexdatalist demo sayfasını kontrol ederseniz, bir “Ülkeler” niteliği olan giriş alanı Veri veri = 'countries.json'. Bu uzak bir dosyaya başvuruyor tüm ham girdi verilerini dışarıda depolar.
Yapabileceğiniz bu alanların çok fazla sayfayı biraz yavaşlat. Ancak, pek çok sitenin bu datalist formlardan birkaçından daha fazlasının bir sayfada yayınlandığını hayal edemiyorum, bu jQuery eklentisiyle bile bahsetmiyorum bile hala oldukça hızlı.
Başlamak için, sadece GitHub deposunu ziyaret edin ve bir kopyasını indirin. Bu bir içerir ana demo sayfasına bağlantı ayrıca kurulum için tam belgelere, JavaScript seçeneklerine ve etrafta dolanacak birçok örnek kod parçacığına sahiptir.
