jQuery美化select下拉菜单代码实例

快乐打工仔 分类:实例代码

默认的select下拉菜单确实丑到不行,对颜值要求不高的网站还能勉强满足要求。

但是如果要求稍高的话,确实难以胜任,所以就需要对它进行一下彻底的修改,在select本身控件基础上做美化潜力已经不是太大了,所以最好还是模拟实现select下拉菜单功能,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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="pipipi.net">pipipi.net</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()一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容