傳統的 Select 下拉框因為樣式醜陋且無法隨性更改樣式而遭到了我的鄙夷,相信很多人都有此種觀點。並且在ie6下,下拉框的優先順序大於層,經常導致下拉框顯示在層的上面。但是自從有了 Javascript,這些問題便不再是問題。最近正好在改版一個網站,要修改下拉框的樣式,正好看到 CssRain 已經製作了這麼一個很有用的插件,下面我就教大家怎麼用 jQuery 製作一個模擬下拉框,從而實現對 Select 下拉框樣式的定製。
思路:
通過已知的下拉框,把裡面的數據循環出來,放到另一個div的ul列表裡,
另一個div就是簡單的彈出層而已。
通過hidden可以 獲取下拉框的選中的值和文本 。
先看這段代碼:
<script type="text/javascript"> /* Dev by CssRain.cn Test in IE6,IE7,Firefox3,Chrome 感謝 CssRain的這段插件代碼 */ jQuery.fn.CRselectBox = jQuery.fn.sBox = function(options){ options = $.extend({ animated : false },options); var _self = this; /*構建結構*/ var _parent = _self.parent(); var wrapHtml = '<div class="CRselectBox"></div>'; var $wrapHtml = $(wrapHtml).appendTo(_parent); var selectedOptionValue = _self.find("option:selected").attr("value"); var selectedOptionTxt = _self.find("option:selected").text(); var name = _self.attr("name"); var id = _self.attr("id"); var inputHtml = '<input type="hidden" value="'+selectedOptionValue+'" name="'+name+'" id="'+id+'"/>'; $(inputHtml).appendTo($wrapHtml); var inputTxtHtml = '<input type="hidden" value="'+selectedOptionTxt+'" name="'+name+'_CRtext" id="'+id+'_CRtext"/>'; $(inputTxtHtml).appendTo($wrapHtml); var aHtml = '<a class="CRselectValue" href="#">'+selectedOptionTxt+'</a>'; $(aHtml).appendTo($wrapHtml); var ulHtml = '<ul class="CRselectBoxOptions"></ul>'; var $ulHtml = $(ulHtml).appendTo($wrapHtml); var liHtml = ""; _self.find("option").each(function(){ if($(this).attr("selected")){ liHtml += '<li class="CRselectBoxItem"><a href="#" class="selected" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>'; }else{ liHtml += '<li class="CRselectBoxItem"><a href="#" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>'; } }); $(liHtml).appendTo($ulHtml); /*添加效果*/ $( $wrapHtml, _parent).hover(function(){ $(this).addClass("CRselectBoxHover"); },function(){ $(this).removeClass("CRselectBoxHover"); }); $(".CRselectValue",$wrapHtml).click(function(){ $(this).blur(); if( $(".CRselectBoxOptions",$wrapHtml).is(":hidden") ){ if(options.animated){ $(".CRselectBoxOptions").slideUp("fast"); $(".CRselectBoxOptions",$wrapHtml).slideDown("fast"); }else{ $(".CRselectBoxOptions").hide(); $(".CRselectBoxOptions",$wrapHtml).show(); } } return false; }); $(".CRselectBoxItem a",$wrapHtml).click(function(){ $(this).blur(); var value = $(this).attr("rel"); var txt = $(this).text(); $("#"+id).val(value); $("#"+id+"_CRtext").val(txt); $(".CRselectValue",$wrapHtml).text(txt); $(".CRselectBoxItem a",$wrapHtml).removeClass("selected"); $(this).addClass("selected"); if(options.animated){ $(".CRselectBoxOptions",$wrapHtml).slideUp("fast"); }else{ $(".CRselectBoxOptions",$wrapHtml).hide(); } return false; }); $(document).click(function(event){ if( $(event.target).attr("class") != "CRselectBox" ){ if(options.animated){ $(".CRselectBoxOptions",$wrapHtml).slideUp("fast"); }else{ $(".CRselectBoxOptions",$wrapHtml).hide(); } } }); _self.remove(); return _self; } }) </script> |
當然既然是 jQuery 實現的,自然別忘了載入 jQuery 的庫哦!
–Via
至於怎麼用呢,看下面這段代碼:
<script type="text/javascript"> $(function(){ $("#abc").CRselectBox(); //#abc 為你的下拉框select的ID </script> |
只要給你的下拉框 Select 一個 ID 值即可,其餘的就交給上述的 jQuery 插件了。
CSS部分自行定義:
.CRselectBox {} .CRselectBoxHover {} .CRselectBox a.CRselectValue {} .CRselectBoxOptions {} .CRselectBoxOptions a{} .CRselectBoxOptions a:hover{} .CRselectBoxOptions a.selected{} /* 解決 firefox 點擊放大出現虛線框,從而導致滾動條的問題 */ .CRselectBox a { outline: none; text-decoration:none; } .CRselectBox a:focus { outline: none; text-decoration:none; } |
沙發是我的吧!
這個非常實用呢!!
發現當所選項目太長時會超出搜索框
我的留言哩?
哈哈.我是來下demo的.以後用的上
@Showfom 速度真快!
@welee 呃,搜索框的樣式就不要苛刻要求我了哈,我這裡只提供製作下拉框的方法。
@xiaorsz 啥子?
@yinheli 本博客不會倒閉,歡迎日後使用搜索功能~
@Leeiio
看來我說錯話了….(- -!)
@Leeiio
博客放在國外確實不好,今天我的國外的主機抽風了,鬱悶!
我剛留言了,可發表了卻沒看見,詭異了,呵呵!!
我是來收藏的~~哈哈
只是提供原理, 樣式的問題,可能要自己修改。
謝謝leeiio。
@yinheli
哈哈,言重了。
@Showfom
國外也又國外的好啊,國外不用備案。
@xiaorsz
呃,沒準數據庫那時候腦殘了。
@cssrain
是我謝謝你的插件哈。
@Leeiio
關鍵是,我05年就備案的……哎
不錯 日後需要用到我會想到leeiio的 😀
「繼續在這片熱土上插上你的小紅花吧…」
相當有用的功能,以後會用到吧~
收下了
失蹤啦~~這麼久不露面~
這麼久還不露面?
五一節快樂啦~
@吖Bee
哈哈,五一快樂!最近忙得很~
Pingback: RSSA頻道 » Blog Archive » 桌面便簽小軟體ATnotes – 提醒你勿忘臨時小需求!
😉 😉 😉
CSSrain的那個插件問題不少,所以最後我自己寫了個。。。。
@feihongly
呵呵 我也準備自己寫一個
不錯,收下了,呵呵