Haber sitelerinin en vazgeçilmez özelliklerinden biri olan ince bir şerit üzerinde kayarak yada klavyeden biri yazıyormuş gibi tek tek çıkan harflerin olduğu bölümü mutlaka bilirsiniz. Şu ana kadar hiç dikkat etmediğim ve okumadığım bu bölüm neden bu kadar çok kullanılır anlamış değilim aslında. Belki benden başka herkesin dikkat ettiği bir bölümdür diye fazla kötülemeyeceğim bu özelliği. Ne de olsa sırf bu özellik için hazırlanmış olan bir sürü uygulama var. Bu kadar geliştirici yanılıyor olamaz herhalde.
Siz de eğer bu tarz son dakika haber bandı örneğini sitenize eklemek istiyorsanız sizler için hazırlanmış olan bir jQuery eklentisi bulunuyor. News ticker adlı bu uygulama sayesinde ince bir şerit üzerinden başlıkların yayınlanmasını sağlayabilirsiniz. Özellik açısından yeteri kadar gelişmiş ve kullanılabilir bir kaç tane de parametre ayarı bulunuyor. Durdurma, oynatma, önceki, sonraki butonları sayesinde adeta mp3 player tarzında kullanıcılarınız bu şerite eklemiş olduğunuz başlıklar arası geçiş yapabilirler.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js ve Css dosya adresleri :
<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="includes/jquery.ticker.js" type="text/javascript"></script>
Javascript :
<script type="text/javascript"> $(function () { // start the ticker $('#js-news').ticker(); // hide the release history when the page loads $('#release-wrapper').css('margin-top', '-' + ($('#release-wrapper').height() + 20) + 'px'); // show/hide the release history on click $('a[href="#release-history"]').toggle(function () { $('#release-wrapper').animate({ marginTop: '0px' }, 600, 'linear'); }, function () { $('#release-wrapper').animate({ marginTop: '-' + ($('#release-wrapper').height() + 20) + 'px' }, 600, 'linear'); }); }); </script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<ul id="js-news" class="js-hidden"> <li class="news-item">Başlık 1</li> <li class="news-item">Başlık 2</li> <li class="news-item">Başlık 3</li> <li class="news-item">Başlık 4</li> <li class="news-item">Başlık 5</li> <li class="news-item">Başlık 6</li> <li class="news-item">Başlık 7</li> </ul>