Jquery scrollbar yapımı

Halk dili ile sağ sürükleme çubuğu olarak da geçen, demosunu bu adresten bulabileceğiniz jquery scrollbar web siteleri için olmazsa olmazlardandır. jscrollpane.kelvinluck.com adresinden de ulaşabileceğiniz Jquery scrollbar farklı türlerine de rastlayabilirsiniz.(inceledim hepsi birbirine benzer şekilde oluşturulmuş).

Gerekli stil ve jquery referans dosyalarını buradan indirerek operasyona başlayabiliriz. Bu klasörleri indirdikten sonra head etiketleri arasına sürükleyin. Uygulamayı Asp.net(php vs. fark etmez benzer şekilde uygularsanız bu scrollbar zamazingosu her yerde çalışır) ile yaptığımı hatırlatarak gerekli referansları ve javascript kodları nereye ekleneceğini alt tarafta bulabilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
   
   
    <link href="jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
        <style type="text/css" id="page-css">
            .scroll-pane
            {
                width: 100%; /* Genişlik buradan */
                height: 400px; /* Yüksekliği, metin vs. içeriğinin yüksekliğine göre ayarlamalısnız  */
                overflow: auto;
            }
            .horizontal-only
            {
                height: auto;
                max-height: 200px;
            }
            </style>


    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="jquery.mousewheel.js" type="text/javascript"></script>
    <script src="jquery.jscrollpane.min.js" type="text/javascript"></script>
               
         
        <script type="text/javascript" id="sourcecode">
            $(function () {
                $('.scroll-pane').jScrollPane();
            });
        </script>
</asp:Content>

head aralığına yukarıdaki gibi gereken javascript ve css kodlarını da ekleyerek, referans edilen 4 dosyayı(1 css 3 js) da ekleyip scrollbar için gereken işlemleri tamamlamış olursunuz. Gereken bir kaç açıklamayı kod içinde bulabilirsiniz. Rengini jquery.jscrollpane.css dosyasından değiştirebilirsiniz.

Ardından scrollbar içine koyacağınız metin, görsel, form vs. ilgili class içine almak kalıyor. Alltaki kısımda ne demek istediğimi anlayabilirsiniz;

1
 <div class="scroll-pane"> metin görsel form vs içeriği buraya giriyoruz....</div>

Bu scrollbar sayesinde uzunca yazıları, formları yüksekliği belli site içinde konumlandırmanıza yardımcı oluyor.

“Jquery scrollbar yapımı” için 3 cevap

  1. Merhaba. Tarih geçmiş ama önemli bir bilgi bu. Yukarıdaki kodları joomla da nasıl kullanırız. head taglarını index.php sanırım. Alttaki div class nereye eklenmeli ve içine yazarlar modülünü nasıl çekerim. Teşekkürler.

Bir Cevap Yazın

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