亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

寫了個jquery select 插件

系統 3938 0
select在IE6下顯示時存在問題，寫了個jquery插件，隱藏原select，用js重新構建UI，對新UI的操作會映射到原select，支持默認選中，自適應寬和change事件

效果圖
寫了個jquery select 插件

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);

寫了個jquery select 插件


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧，站長會非常 感謝您的哦！！！

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板： 色综合五月婷婷 | 中文字幕日本一区久久 | 美女天天干 | 精品国产免费福利片 | 国产三级日产三级日本三级 | 成人夜色视频在线观看网站 | 94欧美| 久久久久久青草大香综合精品 | 九九热视频在线播放 | 91青青青国产在观免费影视 | 58av国产精品| 久久久久9 | 免费黄色小视频在线观看 | 亚洲精品一级一区二区三区 | 亚洲不卡视频 | 手机免费看一级片 | 日本不卡免费 | 国产一区二区不卡视频 | 青青青青青国产免费观看 | 午夜视频福利在线观看 | 天天影视欧美综合在线观看 | 老妇激情毛片免费中国 | 国产亚洲视频在线 | 欧美成人午夜视频 | 欧美精品blacked中文字幕 | 免费黄色毛片 | 综合激情网站 | 中文字幕日韩精品一区口 | 久久久婷 | 久久影视精品 | 性欧美暴力猛交xxxxx高清 | 久青草国产手机在线视频 | 欧美成年黄网站色高清视频 | 五月花精品视频在线观看 | 国产99久久亚洲综合精品 | 久久嫩模| 性视频一区二区三区免费 | 91sao国产在线观看 | 国产精品久久久久久 | 日韩欧美亚洲中字幕在线播放 | 一级成人生活片免费看 |