Jquery制作--美化下拉框
平常我们用的原生select下拉框，大部分样式没办法修改，导致在不同的浏览器里面会跟设计图的风格大相径庭。所以为了能让它美化起来，就用JQ模拟了一个下拉框，可以随意定义样式。原生的下拉框也保留在div里面隐藏着，方便后台开发人员对其进行操作。效果图如下：
HTML代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>下拉框美化</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/simSelect.js"></script>
<script>
$(function(){
//下面是调用初始化语句，class名可通用，也可以ID单独定义
$(".select-box").simSelect(); //什么参数都不带，默认样式。建议用这个，参数都写在div上面好了，比较直观。 $(".slt-box01").simSelect({ //所有参数如下：
maxNum: 4, //最大下拉个数(超过则显示滚动条)，默认为5
width: 250, //下拉框盒子宽度，默认为200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
direction: "down", //下拉方向，默认down，另一个是up
disabled: false //是否禁用，默认不禁，禁的话是true
}); $(".slt-box02").simSelect({ //举例：这里写参数，div上面也写参数的情况。结果是：会以div上面的为准
maxNum: 4,
width: 250,
direction: "down"
}); $(".slt-box03").simSelect({ //禁用下拉框的话，有三种写法，任选。建议第二种：
disabled: true, //一：这里的参数写disabled:true 二：给div加class="disabled" 三：给原生select加disabled="true"
width: 250
}); $("#slt-box04").simSelect(); //ID单独定义。单个option可以禁用
});
</script>
</head>
<body>
<!-- wrap和table非必需,用于布局而已 -->
<div class="wrap">
<table width="600">
<tbody>
<tr>
<th>不带参数：</th>
<td><div class="select-box">
<select>
<option>第一个选项</option>
<option>第二个选项</option>
<option>第三个选项</option>
<option>第四个选项</option>
<option>第五个选项</option>
<option>第六个选项</option>
</select>
</div></td>
</tr>
<tr>
<th>初始化语句写了参数：</th>
<td><div class="slt-box01">
<select>
<option>第一个选项</option>
<option>第二个选项</option>
<option>第三个选项</option>
<option>第四个选项</option>
<option>第五个选项</option>
<option>第六个选项</option>
</select>
</div></td>
</tr>
<tr>
<th>在div上面写参数：</th>
<td><div class="slt-box02 up" max-num="6" width="300">
<select>
<option>第一个选项</option>
<option>第二个选项</option>
<option>第三个选项</option>
<option>第四个选项</option>
<option>第五个选项</option>
<option>第六个选项</option>
</select>
</div></td>
</tr>
<tr>
<th>禁用的样式：</th>
<td><div class="slt-box03">
<select>
<option>第一个选项</option>
<option>第二个选项</option>
<option>第三个选项</option>
<option>第四个选项</option>
<option>第五个选项</option>
<option>第六个选项</option>
</select>
</div></td>
</tr>
<tr>
<th>其中一个选项禁用：</th>
<td><div id="slt-box04" class="up" max-num="4" width="200">
<select>
<option>第一个选项</option>
<option>第二个选项超长超长超长超长长啊</option>
<option disabled="true">第三个选项</option>
<option>第四个选项</option>
<option>第五个选项</option>
<option>第六个选项</option>
</select>
</div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS样式如下：
@charset "utf-8";
/* 简单reset */
body, ul, li {
margin:;
padding:;
}
body {
font: 14px/24px Microsoft YaHei;
color: #333;
}
ul { list-style: none; }
a {
color: #333;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing:;
text-align: left;
}
/* 布局样式，非必须 */
.wrap {
width: 600px;
margin: 100px auto 0;
padding: 20px;
background-color: #d3f3dd;
}
.wrap table th, .wrap table td { padding: 8px 2px; }
.wrap table th {
font-weight: normal;
text-align: right;
}
/* 下拉框样式 必须 */
.select-style ul {
list-style: none;
padding:;
margin:;
}
.select-style select { display: none; }
.select-style {
position: relative;
display: inline-block;
font-family: Microsoft YaHei;
color: #666;
font-size: 14px;
text-align: left;
vertical-align: middle;
z-index:;
}
.select-style.focus { z-index:; }
.select-style .slt-wrap {
display: inline-block;
width: 200px;
border: solid 1px #d6d6d6;
vertical-align: middle;
}
.select-style.focus .slt-wrap { border: solid 1px #53a8df; }
.select-style .slt-title {
position: relative;
display: block;
padding: 0 36px 0 5px;
line-height: 30px;
height: 30px;
text-decoration: none;
background-color: #fff;
word-break: break-all;
color: #666;
overflow: hidden;
}
.select-style .slt-title .slt-text {
display: inline-block;
height: 30px;
*cursor: pointer;
}
.select-style .slt-title i {
position: absolute;
right:;
top:;
display: inline-block;
width: 30px;
height: 30px;
background: url(../images/ico-select.png) 0 0 no-repeat;
*cursor: pointer;
}
.select-style.focus .slt-title i { background-position: 0 -30px; }
.select-style.disabled .slt-title i {
background-position: 0 -60px;
*cursor: default;
}
.select-style .opn-box {
display: none;
position: absolute;
left:;
top: 31px;
width: 100%;
}
.select-style.up .opn-box {
top: auto;
bottom: 31px;
}
.select-style .opn-box .opn-list {
position: relative;
_width: 100%;
max-height: 130px;
border: 1px solid #d6d6d6;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
}
.select-style.focus .opn-box .opn-list { border-color: #53a8df; }
.select-style .opn-box .opn-list li {
display: block;
_width: 100%;
padding-left: 5px;
line-height: 26px;
height: 26px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.select-style .opn-box .opn-list .selected { background: #d4edfe; }
.select-style .opn-box .opn-list li:hover {
color: #fff;
background: #65abda;
}
.select-style .opn-box .opn-list li.disabled {
color: #cacaca;
background: #f0f0f0;
cursor: default;
}
.select-style.disabled .slt-wrap { border: 1px solid #d6d6d6; }
.select-style.disabled .slt-title {
color: #cacaca;
background-color: #f0f0f0;
cursor: default;
}
.select-style.disabled .slt-title .slt-text { *cursor: default; }
/* 下拉框样式 结束 */
Jquery代码如下：
/**
* Name : 美化下拉框
* Author ：子纯
* Time ：2016-01-12
**/
(function(jQuery){
$.fn.simSelect = function (o) {
o = $.extend({ //设置默认参数
maxNum: 5, //最大显示5个
width: 200, //默认宽200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
direction: "down", //向下拉，另一个是up
disabled: false //不可用时为true
},o || {});
return this.each(function(){ //构造开始
if($(this).children(".slt-wrap")){ //去重复
$(this).children(".slt-wrap").remove();
};
var $ts = $(this),
$select = $ts.find("select").eq(0),
wid = parseFloat($ts.attr("width")),
num = parseFloat($ts.attr("max-num")),
$sltWrap = $("<div class='slt-wrap'></div>").prependTo($ts),
$sltTit = $("<a class='slt-title' hidefocus='true' href='javascript:void(0);'><span class='slt-text'></span><i></i></a>").prependTo($sltWrap),
$sltText = $(".slt-text", $sltTit),
$opnBox = $("<div class='opn-box'><ul class='opn-list'></ul></div>").appendTo($sltWrap),
$opnList = $(".opn-list", $opnBox);
$ts.addClass("select-style"); //增加一个class专门作为写css样式用
$select.find("option").each(function(i){ //循环生成li标签
var text = $(this).text(),
$li = $("<li title='"+text+"'>"+text+"</li>").appendTo($opnList);
if(this.selected){
$li.addClass("selected");
$sltText.text(text).attr("title",text);
};
if(this.disabled){
$li.addClass("disabled");
return;
};
});
var $li = $("li",$opnList),
hei = $li.height();
if(wid){ //设置宽度
$ts.css("width",wid+"px"); //兼容IE6、7
$sltWrap.css("width",wid-2+"px");
}else{
$ts.css("width",o.width+"px"); //兼容IE6、7
$sltWrap.css("width",o.width-2+"px");
};
if(num){ //设置高度
$opnList.css("max-height", hei*num+"px");
}
else{
$opnList.css("max-height", hei*o.maxNum+"px");
};
if(o.direction == "up"){ //设置上、下拉方向
$ts.addClass("up");
};
$li.on("click",function(){ //li标签的点击事件，传给原生select
var index = $opnList.find("li").index(this),
text = $(this).text();
if($(this).hasClass("disabled")){
return false;
};
$(this).addClass("selected").siblings().removeClass("selected");
$select.find("option").prop("selected",false).eq(index).prop("selected",true);
$sltText.text(text).attr("title",text);
$opnBox.hide();
$ts.removeClass("focus");
});
$sltTit.on("click",function(e){ //a标签的点击下拉事件
e.stopPropagation(); //阻止a标签的点击冒泡
if($opnBox.is(":hidden")){
$(".select-style .opn-box").hide();
$(".select-style").removeClass("focus");
$opnBox.show();
$ts.addClass("focus");
}
else{
$opnBox.hide();
$ts.removeClass("focus");
}
});
$select.on("change",function(){ //原生select的点击事件，传给ul
var index = $(this).find("option:selected").index(),
text = $li.eq(index).text();
$li.eq(index).addClass("selected").siblings().removeClass("selected");
$sltText.text(text).attr("title",text);
});
$(document).on("click",function(e){ //点击其他地方收起下拉框
if($opnBox.is(":visible")){
$opnBox.hide();
$ts.removeClass("focus");
}
});
if($select.prop("disabled") == true || o.disabled == true || $ts.hasClass("disabled")){
$sltTit.off("click"); //设置禁用状态
$select.prop("disabled",true);
$ts.addClass("disabled");
};
});
};
})(jQuery);
兼容到IE7+（IE6其实也行，只是选项多于5个下面不会出现滚动条）。jq库用1.7+的都没问题 。有好的建议可以下面提出，谢谢啦~^_^
Jquery制作--美化下拉框的更多相关文章
- jQuery自定义美化下拉框
在线演示 本地下载
- jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- jQuery操作select下拉框的text值和value值的方法
1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...
- jQuery之双下拉框
双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
- JQuery操作select下拉框
JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...
- 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...
- excel 如何制作带下拉框的动态折线图表
首先我们需要有个类似下图产品销量的基础数据表. 首先将光标放入表格中任意位置,然后插入一个不带点标记的折线图,然后将折线的颜色设置为灰色. 第一次设置成灰色后,一定善用f4快捷键进行快速的折线颜色设置 ...
- jquery Combo Select 下拉框可选可输入插件
Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...
随机推荐
- Nginx模块之http.md
ngx_http_access_module ngx_http_access_module模块允许限制对某些客户端地址的访问. 访问也可以通过密码,子请求的结果或JWT来限制. 通过地址和密码的同时访 ...
- C#通过属性名称获取(读取)属性值的方法
之前在开发一个程序,希望能够通过属性名称读取出属性值,但是由于那时候不熟悉反射,所以并没有找到合适的方法,做了不少的重复性工作啊! 然后今天我再上网找了找,被我找到了,跟大家分享一下. 其实原理并不复 ...
- Dapper学习笔记（一）
https://github.com/StackExchange/dapper-dot-net Dapper是对IDbConnection的扩展,需要使用Dapper提供的扩展只需要把SqlMappe ...
- 支持同步滚动的RichTextbox控件
using System.Windows.Forms; public class SynchronizedScrollRichTextBox : System.Windows.Forms.RichTe ...
- 【WPF】 通过FarPoint显示Excel
1.FarPoint 只支持winform,在Wpf中要引用:WindowsFormsIntegration.dll2.*.xaml文件引用 xmlns:wfi ="clr-names ...
- java 上传图片
1.导入smartupload.jar包 ,添加uploadIMG.jsp,upfileIMG.jsp. 2.需要在项目下面建立一个保存文件的文件夹pic或者upload 3.在调用的地方调用子框架u ...
- CSS你可能还不知道的一些知识点
一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...
- https简介/原理/部署【转】
转自: http://han.guokai.blog.163.com/blog/static/136718271201211631456811/ http://www.barretlee.com/bl ...
- Android基础总结（六）
创建第二个Activity(掌握) 需要在清单文件中为其配置一个activity标签 标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-filter> <ac ...
- java学习笔记之正则表达式
一般来说,正则表达式就是以某种方式来描述字符串,因此你可与说:"如果一个字符串符合有这些东西,那么它就是我正在找的东西. 1.要找一个数字,如果它可能有一个负号在最前面(可能没有,没有也是匹 ...