<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超酷select选择下拉框美化jQuery插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/pintsize.min.css">
<link rel="stylesheet" type="text/css" href="css/nice-select.css">
<style type="text/css">
.container{
max-width: 1080px;
margin: 0 auto;
box-sizing: border-box;
}
.demo--content-block {
background-color: #f2f2f2;
color: #666;
padding: 0.8em ;
margin: .5em 0;
height: 150px;
min-height: 150px;
}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>超酷select选择下拉框美化jQuery插件 <span>A lightweight jQuery plugin that replaces native select elements with customizable dropdowns</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="container">
<div class="flex">
<div class="col col--12 col__md--12 col__lg--6">
<div class="demo--content-block demo--class-display">
<h3>转换前的下拉框</h3>
<div class="box">
<select class="ignore">
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
</div>
</div>
<div class="col col--12 col__md--12 col__lg--6">
<div class="demo--content-block demo--class-display">
<h3>转换后的下拉框</h3>
<div class="box">
<select>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
</div>
</div>
<!-- demo2-->
<div class="col col--12 col__md--12 col__lg--6">
<div class="demo--content-block demo--class-display">
<h3>显示文本</h3>
<div class="box">
<select>
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
</div>
</div>
<div class="col col--12 col__md--12 col__lg--6">
<div class="demo--content-block demo--class-display">
<h3>Wide</h3>
<div class="box">
<select class="wide">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
</div>
</div>
<div class="col col--12 col__md--12 col__lg--6">
<div class="demo--content-block demo--class-display">
<h3>Right</h3>
<div class="box">
<select class="right">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
</div>
</div>
<div class="col col--12 col__md--12 col__lg--6">
<div class="demo--content-block demo--class-display">
<h3>Small</h3>
<div class="box">
<select class="small">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/fastclick.js"></script>
<script>
$(document).ready(function() {
$('select:not(.ignore)').niceSelect();
FastClick.attach(document.body);
});
</script>
</body>
</html>
jQuery超酷select选择下拉框美化特效源码.zip
版权申诉
109 浏览量
2022-11-06
23:53:55
上传
评论
收藏 79KB ZIP 举报
jQuery超酷select选择下拉框美化特效源码.zip （19个子文件） 
132686945547180696 jquery_nice_select css 
nice-select.css 4KB htmleaf-demo.css 5KB pintsize.min.css 7KB normalize.css 2KB related 
2.jpg 13KB 1.jpg 16KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 5KB js jquery.nice-select.js 6KB jquery.nice-select.min.js 3KB fastclick.js 25KB jquery-1.11.0.min.js 94KB scss _nice-select-prefixed.scss 5KB style.scss 3KB nice-select.scss 4KB _prism.scss 1KB资源评论
