SlimScroll

Facebook  sohbette  görmüşsünüzdür mouse  arkakadaşların isimlerinin  olduğu sohbet alanı üzerine  geldiği  an ince,  gri,  oval  bir kaydırma  çubuğu  çıkıyor. Piotr Rochala jQuery  kullanarak  bu özeliğin aynısını  oluşturmuş meraklılara.  Google  ve  Facebook’un bu özelliği  kullanmasıyla  beraber  bir çok  kişi eklentiyi  kullanmak isteyecektir sanırım.  Ama  yanlış  değilsem bu  özelliği ilk çıkaranlar  Facebook ve  Google değil de Yahoo olarak biliyorum. Yahoo sitesinde  öyle  bir  özelliğe  rastlamadım ama kullanıyor  olabilir. Sitemizde  Yui  diye  bir  kategori  var jQuery benzeri  webtasarımcılar için Yahoo  tarafından hazırlanmış  mini  bir  javascript  kütüphanesi.  Yui Framework’ü ile bu  örneğin aynısı  Yahoo  tarafından yayınlanmıştı.  Mintik’te örneği  paylaşmıştım o zamanlar  ama hoşuma  gitmediği  için kaydırma  çubuğunu  kaldırdım demodan. Buradan Yui örneğine  bakabilirsiniz.

Gelelim asıl  örneğimize.

 Kullanım

Head  etiketleri  arasına eklenecek olan bölümler

jQuery  ve  eklenti url  adresleri :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript" src="slimScroll.js"></script>

Css :

<style type="text/css">
		* { font-family:Tahoma,sans-serif; font-size:12px; color:#000; }
		h1 { font-size:20px; margin:0 }
		h2 { font-size:14px; margin:0 }
		p { margin:5px 0; }
		.slimScrollDiv { border: 1px solid #ccc; margin:10px; }
		#multi-test { }
</style>

Body  etiketleri arasına  eklenecek olan örnek bir  html :

<div class="some-content-related-div">
<div id="inner-content-div">
<p>Lorem ipsum dolor sit amet, consectetur .... snip</p>
</div>
</div>

Eklentiyi  çalıştıran javascript komut (basit) :

$(function(){
    $('#inner-content-div').slimScroll({
        height: '250px'
    });
});

Eklentiyi çalıştıran javascript komut (geliştirilmiş) :

$(selector).slimScroll({
    width: '300px',
    height: '500px',
    size: '10px',
    position: 'left',
    color: '#ffcc00',
    alwaysVisible: true,
    distance: '20px',
    start: $('#child_image_element'),
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    allowPageScroll: false
});

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla