仿Select实现带图标的下拉框

效果图

仿Select实现带图标的下拉框_第1张图片

html




	
	选项带图片的"下拉框"(模拟select)
	
	
	
	

	
	
	
	


	
	

	

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(
			"
"+ /*高仿select的header部分*/ "
"+ /*通过配置headerCssClass参数给header部分设置样式*/ "

"+options.placeholder+"

"+ "
"+ /*右侧的小箭头图标*/ "
"+ /*高仿select的下拉选项部分(容器,用于存放所有下拉选项)*/ "
"+ "
" ); /*将小箭头的宽度设置为下拉框的高度*/ $('#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 );

完整Demo

https://gitee.com/lanying100/CustomSelect

参考网址

JQuery之家:http://www.htmleaf.com/jQuery/Form/201808255296.html

Github:https://github.com/jsanahuja/jquery.customSelect

你可能感兴趣的:(技术,html,css,jquery)