Javascript Slider (Yahoo Apilerini Kullanarak)

Selamlar tekrardan,

gereklilikler üstüne yaptığım çalışmaların sonuçlarını dünya alemle paylaşmaya devam ediyorum. Geçenlerde javascript slider ihtiyacım doğdu. Bunun için ufak bir araştırma yaptım ve sonucunda yahoo api'sini kullanmaya karar verdim. Aşağıda kodlar mevcut.




Kodlar ile ilgili açıklamaları, kodlar arasına ekliyorum.
head sekmesine aşağıdaki kodları ekleyelim :


ilk olarak yahoo apisinden kullanacağımız script ve style ları ekliyoruz.

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/slider/assets/skins/sam/slider.css" />

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/slider/slider-min.js"></script>
<style type="text/css">
.slider {
background: #0f0;
height: 10px;
width: 510px; /* Bu kısımda genişlik önem arzetmektedir. Çünkü slider uzunluğuna göre değer slider değer aralığı belirlenmektedir. */float:left;
}
/*Slider'ın dolu be boş kısımlarından dolu tarafın style'ı*/
.left_fill {
height: 10px;
background: #00f;
width: 0px;
float: left;
}
/*Tutup sürüklediğiniz kısmın style'ı*/.handle {
background: #f00;
width: 10px;
height: 10px;
float: left;
z-index: 100;
}
/*Bu kısım handler'ın(tutup sürüklediğiniz kısmın) üstünde handler ile birlikte hareket eden değer gösteresinin style'ı*/.info {
background: yellow;
height: 10px;
float: left;
z-index: 100;
position:absolute;
top:0px;
left:0px;
text-align:right;
}

.slidermain {
float: left;
z-index: 100;
position:relative;
height:50px;
width:720px;
padding-top:20px;
}
</style>


<script type="text/javascript" language="javascript">
//burada eklediğimiz api ler yardımıyla slider obejesini oluşturduğumuz kodlarımız mevcut.

var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;

function FancySlider(id) {
var sliderID = "slider_" + id; //body tagları arasına eklediğimiz divlerin idsini veriyoruz.
var handleID = "handle_" + id; //body tagları arasına eklediğimiz divlerin idsini veriyoruz.
var fillID = "left_fill_" + id; //body tagları arasına eklediğimiz divlerin idsini veriyoruz.
var tickvalue = 1; //slider'ın artış değeri

this.onChange = function(offset) {
//slider değeri değiştiğinde neler yapılması gerektiğini söylüyoruz.
Dom.get(fillID).style.width = offset + "px";
Dom.get("slider_info").style.top = 0 + "px";
Dom.get("slider_info").style.left = offset + "px"; //slider değerini gösteren info kutusunun yerini handlerın yerine göre ayarlıyoruz.
Dom.get("slider_info").innerHTML = ((this.getValue()+200)*100)+" TL"; // değeri div içine yazdırıyoruz.
}

//0 dan başlayıp 500 e kadar 1 er artarak ulaşan bir slider oluşturuyoruz.var slider = YAHOO.widget.Slider.getHorizSlider(sliderID, handleID, 0, 500,tickvalue);
slider.subscribe("change", this.onChange)

//+ ve - buton ve linkerine basıldığınıda yapılması gerekenler için aşağıda eventlar tanımlıyoruz.
Event.on("slider_plus", "click", function(e) {
newvalue = slider.getValue() + tickvalue;
slider.setValue(newvalue, false); });

Event.on("slider_negative", "click", function(e) {
newvalue = slider.getValue() - tickvalue;
slider.setValue(newvalue, false);
});
}
</script>

Sonrasında body tagları arasına şu html kodları ekleyelim

<div style="clear:both;"></div>
<div class="slidermain">
<div style="float:left;"><a id="slider_negative" style="cursor:pointer;">-</a></div>
<div id="slider_info" class="info">20.000 TL</div>
<div id="slider_intro" class="slider">
<div id="left_fill_intro" class="left_fill">
<div id="handle_intro" class="handle">
</div>
</div>
</div>
<div style="float:left;"><input id="slider_plus" type="button" value="+" /></div> </div>

Yukarıdaki html ve javascripti inceleyiniz. Anlamadığınız bir nokta olursa buradayım, her zaman beklerim. :)