<!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>
<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>