jQuery美化select下拉選單程式碼例項

antzone發表於2017-04-10
jQuery

預設的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()一章節。

相關文章