仿Select实现带图标的下拉框

最新推荐文章于 2022-03-17 15:03:30 发布

lanying100

最新推荐文章于 2022-03-17 15:03:30 发布

阅读量2.1k

点赞数

分类专栏：技术文章标签： html css jquery

本文链接：https://blog.csdn.net/lanying100/article/details/107940319

版权

技术专栏收录该内容

32 篇文章 2 订阅

订阅专栏

效果图

带图标的高仿select宽度可调

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>

css

.jqcs_container{
	width:100%;
	display:inline-block;
}
.jqcs_select{
	position:relative;
	border:1px #b1b1b1 solid;
	cursor:pointer;
	overflow:hidden; /*解决因浮动元素导致的坍塌问题*/
	color:#555;
}
.jqcs_select:hover{
	background-color:#f9f9f9;
}
.jqcs_select .jqcs_value{
	float:left;
	padding:5px 5px; /*上下、左右*/
}
.jqcs_select .jqcs_value p.jqcs_placeholder{
	margin:0;
	padding:4px 0px;
}
.jqcs_select .jqcs_arrow{
	position:absolute;
	right:0;
	height:100%;
	border-left:1px #b1b1b1 solid;
	background-image: url(../images/arrow_down.png); /*高仿select右侧的箭头小图标*/
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center center; /*水平、垂直居中显示*/
}
.jqcs_select .jqcs_arrow.rotated{ /*箭头的转向：向上*/
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	border-left:0 !important; 
	border-right:1px #b1b1b1 solid !important;
}
.jqcs_options{
	display:none; /*一开始是隐藏的*/
	border:1px #b1b1b1 solid; 
	border-top:0;
}
.jqcs_option{
	cursor:pointer; /*鼠标悬停在选项上时，变成小手*/
}
.jqcs_option:hover{
	background-color:#f9f9f9;
}

js

;(function( $ ){
	$.customSelect = function(options){
		/*如果没有指定下拉框的标识符，则随机生成*/
		if(typeof options.identifier === "undefined" || options.identifier == ""){
			options.identifier = Math.floor((Math.random() * 100000000));
		}
	
		/*在input标签后生成用于模拟select的div*/
		$(options.basePoint).after(
			"<div class='jqcs_container "+options.containerCssClass+"'>"+
				/*高仿select的header部分*/
				"<div id='jqcs_s_"+options.identifier+
					"' class='jqcs_select "+options.headerCssClass+"'>"+ /*通过配置headerCssClass参数给header部分设置样式*/
					"<div class='jqcs_value'><p class='jqcs_placeholder'>"+options.placeholder+"</p></div>"+
					"<div class='jqcs_arrow'></div>"+ /*右侧的小箭头图标*/
				"</div>"+
				/*高仿select的下拉选项部分（容器，用于存放所有下拉选项）*/
				"<div id='jqcs_o_"+options.identifier+"' class='jqcs_options "+options.optionsCssClass+"'></div>"+
			"</div>"

		);

		
		/*将小箭头的宽度设置为下拉框的高度*/
		$('#jqcs_s_'+options.identifier+' .jqcs_arrow').width($('#jqcs_s_'+options.identifier).height());
		
		/*处理用户配置的数据源*/
		for(var i = 0; i < options.dataSource.length; i++){
			var currenthtml = $('#jqcs_o_'+options.identifier).html();
			var template = options.template; /*每一个下拉选项*/
			
			/*将数据源中的数据填到下拉选项的占位符中*/
			for(var j = 0; j < options.dataSource[i].length; j++){
				var regex = new RegExp("\\$"+j, "g");
				template = template.replace(regex, options.dataSource[i][j]);
			}

			// 追加template							
			$('#jqcs_o_'+options.identifier).html(currenthtml + template);
		}

		
		/*点击下拉框时，显示or隐藏，小箭头的变化*/
		$('#jqcs_s_'+options.identifier).click(function(e){
			e.stopPropagation(); // 阻止事件冒泡
			if($('#jqcs_o_'+options.identifier).css('display') == "block"){
				$('#jqcs_o_'+options.identifier).slideUp();
				$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).removeClass('rotated');
			}else{
				$('#jqcs_o_'+options.identifier).slideDown();
				$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).addClass('rotated');
			}
		});
		
		/*点击选项后，把选项的内容显示在select框中*/
		$('#jqcs_o_'+options.identifier+' .jqcs_option').click(function(e){
			/*input#basePoint*/
			$('input'+options.basePoint)[0].value = $(this).data('select-value');
			$($('#jqcs_s_'+options.identifier+' .jqcs_value')[0]).html(this.outerHTML);
		});
		
		/*点击背景，收缩下拉框*/
		$(window).click(function(e){
			$('#jqcs_o_'+options.identifier).slideUp();
			$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).removeClass('rotated');
		});
	}
})( jQuery );