สร้าง scrollbar แนวตั้ง จากรูปภาพ ด้วยเทคนิค css sprite image และ jQuery

19 November 2009 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

jquery scrollbar รูปภาพ แนวตั้ง css sprite images

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery scrollbar รูปภาพ แนวตั้ง css sprite images

ดูแล้ว 14,115 ครั้ง

ตัวอย่างต่อไปนี้เป็นเพียงส่วนของการฝึกสร้าง scrollbar แนวตั้ง จากรูปภาพที่กำหนดเอง ด้วยเทคนิค css sprite image และ jQuery ส่วนการประยุกต์ใช้ เช่น การทำ scrollbar แนวนอน, การนำไปใช้กับ textarea ,iframe,div และอื่นๆ จะขอกล่าวภายหลัง

ตัวอย่างผลลัพธิ์ สามารถคลิกเลื่อนขึ้นลง หรือลากเลื่อนขึ้นลงได้

รูปที่ใช้

CSS code

<style type="text/css">
ul#myUIscroll{
    margin:0;padding:0;
    list-style:none;
    width:20px;
    display:block;
}
ul#myUIscroll li{
    margin:0;padding:0;
    list-style:none;
    width:20px;
    float:left;
    clear:both;
}
/* css สำหรับกำหด ปุ่ม เลื่อนขึ้น */
ul#myUIscroll li.upArrow{
    background:url(images/myscrollBar.png) 0 0 no-repeat;
    height:20px;
    cursor:pointer;
}
/* css สำหรับกำหดแถบกลาง */
ul#myUIscroll li.middleBar{
    background:url(images/myscrollBar.png) -40px 0 repeat-y;
    height:200px; /* สำหรับกำหดนความสูงของ scrollbar */
}
/* css สำหรับกำหด ปุ่ม เลื่อนลง */
ul#myUIscroll li.downArrow{
    background:url(images/myscrollBar.png) -20px 0 no-repeat;
    height:20px;
    cursor:pointer; 
}
/* css สำหรับกำหด ปุ่ม เลื่อนตรงกลาง */
div.faceBar{
    position:absolute;
    display:block;float:left;
    width:20px;height:20px;
    cursor:pointer;
    background:url(images/myscrollBar.png) -60px 0 no-repeat;
}
</style>

HTML code

<ul id="myUIscroll">
<li class="upArrow"></li>
<li class="middleBar"><div class="faceBar"></div></li>
<li class="downArrow"></li>
</ul>    

Javascript Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
    $("div.faceBar").mousedown(function(event){  
        var locateY=event.pageY;      
        var obj_locateY=$(this).offset().top;         
        var diff_y=locateY-obj_locateY;        
        var minY=$("li.middleBar").offset().top;
        var maxY=$("li.downArrow").offset().top;
        maxY-=$("li.downArrow").height();
        $(this).mousemove(function(event){  
            locateY=event.pageY;      
            obj_locateY=$(this).offset().top;                       
            new_locateY=locateY-diff_y;         
            if(new_locateY>=minY && new_locateY<=maxY){                  
                $(this).css({  
                    top:new_locateY  
                }).bind("mouseup mouseout",function(){        
                    $(this).unbind("mousemove");          
                });        
             }          
        });  
    });  
         
     
    $("li.downArrow").click(function(){
        var new_locateBar=$("div.faceBar").offset().top;
        var minY=$("li.middleBar").offset().top;
        var maxY=$("li.downArrow").offset().top;            
        new_locateBar+=20;
        if(new_locateBar>=minY && new_locateBar<maxY){       
            $("div.faceBar").css({  
                top:new_locateBar  
            });
        }
    });
     
    $("li.upArrow").click(function(){
        var new_locateBar=$("div.faceBar").offset().top;
        var minY=$("li.middleBar").offset().top;
        var maxY=$("li.downArrow").offset().top;            
        new_locateBar-=20;
        if(new_locateBar>=minY && new_locateBar<maxY){       
            $("div.faceBar").css({  
                top:new_locateBar  
            });
        }
    }); 
     
});  
</script>  