<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery自定义下拉框 - 网页模板</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/jquery.customSelect.css" />
</head>
<body>
<div id="container">
<h2 style="margin-bottom: 0">Examples</h2>
<div class="example-container">
<h2>A custom-range select</h2>
<select id="rangeSelect">
<option value="1p">1+ bedrooms</option>
<option value="2p">2+ bedrooms</option>
<option value="3p">3+ bedrooms</option>
</select> </div>
<div class="example-container">
<h2>A standard select</h2>
<select id="singleSelect">
<option value="cola">A glass of cola</option>
<option selected value="lemonade">A class of lemonade</option>
<option value="tea">A cup of tea</option>
</select> </div>
<div class="example-container">
<h2>A multi select</h2>
<select id="multipleSelect" multiple>
<option value="cake">A tasty cake</option>
<option value="burger">A fatty burger</option>
<option value="cola">A large cola</option>
</select> </div>
<pre id="debug_log">Loading...</pre>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.customSelect.js"></script>
<script>
$(document).ready(function () {
$('#debug_log').html('Debug log...<br>');
function debug(what) {
$('#debug_log').append(what + "<br>");
}
$('#singleSelect, #multipleSelect').customSelect({
focus: function () {
debug('Got focus');
},
blur: function () {
debug('Lost focus');
},
change: function () {
debug('Widget value changed');
}
});
$('#rangeSelect').customSelect({
customRange: true,
windowFormatter: function (value) {
if (value.indexOf('bedrooms') === -1) {
value += ' bedrooms';
}
return value.replace(/bedrooms/, '<strong>bedrooms</strong>');
}
});
$('select').change(function () {
debug('Native select value changed to: ' + $(this).val());
});
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery自定义下拉框 jQuery自定义下拉框网页特效.zip
版权申诉
155 浏览量
2022-11-24
12:30:47
上传
评论
收藏 91KB ZIP 举报
jQuery自定义下拉框 jQuery自定义下拉框网页特效.zip （6个子文件） 
jQuery自定义下拉框 jQuery自定义下拉框网页特效 jiaoben1124 css 
jquery.customSelect.css 2KB style.css 956B
index.html 2KB js jquery.min.js 93KB jquery-ui.min.js 197KB jquery.customSelect.js 11KB资源评论
