Merhaba arkadaşlar. Bu yazımızda jquery ve css yardımıyla scrollbar tasarımı yapacağız. Uygulamamızın içerisine çekeceğimiz javascript dosyalarını internette arayarak ulaşabilirsiniz. Öncelikle css kodlarımızı paylaşacağım. Sonrasında javascript kodlarımızı ve html kodlarımızı yazacağız. Şimdi geçelim kodlarımıza.
Css Kodlarımız :
.scroll-paneBurada kullandığımız divlerin düzenlemelerini ve scrollbarın tasarımını yaptık. Şimdi geçelim javascript kodlarımıza.
{
width: 100%;
height: 150px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
#anadiv {
position:absolute;
left:446px;
top:180px;
width:433px;
height:173px;
z-index:1;
border:solid;
border-width:3px;
border-color:#F8942D; //ana divimizin kenarlık - border rengini ayarladık
font-family:Tahoma;
color:#333333;
}
#bas {
background-color:#F8942D; //başlık alanının arkaplan rengini belirledik.
height:23px;
font-family:Tahoma;
color:#ffffff;
}
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
}
.jspTrack
{
background: #f6f6f6; //scrollbar'ın arkaplan rengini ayarladık.
position: relative;
}
.jspDrag
{
background: #999999; // scrollbar'ımızın rengini ayarladık.
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Javascript Kodlarımız :
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>Jquery dosyalarımızı içeri aktardık. Bu dosyaları internette arayarak bulabilirsiniz. Şimdi html kodlarımıza geçelim.
<script src="jquery.mousewheel.js" type="text/javascript"></script>
<script src="jquery.jscrollpane.min.js" type="text/javascript"></script>
$(function () {
$('.scroll-pane').jScrollPane();
});
Html Kodlarımız :
<div id="anadiv"><div id="bas"> Başlığımız</div><div class="scroll-pane">Burada anadiv, bas, scroll-pane adlarında divlerimizi oluşturduk. Anadiv tüm divlerimizi kapsayan divimizdir. Bas divimiz başlığımızın bulunduğu divdir. Scroll-pane adından da anlaşılacağı üzere scrollbar ile ilgili divimizdir. Scroll'umuzu bu dive oluşturduk. Çalışan halini yorum yoluyla istemeniz halinde gönderebilirim. Sonraki makalelerde görüşmek üzere...
<table border="0" width="100%"><tr><td>
satır1<br>
satır2<br>
satır3<br>
satır4<br>
satır5<br>
satır6<br>
satır7<br>
satır8<br>
satır9<br>
satır10<br>
satır11<br>
satır12<br>
satır13<br>
satır14<br>
satır15<br>
</td></tr></table>
</div>
</div>
1 Yorum
oguz
teşekkürler işime yaradı