写了个jquery select 插件 -

gashor

浏览: 2231 次
性别:
来自: 杭州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2)

社区版块

存档分类

写了个jquery select 插件

jQuery CSS UI JavaScript HTML

select在IE6下显示时存在问题，写了个jquery插件，隐藏原select，用js重新构建UI，对新UI的操作会映射到原select，支持默认选中，自适应宽和change事件

效果图

example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>example</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="js/selectBox/selectBox.css"/>
<script type="text/javascript" src="js/selectBox/selectBox.js"></script>
<script>
$().ready(function(){	
	$("#room").change(function(){alert("changed");});
	$("select").selectBox();    
});
</script>
<style>
body{font-size:14px}
</style>
</head>
<body>
    <select name="room" id="room">
        <option value="">请选择</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
    <label>A</label>


    <select name="hall">
        <option value="">请选择</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <label>B</label>
    

    <select name="toilet">
        <option value="">请选择</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">长字符串长字符串</option>
    </select>
    <label>C</label> 
</body>
</html>

selectBox.js

;(function($) {
    $.fn.extend({
        "selectBox":function(value){
            //=
	        var $this=this;
	        var jQuerySelectBoxCount=1;
	        var hideDragDown=function(){
	        	   $(".jQuerySelectBox .options").css("display","none")
	        	};
	        
	        $this.each(function(){
	            jQuerySelectBoxCount++;
	            var d=new Date();
	            var id="jQuerySelectBox"+d.getSeconds()+"_"+d.getMilliseconds()+"_"+jQuerySelectBoxCount;
	            var jQuerySelectBox=$("#"+id);
	            var original=$(this);
	            original.css("display","none");
	            var e="<div class='jQuerySelectBox' id='"+id+"'></div>";
	            $(e).insertAfter(original); 
	            var current=$("<div class='current' index='0'>&nbsp;</div>").appendTo("#"+id);
	            var opts=$("<div class='options'></div>").appendTo("#"+id);
	            var down=$("<div class='down'></div>").appendTo("#"+id);
	            
	            var dragDown=function(){//drag down the options
		            if($("#"+id+" .options").css("display")!="block"){
		                hideDragDown();
		                $("#"+id+" .options").css({
		                    display : "block",
		                    top : $("#"+id).offset().top+$("#"+id).height(),
		                    left : $("#"+id).offset().left,
		                    width : $("#"+id).width()
			            });
		                $("#"+id+" .options .option[index='"+current.attr("index")+"']").addClass("selected");
		            }else{
		            	hideDragDown();
		            }
	            };
	            
	            $(down).click(dragDown);
	            $(current).click(dragDown);
	            
	            var options=original.children("option");
	            var o;
	            for(var i=0;i<options.length;i++){
	                o=original.find("option[index='"+i+"']");
	                var option="<div class='option' val='"+o.attr("value")+"' index='"+i+"'>";
	                option+=o.text();
	                option+="</div>";
	                var opt=$(option).appendTo(opts);
	                
		            if(o.attr('selected')==true){//selected option
		                opt.addClass("selected");
		                $(current).html(o.text());
		                $(current).attr("index",i);
		            }
		            
		            opt.click(function(){
		                current.html($(this).text());
		                if(current.attr("index")!=$(this).attr("index")){//if change
		                  current.attr("index",$(this).attr("index"));
		                  $(original).change();//invoke orignal select onchange 
		                }
		                original.find("option[index='"+$(this).attr("index")+"']").attr("selected",true);
		                $(this).addClass("selected");
		                hideDragDown();
		            });
		            
		            opt.mouseover(function(){
		                $(".jQuerySelectBox .options .option").removeClass("selected");
		                  $(this).addClass("selected");
		            });
		            
		            opt.mouseout(function(){
		            	$(this).removeClass("selected");
		            });
	            }
	            $(current).width(opts.width());
	            $("#"+id).width(opts.width()+down.width()+2);
	        });
            //=
        }
    });
})(jQuery);