首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

HTML的select控件美化

Posted in Javascript onMarch 27, 2017

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：

//2015年2月8日
//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('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
      $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');
    }
    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('<div class="div-select-item" value="' + value + '">' + text + '</div>');
      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 < 0
            || 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 < 0
            || 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.offset().top + list.height() + 2) {
        list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }
      if (list.width() < divSelect.width()) {
        list.width(divSelect.width());
      }
      var currentSelected = list.find(".div-select-selected");
      if (currentSelected.position().top > 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
}

如何使用：

第1步、引用CSS和JS：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

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

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

<div style="border: solid 1px #f99; margin: 50px; padding: 50px;">
  <select name="sel" class="div-select-target" width="200" >
    <option value="1">中国</option>
    <option value="2">美国</option>
    <option value="3">法国</option>
    <option value="4">英国</option>
    <option value="5">俄罗斯</option>
    <option value="6">德国</option>
    <option value="7">韩国</option>
    <option value="8">日本</option>
    <option value="9">印度</option>
    <option value="10">巴西</option>
    <option value="11">意大利</option>
    <option value="12">这个国家的名称很长很长很长很长很长很长很长很长</option>
    <option value="13">瑞士</option>
    <option value="14">越南</option>
    <option value="15">缅甸</option>
    <option value="16">泰国</option>
    <option value="17">加拿大</option>
    <option value="18" selected="selected">南非</option>
    <option value="19">澳大利亚</option>
    <option value="20">新西兰</option>
    <option value="21">挪威</option>
    <option value="22">巴勒斯坦</option>
    <option value="23">以色列</option>
    <option value="24">新加坡</option>
    <option value="25">马来西亚</option>
    <option value="26">波兰</option>
    <option value="27">国家27</option>
    <option value="28">国家28</option>
    <option value="29">国家29</option>
    <option value="30">国家30</option>
    <option value="31">国家31</option>
    <option value="32">国家32</option>
    <option value="33">国家33</option>
    <option value="34">国家34</option>
    <option value="35">国家35</option>
    <option value="36">国家36</option>
    <option value="37">国家37</option>
    <option value="38">国家38</option>
  </select>
</div>
<div style="border: solid 1px #f99; margin: 50px; padding: 50px; margin-top: 700px; margin-bottom: 700px;">
  <select name="sel" class="div-select-target" width="200" >
    <option value="1">中国</option>
    <option value="2">美国</option>
    <option value="3">法国</option>
    <option value="4">英国</option>
    <option value="5">俄罗斯</option>
    <option value="6" selected="selected">德国</option>
    <option value="7">韩国</option>
    <option value="8">日本</option>
  </select>
</div>

效果图：

HTML的select控件美化

滚动条美化版：

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：

//2015年2月8日
//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('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
      $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');
    }
    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('<div class="div-select-item" value="' + value + '">' + text + '</div>');
      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 < 0
            || 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 < 0
            || 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('<div class="div-select-list-scrollbar div-select-list-scrollbar-' + divSelectListIndex + '"><div class="div-select-scrollbar-up">∧</div><div class="div-select-scrollbar-pos"><div></div><div></div></div><div class="div-select-scrollbar-down">∨</div></div>');
    }
    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 <= scrollbarScrollHeight) {
          scrollbarPosTop.height(pos);
          list.scrollTop(scrollbarPosTop.height() / scrollbarScrollHeight * (itemsHeight - list.height()));
        }
      }
    });
    function updateScrollbarPos() {
      scrollbarPosTop.height(scrollbarScrollHeight * list.scrollTop() * 1.0 / (itemsHeight - list.height()));
      if (list.scrollTop() + list.height() == itemsHeight) {
        scrollbarPosTop.height(scrollbarScrollHeight);
      }
    }
    divSelect.click(function () {
      $("a").bind("click", function () {
        $("a").unbind("click");
        list.hide();
        scrollbar.hide();
      });
      if (list.css("display") == "none") {
        list.show();
        scrollbar.show();
      }
      else {
        list.hide();
        scrollbar.hide();
      }
      list.css("top", divSelect.offset().top + divSelect.height() + 1);
      list.css("left", divSelect.offset().left);
      var listOffsetTop = list.offset().top;
      if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {
        list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }
      if (list.width() < divSelect.width()) {
        if (!(itemsHeight > 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() < listOffsetTop + list.height() + 2) {
        scrollbar.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }
      var currentSelected = list.find(".div-select-selected");
      if (currentSelected.position().top > 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
}

效果图：

HTML的select控件美化

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

HTML的select控件美化

- Author -

秋荷雨翔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js下写一个事件队列操作函数
Jul 19 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
vue.js实现h5机器人聊天（测试版）
Jul 16 Javascript
JS实现的点击表头排序功能示例
Mar 27 #Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 #Javascript
vue2.0实战之基础入门（1）
Mar 27 #Javascript
jQuery中的deferred使用方法
Mar 27 #jQuery
Angular2利用组件与指令实现图片轮播组件
Mar 27 #Javascript
Vue 过渡实现轮播图效果
Mar 27 #Javascript
AngularJS2中一种button切换效果的实现方法（二）
Mar 27 #Javascript
LINUX面试题(83) C#面试题(90) .NET面试题(131) Oracle面试题(81) Android面试题(6) DB面试题(126) 网络工程师面试题(96) 软件测试工程师面试题(53) C++面试题(199) 软件工程师面试题(40)
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
Python中对列表排序实例
2015/01/04 Python
python日期相关操作实例小结
2019/06/24 Python
Python类如何定义私有变量
2020/02/03 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
python爬取天气数据的实例详解
2020/11/20 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
什么是GWT的Entry Point
2013/08/16 面试题
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
毕业自荐书
2013/12/09 职场文书
如何写股份合作协议书
2014/09/11 职场文书
代理人委托书
2014/09/16 职场文书
被告答辩状范文
2015/05/22 职场文书
受欢迎的自荐信，就这么写！
2019/04/19 职场文书