jQuery美化select下拉選單程式碼例項
預設的select下拉選單確實醜到不行,對顏值要求不高的網站還能勉強滿足要求。
但是如果要求稍高的話,確實難以勝任,所以就需要對它進行一下徹底的修改,在select本身控制元件基礎上做美化潛力已經不是太大了,所以最好還是模擬實現select下拉選單功能,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body { font-size: 12px; } .select { width: 150px; height: 24px; line-height: 24px; position: relative; text-align: center; cursor: pointer; background: url(demo/jQuery/img/selectbg.jpg) right 0px no-repeat; color: #fff; } .option { line-height: 24px; width: 150px; position: absolute; top: 24px; left: 0px; display: none; background: #820014; } ul { list-style: none; margin: 0; padding: 0; } ul li { height: 24px; background: #666; text-align: center; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { var selects = $("#select"); var options = $("#option"); var state = true; selects.click(function () { if (state) { if (!(options.is(":animated"))) { options.slideDown(); } else { options.css("display", "none"); } state = false; } else { if (!(options.is(":animated"))) { options.slideUp(); } else { options.stop(true, true); options.css("display", ""); } state = true; } }); selects.hover(function () { $(this).css("background", "url(img/selectbg2.jpg) right 0px no-repeat"); },function () { $(this).css("background", "url(img/selectbg.jpg) right 0px no-repeat"); }); $("li").hover(function () { $(this).css("background", "#990000").css("color", "#ff9900"); },function () { $(this).css("background", "#820014").css("color", "#fff"); }); $("li").click(function () { $(this).css("background", "#c00").css("color", "#ffffff"); options.css("display", "none"); selects.children("span").text($(this).attr("tip")); $(".valt").val($(this).attr("tip")); }); }) </script> </head> <body> <input type="text" class="valt" value=""> <div class="select" id="select"> <span>請選擇分類</span> <div class="option" id="option"> <ul> <li tip="螞蟻部落一">螞蟻部落一</li> <li tip="螞蟻部落二">螞蟻部落二</li> <li tip="螞蟻部落三">螞蟻部落三</li> <li tip="螞蟻部落四">螞蟻部落四</li> <li tip="softwhy.com">softwhy.com</li> <li tip="螞蟻部落五">螞蟻部落五</li> <li tip="螞蟻部落六">螞蟻部落六</li> <li tip="螞蟻部落七">螞蟻部落七</li> <li tip="螞蟻部落八">螞蟻部落八</li> <li tip="螞蟻部落九">螞蟻部落九</li> </ul> </div> </div> </body> </html>
上面的程式碼使用ul li模擬實現了select下拉選單功能,當然不能說我們們這裡的這個下拉選單有多美觀,因為只是介紹一下實現原理而已,它的美化潛力那是相當大的,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function () {}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).var selects = $("#select"),獲取id屬性值為select的元素存入變數,這樣要比每次都要獲取效率要高。
(3).var options = $("#option"),和上面是同樣的道理。
(4).var state = true,宣告一個變數並賦值為true,用作一個狀態標識,下面會有用到。
(5).selects.click(function () {}),註冊click事件處理函式。
(6).if (state) { if (!(options.is(":animated"))) {
options.slideDown();
}
else {
options.css("display", "none");
}
state = false;
},state識別符號用來說明,下拉選單是否可以下拉,如果為true,那麼就標識可以下拉。
上面程式碼的總體功能是,點選後,如果下拉選單沒有處於下拉動畫中,那麼就進行下拉展開動畫。
如果連續點選導致上一次下拉動作進行中,那麼就直接隱藏下拉選單,防止出現連續多次點選導致下拉動作重複進行的現象。最後將state賦值為false,說明下拉選單已經下拉完畢。
(7).else {
if (!(options.is(":animated"))) {
options.slideUp();
}
else {
options.stop(true, true);
options.css("display", "");
}
state = true;
}
和上面同樣的道理,只是這個動作是收縮下拉選單。
(8).selects.hover(function () {
$(this).css("background", "url(img/selectbg2.jpg) right 0px no-repeat");
},function () {
$(this).css("background", "url(img/selectbg.jpg) right 0px no-repeat");
}),實現了滑鼠懸浮背景圖片的切換效果。
(9).$("li").hover(function () { $(this).css("background", "#990000").css("color", "#ff9900");
},function () {
$(this).css("background", "#820014").css("color", "#fff");
}),實現了滑鼠懸浮li元素北京顏色和字型的切換效果。
(10).$("li").click(function () {
$(this).css("background", "#c00").css("color", "#ffffff");
options.css("display", "none");
selects.children("span").text($(this).attr("tip"));
$(".valt").val($(this).attr("tip"));
}),實現選中當前li元素,並且將li元素的相關值寫入文字框。
二.相關閱讀:
(1).:animated選擇器可以參閱jQuery :animated一章節。
(2).slideDown()方法可以參閱jQuery slideDown()一章節。
(3).css()方法可以參閱jQuery css()一章節。
(4).is()方法可以參閱jQuery is()一章節。
(5).slideUp()方法可以參閱jQuery slideUp()一章節。
(6).hover()可以參閱jQuery hover事件一章節。
(7).children()方法可以參閱jQuery children()一章節。
(8).attr()方法可以參閱jQuery attr()一章節。
(9).val()方法可以參閱jQuery val()一章節。
相關文章
- jQuery 美化select下拉選單jQuery
- jQuery和css3超讚select下拉選單框美化外掛jQueryCSSS3
- jQuery Validate對select下拉選單驗證jQuery
- select下拉選單跳轉效果程式碼
- jQuery tab選項卡效果程式碼例項jQuery
- 純原生javascript下拉框表單美化例項教程JavaScript
- HTML select 下拉選單HTML
- HTML select下拉選單HTML
- 設定select下拉選單的預設選中項
- table表格美化程式碼例項
- jQuery點選滑出層效果程式碼例項jQuery
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- 圓角select下拉選單
- 美化滾動條效果程式碼例項
- jQuery點選文字框清除內容程式碼例項jQuery
- 模擬select下拉選單詳解
- JavaScript動態操作select下拉選單JavaScript
- jQuery.map()方法程式碼例項jQuery
- 選擇select下拉選單網頁跳轉網頁
- jq+css+html打造下拉導航選單例項CSSHTML單例
- Js/JQuery下拉框新增新選項JSjQuery
- html 仿百度百科導航下拉選單功能例項程式碼介紹HTML
- 【jquery】select下拉框賦值jQuery賦值
- jQuery利用name匹配元素程式碼例項jQuery
- jQuery與CSS二級下拉選單jQueryCSS
- jQuery table表格隔行換色程式碼例項jQuery
- JQuery select選中值jQuery
- jQuery tab選項卡程式碼詳解jQuery
- jQuery 動態載入下拉框選項(Django)jQueryDjango
- 迴圈方式為select下拉選單新增年份
- 純css tab選項卡程式碼例項CSS
- CSS3立體導航選單程式碼例項CSSS3
- jQuery遍歷array陣列元素程式碼例項jQuery陣列
- jQuery 淡入淡出效果下拉導航選單jQuery
- jquery實現四級級聯下拉選單jQuery
- jQuery 例項jQuery
- HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單,取消隱藏HTMLCSSjQuery
- select下拉選項,點選時,change事件事觸發多次,請求多次。事件
- select 下拉框選中事件事件