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;
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:;
} .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="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="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>
效果图：
滚动条美化版：
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:;
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:;
background-color: #e8e8ec;
width: 40px;
height: 300px;
display: none;
cursor: default;
z-index:;
} .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控件美化的更多相关文章
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...
- IE6下div层被select控件遮住的问题解决方法
Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...
- .net获取select控件中的文本内容
.net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件 在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
- js+CSS实现模拟华丽的select控件下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Asp.net绑定带层次下拉框（select控件）
1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...
- Selenium webdriver 之select 控件封装，解决onchange问题
使用webdriver的时候,select 控件经常会绑定onchange 事件,在selenium2.09 之前click 方法对onchange 事件有bug,2.09 以后修复了,但是根据经验也 ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...
随机推荐
- 千万用户级别应用系统背后的SOA组件化容器
背景 在<我们的应用系统是如何支撑千万级别用户的>随笔中已经从“宏观”角度去介绍了整个应用系统的布局.组件化是整个系统由头到尾都始终坚持的一个设计原则,其中“SOA组件化容器”也是我们应用 ...
- dojo的发展历史
dojo的开始要从2004年初开始说起,那时dojo之父 Alex Russell 在Informatica公司内从事一个名为netWindows的项目,这个项目的目的是在浏览器环境下提供创建窗口化界 ...
- 第三次作业：PSP耗时
PSP个人项目耗时对比记录表:四则运算 Personal Software Process Stages Time(%) Planning 7 Estimate 9 开发 76 •需求分析 ...
- Repeater绑定数组并显示其值
web开发中,尤其是对于数据展示,不得不说Repeater是一个万能的控件,而且使用也很方便. 在ASP.NET中将数组绑定到Repeater中请问如何在Repeater前台页面中显示该数组的值? s ...
- Bootstrap~Panel和Table
回到目录 在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每 ...
- [Redis]Redis 概述及基本使用规范.
1 nosql的简介 1.1 nosql简介 随着互联网Web2.0网站的兴起,传统的关系数据库在应付Web2.0网站,特别是超大规模和高并发的SNS类型的Web2.0纯动态网站已经显得力不从心,暴露 ...
- paip.2013年技术趋势以及热点 v2.0 cae
paip.2013年技术趋势以及热点 v2.0 cae HTML5 多核编程 物联网 可穿戴计算设备 3. 物联网 无论是M2M(机器对机器)通信应用,还是NFC(进距离通信)技术,都是物联网的组成部 ...
- python入门学习课程推荐
最近在学习自动化,学习过程中,越来越发现coding能力的重要性,不会coding,基本不能开展自动化测试(自动化工具只是辅助). 故:痛定思痛,先花2个星期将python基础知识学习后,再进入自动化 ...
- redis + 主从 + 持久化 + 分片 + 集群 + spring集成
Redis是一个基于内存的数据库,其不仅读写速度快,每秒可以执行大约110000的写操作,81000的读取操作,而且其支持存储字符串,哈希结构,链表,集合丰富的数据类型.所以得到很多开发者的青睐.加之 ...
- SSM环境搭建（接口编程方式）
一直用ssm在开发项目,之前都是直接copy别人的项目,今天趁着项目刚刚交付,自己搭建一下ssm环境,做个记录 一.创建项目.引入jar包,因为版本不一样,就不贴出这部分的内容了.个人平时的习惯是,先 ...