PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


สอน jQuery เพิ่มรูปภาพ ให้ตัวเลือก ใน listbox

19 April 2010 By
รูปภาพ listbox jquery

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



ตัวอย่าง

  • Nokia 5235
  • Nokia 2710
  • Nokia 7230
  • Nokia 6700
  • Nokia 5330
  • Nokia 2690

HTML Code

<div style="margin:auto;width:400px;">
<form id="form1" name="form1" method="post" action="">
  <select name="my_select" id="my_select">
    <option value="">เลือกข้อมูล</option>
  </select>
<ul class="myUL1">  
<li title="Nokia 5235" ref="http://www.siamphone.com/picture/nokia/5235/nokia_5235_thumb.jpg">Nokia 5235</li>    
<li title="Nokia 2710" ref="http://www.siamphone.com/picture/nokia/2710_navigation/nokia_2710_navigation_thumb.jpg">Nokia 2710</li>  
<li title="Nokia 7230" ref="http://www.siamphone.com/picture/nokia/7230/nokia_7230_thumb.jpg">Nokia 7230</li>    
<li title="Nokia 6700" ref="http://www.siamphone.com/picture/nokia/6700_slide/nokia_6700_slide_thumb2.jpg">Nokia 6700</li>    
<li title="Nokia 5330" ref="http://www.siamphone.com/picture/nokia/5330_mobiletvedition/nokia_5330_mobiletvedition_thumb.jpg">Nokia 5330</li>    
<li value="Nokia 2690" title="http://www.siamphone.com/picture/nokia/2690/nokia_2690_thumb.jpg">Nokia 2690</li>  
</ul> 
<div class="myPic">
<img src="" />
</div>   
</form>
</div>

 

CSS Code

<style type="text/css">
select#my_select{
	width:200px;
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
}
select#my_select option{
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
}
ul.myUL1{   
    margin:0px;   
    padding:0px;   
    font-size:12px;   
    width:200px;   
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
    position:absolute;   
    display:none;   
    list-style:none;   
	z-index:100;
/* ถ้ารายการตัวเลือกมีมาก สามารถกำหนดความสูง แล้วให้มีมี scroll เลื่อนดูข้อมูล  
โดยเอา comment สองบรรทัดล่างนี้ออก */      
  	height:80px;  
    overflow:auto;  
}   
ul.myUL1 li{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    text-indent:80px; 
    list-style:none;   
}   
ul.myUL1 li:hover{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    background-color:#666666;   
    color:#FFFFFF;   
}
div.myPic{
	display:block;
	width:75px;
	height:80px;
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
	border-right-width:0px;
	z-index:110;	
	position:absolute;  
	display:none;
	text-align:center;
}
div.myPic img{
	width:35px;
	height:70px;
	border:0;
	display:none;
}
</style>

 

Javascript Code

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
    var obj1="select#my_select"; // กำหนด object  เป้าหมาย   
    var obj2="ul.myUL1"; // กำหนด object รายการตัวเลือก   
	var obj3="div.myPic";  // กำหนด object สำหรับส่วนแสดงภาพ
    $(obj1).focus(function(){   
        var nX=$(this).offset().left;   
        var nY=$(this).offset().top+($(this).height()+3);   
		$(this).html("");
        $(obj2).show().css({   
			"width":$(this).width()+"px",
            "left":nX,   
            "top":nY   
        });   
		$(obj3).show().css({   
            "left":nX,   
            "top":nY   
        }); 
		$(obj1).html("<option value=\"\">เลือกข้อมูล</option>").blur();   
    });   
    $(obj2).hover(function(){   
        $(this).show();    
		$(this).find("li").hover(function(){   
			$(obj3).find("img").show().attr("src",$(this).attr("ref"));
		});	
		$(this).find("li").click(function(){  	
			var setValue=$(this).attr("title");
			var setText=$(this).text();
			setText=(setText!="")?setText:"เลือกข้อมูล";
			$(obj2).hide();   
			$(obj1).html("<option value=\""+setValue+"\">"+setText+"</option>").blur();   
			$(obj3).hide();  			
		});
    },function(){   
		if($(obj1).val()==""){
			var setValue="";
			var setText="";
			setText=(setText!="")?setText:"เลือกข้อมูล";
			$(this).hide();   
			$(obj1).html("<option value=\""+setValue+"\">"+setText+"</option>").blur();   
			$(obj3).hide();  		
		}
    });  
});
</script>

 







Tags:: listbox รูปภาพ jquery






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง