master

分支 (1)

管理

管理

master

CustomSelect
/
SelectWithIcon.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项带图片的"下拉框"（模拟select）</title>
	<!--1.引入customSelect自带的样式表-->
	<link rel="stylesheet" href="css/customSelect.jquery.css">
	<!--2.写自己定制的样式：选择器优先级相同时，后写的样式覆盖自带的customSelect.jquery.css中的样式-->
	<style>
		/*container: 包裹下拉框的div的样式*/
		.my-container-css{
			/*width:300px;*/
		}
		/*header: 下拉框头部的样式*/
		.my-header-css{
			font-family: Arial,'楷体';
			font-weight: bold;
			border-radius:5px;
		}
		/*options: 包裹所有下拉选项的div的样式*/
		.my-options-css{

		}
		/*option: 每一个下拉选项的样式*/
		.my-option-css{
			height:40px;
			line-height:40px; /*行高和高度相同时，文字有垂直居中效果*/
			background-repeat:no-repeat;
			background-size:35px 35px; /*背景图片的大小*/
			background-position:5px center; /*背景图片显示的位置：左侧留出5px，垂直居中*/
			padding-left:50px; /*文字左侧留出50px的位置，避免文字挡住背景图片*/
		}
	</style>

	<!--3.引入JQuery-->
	<script src="js/jquery-1.11.0.min.js"></script>
	<!--4.引入customSelect的js-->
	<script src="js/customSelect.jquery.js"></script>
</head>
<body>
	<!--Step 1: 使用<input>元素作为生成下拉框的基点，也用于保存选中的项-->
	<input type="hidden" id="basePoint" value="">

	<script type="text/javascript">
		/*Step 2: 配置数据源：二维数组*/
		var dataSource = [
				/* $0:背景图片url、	$1:显示文字text、	$2:值value*/
			    ['images/chrome.png', 	'谷歌',		'chrome'],
			    ['images/firefox.png', 	'火狐',		'firefox'],
			    ['images/ie.png', 		'IE',		'ie'],
			    ['images/360.png', 		'360',		'360'],
			    ['images/欧朋.png',		'欧朋',		'opera'],
			    ['images/QQ浏览器.png',	'QQ浏览器',	'qq'],
			    ['images/猎豹.png', 		'猎豹',		'猎豹'],
			    ['images/搜狗.png', 		'搜狗',		'搜狗'],
			    ['images/世界之窗.png', '世界之窗',	'世界之窗']
			];

	 	/*Step 3: 下拉选项模板：可以在这里设置每一个下拉选项的样式。$理解为占位符*/
		var myTemplate = "<div class='jqcs_option my-option-css' data-select-value='$2' style='background-image: url($0);'>$1</div>";

		/*Step 4: 将基点、数据源和下拉选项模板配置到高仿select中*/
		$.customSelect({
		  	identifier: 'browserSelector', /*给高仿的select起个id，避免冲突*/
		  	basePoint: '#basePoint', /*基点：在它的后面生成高仿的select*/
		  	placeholder: '请选择你喜欢的浏览器', /*提示信息*/
		  	dataSource: dataSource, /*数据源*/
		  	template: myTemplate, /*下拉选项模板*/
			containerCssClass: 'my-container-css',
		  	headerCssClass: 'my-header-css', /*指定类选择器，给高仿select的header部分设置样式*/
		  	optionsCssClass: 'my-options-css'/*选项容器的样式（里面存放的是所有的下拉选项）*/
		});
	</script>
</body>
</html>