DropDown.dot.js

0
104
views

html-select-elementi-nasıl-kullanılır
Html select elementini az çok bilirsiniz, tıklandığında bir liste açılır ve bu listeden bize uygun olan seçeneği seçmemize yarayan, hemen hemen her yerde klasik bir görüntüye sahip bir elementtir. Çoğu web sitesi genelde üyelik aşamalarında bu özelliği kullanırlar. İsim, doğum tarihi ve şifre bölümlerinden sonra yaşadığımız ülkeyi ve şehri belirlememiz için kullanılır. Daha doğrusu select elementi en çok bu bölümlerde  kullanılır. Web sayfanın haddinden fazla uzun olmasını engellemek için de en iyi yöntemlerden bir tanesidir ama görüntüsü klasik olduğundan berbattır diyebilirim. Çok az kişi değişik tasarımlar kullanırlar.

Html select elementi bir de kategorilerde kullanılır. Bir web sitesinde çok fazla kategori varsa sayfa içinde küçük bir bölüme eklemek oldukça mantıklıdır. jQuery DropDown.dot.js eklentisi select elementinin sadece görüntüsünü değil bir de  bu element içindeki seçeneklere sayaç eklemenizi de sağlıyor. Bu uygulama ile select elementine eklemiş olduğunuz verilere sayaç ekleyerek ziyaretçilerinizin hangi kategoride kaç tane içerik olduğunu görmelerini sağlayabilirsiniz.

Temel html select elementinin kullanımı aşağıdaki gibidir:

selected=”selected” kodu eklenmiş olan seçenek  en üstte görünür ve tıkladığınızda diğer seçenekler drop down (açılır kapanır) olarak listelenir. Klasik tarzda kullanımı da bu şekildedir. jQuery Dropdown.dot.js eklentisini kullanarak select elementine hem farklı bir görünüm vereceğiz hem de seçeneklerin yanına sayaç ekleyeceğiz.  Eklenti ile beraber kullanacağımız için yukarıdaki klasik kodlardan birazcık daha farklı olacak.

Kullanım

DropDown.dot.js uygulaması ile hazırlanmış iki adet demo örneği bulunuyor. Birinde numaralar bulunuyor diğerinde ise sadece klasik görüntüsü değiştirilmiş. Her iki örnek için kullanacağımız Css kodlar aynı ve aynı js dosyalarını kullanıyoruz.

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

Öncelikle her iki örnek için aynı Js ve Css dosyalarını kullanıyoruz. Bir de javascript kodu bulunuyor her ikisi için kullanılabilir. Bunun dışında her birinin kendine özgü javascript kodları da bulunuyor.

Head etiketleri arasına yukarıdaki kodları ekledikten sonra kullanacağınız örnek için de bir tane Javascript kodu eklemeniz gerekiyor.

Temel (sayaç olmadan)

Gelişmiş (sayaçlı)

 

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

Temel :

Gelişmiş :

Başlıkta sayaç olarak belirttim yanlış anlaşılmasın herhangi bir nesnenin tıklanma yada indirilme oranlarını saymıyor. Mesela bir kategorinizde 50 tane yazı olur ve kullandığınız sisteme uygun fonksiyonlarla kategorilerdeki içeriklerin sayısını çekersiniz. Rakamların olduğu bölüme de bu fonksiyonlardan eklemeniz gerekmekte.

1 oy (1 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikWheelZoom.js
Sonraki İçerikRefineSlide

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