本文實例講述了jQuery模擬實現的select點擊選擇效果。分享給大家供大家參考,具體如下:
有時候有些HTML元素無法讓我們用樣式控制進行控制,但是射雞師或是客戶的需求就是需要這種效果,還要讓每個浏覽器都顯示同樣的效果,這時候就會讓我們這些所謂的前端攻城師很蛋疼,客戶會認為交了點錢不讓你折騰些東西,以為你是沒做事的。面對這些對技術一竅不通的客戶,技術對於他們來說就是一坨屎,以為我們都是用意念來寫代碼做程序的,所以都把我們的勞動成果看作是廉價得像是簡單的拉出一泡屎而已。
雖然很喜歡什麼都沒有修飾的默認效果,但是又不得不面對這些客戶蛋疼的效果和要求,所以不得不折騰幾個來回總不滿足,HTML裡面,不可以樣式控制的元素恐怕也為數不多,select是其中的一個,,所以今天也來折騰一下這個比較喜歡自由不愛樣式約束的元素,采用模擬的方式來實現select的效果。
采用模擬的好處可以任意的進行樣式控制,做出各種各樣的效果,在各個浏覽器中的表現都一致,實現客戶蛋疼的要求,但缺點也是同樣的存在的,網絡非常慢或客戶端禁止運行腳本的時候//(盡管腳本禁止運行的機率很低,一般只會有服務器版本的浏覽器上才會出現),腳本加載不到有可能會影響到其失效,無法進行操作,
其實這個效果早已廣泛應用,也不算什麼新鮮的了,大家可以隨便看一下比較新一點的網站都能找到,下面分別是淘寶和拍拍上也采用模擬的select的截圖。
淘寶模擬select:
拍拍模擬select:
本例實現效果:
實現的思路很簡單,只有兩步:
1、當鼠標進行移入和點擊的目標元素的時候,觸發彈出一個層,層內裝著模擬的不同的元素的值
2、點擊選擇層內的元素的時候,需要將點擊元素文本元素賦到目標元素中,並將元素內的一些參數值傳到一個隱藏的域中進行傳值
於是就有了以下的HTML、CSS和操作JS:
html:
<span class="selectType"> <a title="" href="#" class="ipt" id="selectTypeText">全部</a> <span id="selectTypeMenu"> <a rel="0" title="" href="#">全部</a> <a rel="1" title="" href="#">商品</a> <a rel="2" title="" href="#">商鋪</a> </span> <input type="hidden" name="" class="ipt" value="" id="selectTypeRel"> <em class="searchArrow hh abs">下拉選擇</em> </span>
css:
.sysSelect{width:76px; height:28px; line-height:28px; border:1px solid #CCC; font-size:14px;} .sysSelect option{height:28px; line-height:28px;} .selectType{position:relative; width:78px; height:30px; line-height:30px; font-size:14px;} .selectType .ipt{width:76px; height:28px; line-height:28px; border:1px solid #CCC; display:inline-block; text-decoration:none; color:#000; text-indent:5px; outline:none;} .selectType span{position:absolute; width:76px; background-color:#fff; border:1px solid #CCC; border-top-style:dashed; left:0px; top:22px; text-indent:6px; line-height:26px; display:none;} .selectType span a{color:#333; display:block; text-decoration:none;} .selectType span a:hover{background-color:#f60; color:#fff;} .selectType .searchArrow{border-top:6px solid #666; border-left:6px solid #FFF; border-right:6px solid #FFF; position:absolute; width:0; height:0; top:6px; right:12px; cursor:pointer; -webkit-transition:-webkit-transform 0.2s ease-in; -moz-transition:-moz-transform 0.2s ease-in; -o-transition:-o-transform 0.2s ease-in; transition:transform 0.2s ease-in; overflow:hidden; text-indent:-2000px;} .selectType .searchArrowRote{-moz-transform:rotate(180deg); -moz-transform-origin:50% 30%; -webkit-transform:rotate(180deg); -webkit-transform-origin:50% 30%; -o-transform:rotate(180deg); -o-transform-origin:50% 30%; transform:rotate(180deg);transform-origin:50% 30%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); top:-9px/9;}
js:
$("#selectTypeText").click(function () { $(this).next("span").slideDown(200); $(".searchArrow").addClass("searchArrowRote"); }); $("#selectTypeText").blur(function () { $(this).next("span").slideUp(200); $(".searchArrow").removeClass("searchArrowRote"); }); $("#selectTypeMenu>a").click(function () { $("#selectTypeText").text($(this).text()); $("#selectTypeRel").attr("value", $(this).attr("rel")); $(this).parent().slideUp(200); $(".searchArrow").removeClass("searchArrowRote"); return false; });
你是否還期待著我的長篇大論?但很遺憾的告訴你,說明已經完畢了,也就是這麼簡單了,幾行代碼一看也就明白了。
還有不明白的?那沒問題,請看DEMO,點擊此處打開。
完整demo源碼點擊此處本站下載。
更多關於jQuery相關內容感興趣的讀者可查看本站專題:《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。