Select elementine sayaç ekleme – DropDown.dot.js

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:

<select">
    <option selected="selected">Switzerland</option>
    <option>Germany</option>
    <option>United States</option>
    <option>Sweden</option>
    <option>France</option>
    <option>Australia</option>
</select>

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.

    <link rel="stylesheet" href="dropdown.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="dot.js"></script>
    <script src="jquery-dropdown-dot.min.js"></script>    
    <script type="text/javascript">
    $(document).ready(function() {
      $('select').dropdown();
    });
    </script>

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)

<script id="dropdown-selected" type="text/x-dot-template">
{{=it.label}}<i>&darr;</i>
</script>
<script id="dropdown" type="text/x-dot-template">
<div class="dropdown" tabindex="1">
    <div class="selected">{{=it.selected.label}}<i>&darr;</i></div>
    <ul>
        {{~it.items :item:index}}
        <li data-index="{{=index}}">{{=item.label}}</li>
        {{~}}
    </ul>
</div>
</script>

Gelişmiş (sayaçlı)

<script id="dropdown-data-selected" type="text/x-dot-template">
{{=it.label}}
<span class="people">{{=it.people}}<br /><span class="desc">People</span></span>
<i>&darr;</i>
</script>
<script id="dropdown-data" type="text/x-dot-template">
<div class="dropdown" tabindex="1">
    <div class="selected">
      {{=it.selected.label}}
      <span class="people">{{=it.selected.people}}<br /><span class="desc">People</span></span>
      <i>&darr;</i>
    </div>
    <ul>
        {{~it.items :item:index}}
        <li data-index="{{=index}}">{{=item.label}}<span class="people">{{=item.people}}</span></li>
        {{~}}
    </ul>
</div>
</script>

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

Temel :

<select data-template="#dropdown">
    <option value="1" selected="selected">Türkiye</option>
    <option value="2">Germany</option>
    <option value="3">United States</option>
    <option value="4">Sweden</option>
    <option value="5">France</option>
    <option value="6">Australia</option>
</select>

Gelişmiş :

<select data-template="#dropdown-data">
    <option value="1" selected="selected" data-people="5756">Türkiye</option>
    <option value="2" data-people="200">Germany</option>
    <option value="3" data-people="3700">United States</option>
    <option value="4" data-people="19">Sweden</option>
    <option value="5" data-people="240">France</option>
    <option value="6" data-people="2">Australia</option>
</select>

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.