HTML的select控件美化
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; } .div-select-text > div { padding: 3px; } .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; top: 100px; left: 100px; border: solid 1px #999; max-height: 300px; overflow: auto; background-color: #9f9; display: none; } .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: #d2d9f7!important; } .div-select-selected { background-color: #3399ff !important; }
JS:
//2015年2月8日 //select美化 $(function () { $("select[class=‘div-select‘]").each(function () { var select = $(this); 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 class="div-select-list"></div></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.find(".div-select-list"); 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").click(function () { var item = $(this); var value = item.attr("value"); select.val(value); div.find(".div-select-selected").removeClass("div-select-selected"); item.addClass("div-select-selected"); updateText(item); list.hide(); }); }); 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()); } } else { divSelect.width(list.width() + divArrow.width()); divText.width(divSelect.width() - divArrow.width()); list.width(divSelect.width()); } div.keydown(function (e) { if (e.keyCode == 40) { var currentSelected = div.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 = div.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) { list.hide(); } }); divSelect.click(function () { if (list.css("display") == "none") { list.show(); } else { list.hide(); } if (divSelect.offset().top + divSelect.height() + 2 + list.height() + 2 > $(window).scrollTop() + $(window).height()) { list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2); } else { list.css("top", divSelect.offset().top + divSelect.height() + 1); } if (list.offset().top < 0) { list.css("top", 0); } var currentSelected = div.find(".div-select-selected"); if (currentSelected.position().top > list.height() - currentSelected.height()) { list.scrollTop(currentSelected.position().top - currentSelected.height() * 2); } return false; }); list.css("top", divSelect.offset().top + divSelect.height() + 1); list.css("left", divSelect.offset().left); $("html,body").click(function (a) { list.hide(); }); list.click(function () { return false; }); function initSelect() { 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").each }); // end $.ready
如何使用:
第1步、引用CSS和JS:
<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" 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" width="200",其中class="div-select"是必须的,width="200"是可选的。完整HTML代码如下:
<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" 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" width="200" style="display: none;"> <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" width="200" style="display: none;"> <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>
效果图:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。