欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js+css实现select的美化效果_javascript技巧

程序员文章站 2022-03-24 18:29:33
...
先给大家看一看美化之后的效果图:

js+css实现select的美化效果_javascript技巧

CSS:

.div-select
{
  border: solid 1px #999;
  height: 40px;
  line-height: 40px;
  cursor: default;
}

.div-select-text
{
  float: left;
  background-color: #fff;
  height: 100%;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

  .div-select-text > div
  {
    padding: 3px;
    line-height: 34px;
  }

.div-select-arrow
{
  background-color: #fff;
  float: right;
  width: 40px;
  height: 100%;
  color: #999;
  cursor: default;
}

  .div-select-arrow > div
  {
    border: solid 1px #999;
    margin: 2px;
    height: 34px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 34px;
    font-size: 22px;
  }

.div-select-list
{
  position: absolute;
  float: left;
  top: 100px;
  left: 100px;
  border: solid 1px #999;
  max-height: 300px;
  overflow: auto;
  background-color: #9f9;
  display: none;
  z-index: 9100;
}

  .div-select-list .div-select-item:nth-child(2n+1)
  {
    background-color: #fff;
  }

.div-select-item
{
  height: 50px;
  line-height: 50px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #f2f2f2;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

.div-select-item-hover
{
  background-color: #3399ff!important;
}

.div-select-selected
{
  background-color: #3399ff !important;
}


JS:

//select美化
var divSelectListIndex = 0;

$(function () {
  initDivSelect();
});

//初始化select美化插件
function initDivSelect() {
  $(".div-select-target").each(function () {
    divSelectListIndex++;
    var select = $(this);

    if (select.css("display") == "none") {
      return;
    }
    else {
      select.css("display", "none")
    }

    if (select.next("div").find(".div-select-list").length == 0) {
      select.after('
'); $("body").append(''); } var div = select.next("div"); var divText = div.find(".div-select-text"); var divSelect = div.find(".div-select"); var divArrow = div.find(".div-select-arrow"); var list = $(".div-select-list-" + divSelectListIndex); function updateText(item) { divText.find("div").html(item.html()); } select.find("option").each(function () { var option = $(this); var text = option.html(); var value = option.attr("value"); list.append('
' + text + '
'); list.find(".div-select-item:last").click(function () { var item = $(this); var value = item.attr("value"); select.val(value); select.change(); list.find(".div-select-selected").removeClass("div-select-selected"); item.addClass("div-select-selected"); updateText(item); list.hide(); }); list.find(".div-select-item:last").mouseenter(function () { var item = $(this); var selectedMark = list.find(".div-select-selected"); selectedMark.removeClass("div-select-selected"); selectedMark.addClass("div-select-selected-mark"); list.find(".div-select-item-hover").removeClass("div-select-item-hover"); item.addClass("div-select-item-hover"); updateText(item); }); }); list.mouseleave(function () { var selectedMark = list.find(".div-select-selected-mark"); if (list.find(".div-select-selected").length == 0) { selectedMark.addClass("div-select-selected"); updateText(selectedMark); } selectedMark.removeClass("div-select-selected-mark"); list.find(".div-select-item-hover").removeClass("div-select-item-hover"); }); if (select.attr("width")) { divSelect.width(select.attr("width") - 2); divText.width(divSelect.width() - divArrow.width()); if (select.attr("width") > list.width()) { list.width(divSelect.width()); } } div.keydown(function (e) { list.find(".div-select-selected-mark").removeClass("div-select-selected-mark"); list.find(".div-select-item-hover").addClass("div-select-selected"); list.find(".div-select-item-hover").removeClass("div-select-item-hover"); if (e.keyCode == 40) { var currentSelected = list.find(".div-select-selected"); var nextSelected = currentSelected.next(".div-select-item"); if (nextSelected.length == 0) { nextSelected = list.find(".div-select-item:first"); nextSelected.addClass("div-select-selected"); currentSelected.removeClass("div-select-selected"); list.scrollTop(0); } else { nextSelected.addClass("div-select-selected"); currentSelected.removeClass("div-select-selected"); var i = 0; while (nextSelected.position().top list.height() - nextSelected.height()) { list.scrollTop(list.scrollTop() + nextSelected.height()); if (i++ > 100) break; } } updateText(nextSelected); return false; } if (e.keyCode == 38) { var currentSelected = list.find(".div-select-selected"); var nextSelected = currentSelected.prev(".div-select-item"); if (nextSelected.length == 0) { nextSelected = list.find(".div-select-item:last"); nextSelected.addClass("div-select-selected"); currentSelected.removeClass("div-select-selected"); list.scrollTop(list.find(".div-select-item").length * nextSelected.height()); } else { nextSelected.addClass("div-select-selected"); currentSelected.removeClass("div-select-selected"); var i = 0; while (nextSelected.position().top list.height() - nextSelected.height()) { list.scrollTop(list.scrollTop() - nextSelected.height()); if (i++ > 100) break; } } updateText(nextSelected); return false; } if (e.keyCode == 13) { var selectedItem = list.find(".div-select-selected"); var value = selectedItem.attr("value"); select.val(value); list.hide(); select.change(); } }); divSelect.click(function () { $("a").bind("click", function () { $("a").unbind("click"); list.hide(); }); if (list.css("display") == "none") { list.show(); } else { list.hide(); } list.css("top", divSelect.offset().top + divSelect.height() + 1); list.css("left", divSelect.offset().left); if ($(window).scrollTop() + $(window).height() list.height() - currentSelected.height()) { list.scrollTop(currentSelected.position().top - currentSelected.height() * 2); } return false; }); $("html,body").bind("click", function () { list.hide(); }); list.click(function () { return false; }); function initSelect() { list.find(".div-select-selected").removeClass("div-select-selected"); var matchItem = list.find(".div-select-item[value='" + select.val() + "']"); if (matchItem.length > 0) { matchItem.addClass("div-select-selected"); updateText(matchItem); } } initSelect(); select.change(function () { initSelect(); }); }); // $(".div-select-target").each }

2、如何使用:

第1步、引用CSS和JS:

第2步、给select控件加上class="div-select-target" width="200",其中class="div-select-target"是必须的,width="200"是可选的。完整HTML代码如下:

二、滚动条美化版:

CSS:

.div-select
{
  border: solid 1px #999;
  height: 40px;
  line-height: 40px;
  cursor: default;
}

.div-select-text
{
  float: left;
  background-color: #fff;
  height: 100%;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
  font-size: 16px;
  font-family: 微软雅黑,雅黑;
}

  .div-select-text > div
  {
    padding: 3px;
    line-height: 34px;
  }

.div-select-arrow
{
  background-color: #fff;
  float: right;
  width: 40px;
  height: 100%;
  color: #999;
  cursor: default;
}

  .div-select-arrow > div
  {
    border: solid 1px #999;
    margin: 2px;
    height: 34px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 34px;
    font-size: 22px;
  }

.div-select-list
{
  position: absolute;
  float: left;
  top: 100px;
  left: 100px;
  border: solid 1px #999;
  max-height: 300px;
  overflow: hidden;
  background-color: #9f9;
  display: none;
  z-index: 9100;
  font-size: 16px;
  font-family: 微软雅黑,雅黑;
}

  .div-select-list .div-select-item:nth-child(2n+1)
  {
    background-color: #fff;
  }

.div-select-item
{
  height: 50px;
  line-height: 50px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #f2f2f2;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

.div-select-item-hover
{
  background-color: #3399ff!important;
}

.div-select-selected
{
  background-color: #3399ff !important;
}

.div-select-list-scrollbar
{
  position: absolute;
  float: left;
  border: solid 1px #999;
  border-left: 0;
  background-color: #e8e8ec;
  width: 40px;
  height: 300px;
  display: none;
  cursor: default;
  z-index: 9101;
}

.div-select-scrollbar-up
{
  border-bottom: solid 1px #fff;
  height: 39px;
  font-size: 22px;
  line-height: 39px;
  color: #999;
  background-color: #cdcdcd;
  text-align: center;
}

.div-select-scrollbar-pos
{
  height: 220px;
}

  .div-select-scrollbar-pos > div:last-child
  {
    width: 40px;
    height: 20px;
    background-color: #cdcdcd;
  }

.div-select-scrollbar-down
{
  border-top: solid 1px #fff;
  height: 39px;
  font-size: 22px;
  line-height: 39px;
  color: #999;
  background-color: #cdcdcd;
  text-align: center;
}

JS:

//select美化
var divSelectListIndex = 0;

$(function () {
  initDivSelect();
});

//初始化select美化插件
function initDivSelect() {
  $(".div-select-target").each(function () {
    divSelectListIndex++;
    var select = $(this);

    if (select.css("display") == "none") {
      return;
    }
    else {
      select.css("display", "none")
    }

    if (select.next("div").find(".div-select-list").length == 0) {
      select.after('
'); $("body").append(''); } var div = select.next("div"); var divText = div.find(".div-select-text"); var divSelect = div.find(".div-select"); var divArrow = div.find(".div-select-arrow"); var list = $(".div-select-list-" + divSelectListIndex); var scrollbar; var scrollbarPosTop; var scrollbarPos; var scrollbarScrollHeight; var scrollbarUp; var scrollbarDown; var itemHeight; var itemCount; var itemsHeight; var scrollFlag = false; function updateText(item) { divText.find("div").html(item.html()); } select.find("option").each(function () { var option = $(this); var text = option.html(); var value = option.attr("value"); list.append('
' + text + '
'); list.find(".div-select-item:last").click(function () { var item = $(this); var value = item.attr("value"); select.val(value); select.change(); list.find(".div-select-selected").removeClass("div-select-selected"); item.addClass("div-select-selected"); updateText(item); list.hide(); if (scrollbar) scrollbar.hide(); }); list.find(".div-select-item:last").mouseenter(function () { var item = $(this); var selectedMark = list.find(".div-select-selected"); selectedMark.removeClass("div-select-selected"); selectedMark.addClass("div-select-selected-mark"); list.find(".div-select-item-hover").removeClass("div-select-item-hover"); item.addClass("div-select-item-hover"); updateText(item); }); }); list.mouseleave(function () { var selectedMark = list.find(".div-select-selected-mark"); if (list.find(".div-select-selected").length == 0) { selectedMark.addClass("div-select-selected"); updateText(selectedMark); } selectedMark.removeClass("div-select-selected-mark"); list.find(".div-select-item-hover").removeClass("div-select-item-hover"); }); if (select.attr("width")) { divSelect.width(select.attr("width") - 2); divText.width(divSelect.width() - divArrow.width()); } else { divText.width(list.width()); } div.keydown(function (e) { list.find(".div-select-selected-mark").removeClass("div-select-selected-mark"); list.find(".div-select-item-hover").addClass("div-select-selected"); list.find(".div-select-item-hover").removeClass("div-select-item-hover"); if (e.keyCode == 40) { var currentSelected = list.find(".div-select-selected"); var nextSelected = currentSelected.next(".div-select-item"); if (nextSelected.length == 0) { nextSelected = list.find(".div-select-item:first"); nextSelected.addClass("div-select-selected"); currentSelected.removeClass("div-select-selected"); list.scrollTop(0); } else { nextSelected.addClass("div-select-selected"); currentSelected.removeClass("div-select-selected"); var i = 0; while (nextSelected.position().top list.height() - nextSelected.height()) { list.scrollTop(list.scrollTop() + nextSelected.height()); if (i++ > 100) break; } } updateText(nextSelected); updateScrollbarPos(); return false; } if (e.keyCode == 38) { var currentSelected = list.find(".div-select-selected"); var nextSelected = currentSelected.prev(".div-select-item"); if (nextSelected.length == 0) { nextSelected = list.find(".div-select-item:last"); nextSelected.addClass("div-select-selected"); currentSelected.removeClass("div-select-selected"); list.scrollTop(list.find(".div-select-item").length * nextSelected.height()); } else { nextSelected.addClass("div-select-selected"); currentSelected.removeClass("div-select-selected"); var i = 0; while (nextSelected.position().top list.height() - nextSelected.height()) { list.scrollTop(list.scrollTop() - nextSelected.height()); if (i++ > 100) break; } } updateText(nextSelected); updateScrollbarPos(); return false; } if (e.keyCode == 13) { var selectedItem = list.find(".div-select-selected"); var value = selectedItem.attr("value"); select.val(value); list.hide(); if (scrollbar) scrollbar.hide(); select.change(); } }); itemHeight = list.find(".div-select-item:first").height(); itemCount = list.find(".div-select-item").length; itemsHeight = itemHeight * itemCount; if (itemsHeight > list.height()) { $("body").append('
'); } scrollbar = $(".div-select-list-scrollbar-" + divSelectListIndex); scrollbarPosTop = scrollbar.find(".div-select-scrollbar-pos").find("div:first"); scrollbarPos = scrollbar.find(".div-select-scrollbar-pos").find("div:last"); scrollbarScrollHeight = scrollbarPos.parent().height() - scrollbarPos.height(); scrollbarUp = scrollbar.find(".div-select-scrollbar-up"); scrollbarDown = scrollbar.find(".div-select-scrollbar-down"); scrollbar.click(function () { return false; }); scrollbarUp.click(function () { list.scrollTop(list.scrollTop() - list.height()); updateScrollbarPos(); }); scrollbarDown.click(function () { list.scrollTop(list.scrollTop() + list.height()); updateScrollbarPos(); }); scrollbar.mousedown(function () { scrollFlag = true; }); scrollbar.mouseup(function () { scrollFlag = false; }); scrollbar.mousemove(function (e) { if (scrollFlag) { var pos = e.pageY - scrollbar.offset().top - 50; if (pos list.height())) { list.width(divSelect.width()); } else { list.width(divSelect.width() - scrollbar.width()); } } scrollbar.find(".div-select-scrollbar-pos").find("div:first").height(0); scrollbar.css("left", divSelect.offset().left + list.width() + 1); scrollbar.css("top", divSelect.offset().top + divSelect.height() + 1); if ($(window).scrollTop() + $(window).height() list.height() - currentSelected.height()) { list.scrollTop(currentSelected.position().top - currentSelected.height() * 2); } updateScrollbarPos(); return false; }); $("html,body").bind("click", function () { list.hide(); scrollbar.hide(); }); list.click(function () { return false; }); function initSelect() { list.find(".div-select-selected").removeClass("div-select-selected"); var matchItem = list.find(".div-select-item[value='" + select.val() + "']"); if (matchItem.length > 0) { matchItem.addClass("div-select-selected"); updateText(matchItem); } } initSelect(); select.change(function () { initSelect(); }); }); // $(".div-select-target").each }

效果图:

js+css实现select的美化效果_javascript技巧

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。