Jquery制作--美化下拉框
来源：互联网 发布：中国贸易数据库 编辑：程序博客网 时间：2024/05/16 06:35
<!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>
0 0
- Jquery制作--美化下拉框
- jQuery 制作美化版的 select 下拉选框
- jQuery美化select下拉框
- jquery美化select下拉框
- jQuery select下拉框美化
- 用jquery实现下拉框的美化
- jquery select下拉框美化插件
- jQuery下拉框美化插件DropKick
- html 物资 jQuery下拉框select美化
- 带搜索框的jQuery下拉框美化插件searchableSelect
- select下拉框美化
- Action_美化下拉框
- 用jQuery制作模拟下拉框
- 用jQuery制作模拟下拉框
- 使用jQuery制作级联下拉列表框
- jquery制作美化星星评分插件
- javascript美化下拉框js
- javascript美化下拉框js
- Android 动态关闭Manifest中的Receiver的方法
- PHP PSR-4 Autoloader 自动加载
- 7.3 GROUP BY的“新”功能
- Java 集合类详解
- linux下安装mysql的详细教程
- Jquery制作--美化下拉框
- 面向对象基础加强
- python 将字符串转化成16进制进行UDP的发送
- Android应用性能优化之使用SparseArray替代HashMap
- jQuery - 编写jQuery插件的基本形式（上）
- 纯css打造下拉菜单
- Android常见问题及开发经验总结（三）
- 国内开源产品记录
- linux 用户空间与内核空间——高端内存详解
