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

ตัวอย่างต่อไปนี้เป็นเพียงส่วนของการฝึกสร้าง 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>