JQuery SELECT單選模擬 - jQuery.select.js

 基於jQuery JavaScript Library v1.3.2 的單選模擬 

 (本文件是跟據 zhangjingwei 的Jquery Select(單選) 模擬插件 V1.3.4 修改而來的)

 

 a. 修改的主要原因是，原來的zhangjingwei的模擬在顯示方式上的問題。在跟文字交替出現時會出現錯位。現將模擬DIV的display修改爲inline方式。更自然的嵌入到文本行中。

 

 b.在加載文件後自動轉化樣式名爲'commonselect' 的select。簡化調用

 

 c.對select的onchange()事件的響應。以及寬度獲取的小調整

 

 

jquery.select.js

/* * jQuery.select.js */ jQuery.fn.sSelect = function(){ var selectId = $(this).attr('id'); var selectZindex = $(this).css('z-index'); var selectIndex = $('#'+selectId+' > select > option').index($('#'+selectId+' > select > option:selected')[0]); $('#'+selectId).append('<div class="dropselectbox"><h4></h4><span class="FixSelectBrowserSpan"></span><ul style="display:none" mce_style="display:none"><li></li></ul></div>'); $('#'+selectId+' > div > h4').empty().append($('#'+selectId+' > select > option:selected').text()); $('.dropselectbox').css("display", 'block'); //取select的寬度 優先級 select樣式中的寬度 - select自動的寬度 - 默認爲60 var selectcssWidth = $('#'+selectId+'> select').css('width'); selectcssWidth = typeof(selectcssWidth) =='undefined' ? 0 : parseInt(selectcssWidth.replace('px','')) +5 ; var selectWidth = selectcssWidth ? selectcssWidth : ( $('#'+selectId+'> select').width() > 0 ? $('#'+selectId+'> select').width() + 5 : 60); $('#'+selectId).css("margin-right",selectWidth); //修改偏移量 $('#'+selectId+' > div > h4').css("width", selectWidth); //將原select的寬度賦值給生成的select（並不是h4的總寬度） $('#'+selectId+' > div > ul').css("width",selectWidth); //將h4的總寬度賦值給Ul $('#'+selectId+' > select').hide(); $('#'+selectId+' > div').hover(function(){ $('#'+selectId+' > div > h4').addClass("over"); $('#'+selectId+' > div > span').addClass("over"); },function(){ $('#'+selectId+' > div > h4').removeClass("over"); $('#'+selectId+' > div > span').removeClass("over"); }); $('#'+selectId) .bind("focus",function(){ __clearSelectMenu(); $('#'+selectId+' > div > h4').addClass("over"); $('#'+selectId+' > div > span').addClass("over"); }) .bind("click",function(e){ //$('#value2').append('點擊：'+selectIndex+'  <br>'); if($('#'+selectId+' > div > ul').css("display") == 'block'){ __clearSelectMenu(selectId); return false; }else{ if ($.browser.opera){__clearSelectMenu();} $('#'+selectId+' > div > h4').addClass("current"); $('#'+selectId+' > div > span').addClass("over").addClass("current"); $('#'+selectId+' > div > ul').show(); var selectZindex = $(this).css('z-index'); if ($.browser.msie || $.browser.opera){ $('.dropdown').removeClass('overclass'); } $('#'+selectId).addClass('overclass'); __setSelectValue(selectId); var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $(this).offset().top; var ulspace = $('#'+selectId+' > div > ul').outerHeight(true); var windowspace2 = $(this).offset().top - $(window).scrollTop() - ulspace; if (windowspace < ulspace && windowspace2 > 0) { $('#'+selectId+' > div > ul').css({top:-ulspace}); }else{ $('#'+selectId+' > div > ul').css({top:$('#'+selectId+' > div > h4').outerHeight(true)}); } selectIndex = $('#'+selectId+' > div > ul > li').index($('.selectedli')[0]); $(window).scroll(function(){ var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $('#'+selectId).offset().top; var ulspace = $('#'+selectId+' > div > ul').outerHeight(true); if (windowspace < ulspace) { $('#'+selectId+' > div > ul').css({top:-ulspace}); }else{ $('#'+selectId+' > div > ul').css({top:$('#'+selectId+' > div > h4').outerHeight(true)}); } }); //響應鼠標點擊選擇 $('#'+selectId+' > div > ul > li').click(function(e){ selectIndex = $('#'+selectId+' > div > ul > li').index(this); //$('#value2').append('鼠標點擊：'+selectIndex+'  <br>'); $('#'+selectId+'> select')[0].selectedIndex = selectIndex; $('#'+selectId+' > div > h4').empty().append($('#'+selectId+' > select > option:selected').text()); __clearSelectMenu(selectId,selectZindex); e.stopPropagation(); e.cancelbubble = true; //SELECT onchange 事件 $('#'+selectId+'> select').change(); }) .hover( function(){ $('#'+selectId+' > div > ul > li').removeClass("over"); $(this).addClass("over").addClass("selectedli"); selectIndex = $('#'+selectId+' > div > ul > li').index(this); }, function(){ $(this).removeClass("over"); } ); //End }; e.stopPropagation(); }) .bind("mousewheel",function(){ //以後也許支持滾輪 /*$('#'+selectId+' > div > ul > li').hover( function(){ return false; }, function(){ return false; } );*/ }) .bind("dblclick", function(){ __clearSelectMenu(); return false; }) .bind("keydown",function(e){ //var hotkeys = e.keyCode; $(this).bind('keydown',function(e){ if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){ return false; } }); switch(e.keyCode){ //設置爲true可給定case範圍 case 9: return true; break; case 13: //enter //$('#value2').append('按回車收到的值：'+selectIndex+'  <br>'); __clearSelectMenu(); break; case 27: //esc __clearSelectMenu(); break; case 33: $('#'+selectId+' > div > ul > li').removeClass("over"); selectIndex = 0; __keyDown(selectId,selectIndex); break; case 34: $('#'+selectId+' > div > ul > li').removeClass("over"); selectIndex = ($('#'+selectId+' > select > option').length - 1); __keyDown(selectId,selectIndex); break; case 35: $('#'+selectId+' > div > ul > li').removeClass("over"); selectIndex = ($('#'+selectId+' > select > option').length - 1); __keyDown(selectId,selectIndex); break; case 36: $('#'+selectId+' > div > ul > li').removeClass("over"); selectIndex = 0; __keyDown(selectId,selectIndex); break; case 38: //up //$('#value2').append('原始值：'+selectIndex+'  <br>'); $('#'+selectId+' > div > ul > li').removeClass("over"); if (selectIndex == 0){ selectIndex = 0; }else{ selectIndex--; }; //$('#value2').append('<span style="color:red;" mce_style="color:red;">向上改變的aa值：</span>'+selectIndex+'  '); __keyDown(selectId,selectIndex); break; case 40: //down //$('#value2').append('傳遞過來的：'+selectIndex+'  '); $('#'+selectId+' > div > ul > li').removeClass("over"); if (selectIndex == ($('#'+selectId+' > select > option').length - 1)){ selectIndex = $('#'+selectId+' > select > option').length - 1; }else{ selectIndex ++; }; //$('#value2').append('<span style="color:blue;" mce_style="color:blue;">向下改變的aa值：</span>'+selectIndex+'  '); __keyDown(selectId,selectIndex); break; /*case ((hotkeys > 47 && hotkeys < 59) || (hotkeys > 64 && hotkeys < 91) || (hotkeys > 96 && hotkeys < 123)): //首字幕查詢預留接口 //character = String.fromCharCode(hotkeys).toLowerCase(); return false; break;*/ default: return false; break; }; }) .bind("blur",function(){ __clearSelectMenu(selectId,selectZindex); return false; }); //禁止選擇 $('.dropselectbox').bind("selectstart",function(){ return false; }); }; function __clearSelectMenu(selectId,selectZindex){ //$('#value2').append('移除焦點：'+selectIndex+'  <br>'); $('.dropselectbox > ul').empty().hide(); $('.dropselectbox > h4').removeClass("over").removeClass("current"); $('.dropselectbox > span').removeClass("over"); $('#'+selectId).removeClass('overclass'); } function __setSelectValue(sID){ $('#'+sID+' > div > ul').empty(); $.each($('#'+sID+' > select > option'), function(i){ $('#'+sID+' > div > ul').append("<li class='FixSelectBrowser'>"+$(this).text()+"</li>"); }); $('#'+sID+' > div > h4').empty().append($('#'+sID+' > select option:selected').text()); $('#'+sID+' > div > ul > li').eq($('#'+sID+'> select')[0].selectedIndex).addClass("over").addClass("selectedli"); } function __keyDown(sID,selectIndex){ $('#'+sID+'> select')[0].selectedIndex = selectIndex; $('#'+sID+' > div > ul > li:eq('+selectIndex+')').toggleClass("over"); $('#'+sID+' > div > h4').empty().append($('#'+sID+' > select option:selected').text()); //SELECT onchange 事件 $('#'+sID+'> select').change(); } /* 自動調用 */ $(document).ready(function(){ var s = new Array(); var t = document.getElementsByTagName('select'); var j = 0; for(var i=0;i<t.length;i++){ if(t[i].className=='commonselect'){ s[j] = t[i]; j++; } } if(j==0)return; var k = m = null; for(var i=0;i<s.length;i++){ k = s[i].parentNode; m = createDiv(k, i); //s[i].replaceNode(m); k.replaceChild(m,s[i]) m.appendChild(s[i]); $('#selectbox'+ i).sSelect(); } function createDiv(p, i){ var div = document.createElement('div'); div.className = 'dropdown'; div.id = 'selectbox' + i; div.innerHTML = ' '; p.appendChild(div); return div; } })

 

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=utf-8" /> <title>JQuery SELECT單選模擬</title> <style type="text/css" mce_bogus="1"> body,div,ul,h4,li {margin:0; padding:0; border:none; list-style:none; font-size:1;} /*下拉列表select的commonselect樣式 配合jquery.select插件 */ /* select style */ .dropdown {outline:none;z-index:1;display:inline-block;*display:inline; position:relative;} .dropdown * {-moz-user-select:none;} .dropselectbox{float:left; position:absolute} .overclass{ z-index:999} /* 對於IE下層定位問題的修正樣式 */ .dropdown h4{position:relative;cursor:default; text-indent:5px;text-align:left;display:block;overflow:visible; margin:0; height:20px;font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E;padding-left:0px;} .dropdown h4.over{border-color:#369;} .dropdown h4.current{border-color:#003;} .dropdown div {display:none;position:absolute; left:0px; top:0px;} .dropdown span {position:absolute;top:4px; right:3px; background:url(ico.gif) no-repeat center; width:16px; height:14px;} .dropdown ul{position:absolute;display:none;border:1px solid #AAA; background:#333;color:#8E867B;} .dropdown ul li{text-indent:5px;background:#333;height:19px;display:block;cursor:default;font:400 12px/19px Arial, Helvetica, sans-serif;text-align:left;} .dropdown ul li.over{background:#369; color:#FFF;} /* select style */ /* input style */ input.txt{border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E; height:18px;line-height:18px;} </style> <script type="text/javascript" src="jquery132.js" mce_src="jquery132.js"></script> <script type="text/javascript" src="jquery.select.js" mce_src="jquery.select.js"></script> </head> <body style="background:none" mce_style="background:none"> <h1>Jquery Select(單選) 模擬插件 V1.3.4</h1> <form action="#" method="post" style="margin:10px;" mce_style="margin:10px;"> 類型： <select name="type" class="commonselect" id="test"> <option value=""></option> <option value="男">類型男</option> <option value="女">類型女</option> </select> 性別: <select name="sex" style="width:100px" onchange="alert(this.value);"> <option value="">性別：</option> <option value="男">男</option> <option value="女">女</option> </select> <input type="text" size="8" class="txt" name='input'> <input type="submit" id="postform" value="提交表單" style="border:1px solid #000; height:23px; margin-left:20px;" /> </form> </body> </html>