用jquery实现下拉框的美化

最新推荐文章于 2024-11-30 14:00:06 发布

zdaxue

最新推荐文章于 2024-11-30 14:00:06 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文档文章标签： jquery function div border email input

本文链接：https://blog.youkuaiyun.com/cyoubunketu/article/details/3894802

技术文档专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个基于jQuery的下拉选择框插件oopiuSelect，该插件可以将HTML标准的select元素转换为更加美观和交互丰富的自定义组件。插件通过创建文本框和图标来替代默认的选择框样式，并实现点击展开选项列表的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子地址：http://download.youkuaiyun.com/detail/cyoubunketu/4131093 Email:cyoubunketu@126.com

/**
 * jQuery ooppiu select Plugin 1.0.1
 *
 * Copyright (c) 2009 - 2012 oopiu
 * Email: cyoubunketu@126.com
 */
 
$.extend({

	oopiuSelectClickFlg:false,
	
	oopiuInit: function($selects) {
		if (!$selects){
			$selects = $('select');
		}
		
		$selects.each(function(i) {
			$this = $(this);
			if (!this.id){
				$this.attr("id","oopiu_auto_create_select_id"+i);
			}
			id = this.id;
			oopiu_val_w = $this.width();
			oopiu_val_p = $this.offset();
			$this.hide();
			oopiu_val_t = $this.oopiuCreateText(oopiu_val_w,id);
			oopiu_val_img = $this.oopiuCreateTre(oopiu_val_w,oopiu_val_p,id);
			$this.after(oopiu_val_t);
			$("body").append(oopiu_val_img);
			
			oopiu_val_dp = $(oopiu_val_t).offset();
			oopiu_val_divLeft = oopiu_val_dp.left;
			oopiu_val_divTop = oopiu_val_dp.top + $(oopiu_val_t).height();
			oopiu_val_param = {left:oopiu_val_divLeft,top:oopiu_val_divTop,width:oopiu_val_w,selId:this.id};
			var oopiu_val_divNode = $this.oopiuCreateDiv(oopiu_val_param);
			
			$("body").append(oopiu_val_divNode);
			
		});
		$(document).click(function(){
			if ($.oopiuSelectClickFlg == false){
				$(".oopiu_select_div:visible").hide();
			}
		});
	}
});

$.fn.extend({
	
	oopiuSelectClick:function(id){
		
		$(this).click(function(){
			if ("none" == $("#" + id + "_div").css("display")){
				$(".oopiu_select_div:visible").hide();
				$.oopiuSelectClickFlg = true;
				window.setTimeout(function(){$.oopiuSelectClickFlg = false;},300)
				$("#"+id + "_div").slideDown("fast",$(this).oopiuFindRow(id));
			}else{
				$.oopiuSelectClickFlg = false;
				$("#"+id + "_div").hide();
			}
		});
	},

	
	oopiuCreateText:function(w,id){
		var oopiu_val_t = document.createElement("input");
		$(oopiu_val_t).attr("id",id+"_text");
		$(oopiu_val_t).attr("selId",id);
		$(oopiu_val_t).attr("type","text");
		$(oopiu_val_t).attr("value",$("#"+id+" option:selected").text());
		$(oopiu_val_t).attr("readonly","true");
		$(oopiu_val_t).css("width",w+15);
		$(oopiu_val_t).css("marginTop",0); 
		$(oopiu_val_t).css("border","1px solid lightslategray");
		$(oopiu_val_t).css("-webkit-border-radius","5px");
		$(oopiu_val_t).css("-moz-border-radius","5px");
		$(oopiu_val_t).css("cursor","pointer");
		$(oopiu_val_t).css("padding-right","15px");

		$(oopiu_val_t).hover(
			function(){
				$(this).css("border","1px solid lightsteelblue");
			},
			function(){
				$(this).css("border","1px solid lightslategray");
			}
		);
		$(oopiu_val_t).oopiuSelectClick(id);
		return oopiu_val_t;
	},
	
	oopiuCreateTre:function(width,pos,id){
		var oopiu_val_i = document.createElement("div");
		$(oopiu_val_i).html('<em style="width:5px;"></em><em style="margin:0 1px;width:3px;"></em><em style="margin:0 2px;width:1px;"></em>');
		$(oopiu_val_i).css({"position":"absolute","left":pos.left+width+6,"top":pos.top+8,"width":"5px","height":"5px","display":"block","overflow":"hidden"});
		$(oopiu_val_i).css("cursor","pointer");
		$(oopiu_val_i).find("em").each(function(){
			$(this).css({"height":"1px","overflow":"hidden","display":"block","background-color":"#666666"});
		});
		$(oopiu_val_i).oopiuSelectClick(id);
		return oopiu_val_i;
	},
	
	oopiuCreateDiv:function(param){
		var left = param.left;
		var top = param.top;
		var width = param.width;
		var selId = param.selId;
		
		var d = document.createElement('div');
		$(d).css("position","absolute");
		$(d).css("width",width + 13);
		$(d).css("border","1px solid gray");
		$(d).css("border-top-style","none");
		$(d).css("font-size","12px");
		$(d).css("backgroundColor","#FFF");
		$(d).addClass("oopiu_select_div");
		$(d).css("left",left);
		$(d).css("top",top + 4);
		if ($("#"+selId+" option").length > 11){
			$(d).css("overflow","auto");
			$(d).css("height",20 * 11);
		}
		$("#"+selId+" option").each(function(i){
				value = this.value;
				text = this.text;
				a = $(this).oopiuCreateOptions({value:value,text:text,id:selId,width:width,row:i});
				$(d).append(a);					
		});

		$(d).hide();
		$(d).attr("id",selId+"_div");
		return d;
	},
	
	oopiuCreateOptions:function(pam){
		var id = pam.id;
					
		var tbl = $("<table></table>");
		var trNode = $("<tr></tr>");
		var td = $("<td></td>");
		
		$(tbl).css("width","100%");
		$(tbl).css("cursor","hand");
		$(tbl).css("table-layout","fixed");
		$(tbl).css("font-size","12px");
		
		$(tbl).attr("cellSpacing","0");
		$(tbl).hover(function(){$(td).css("background","gainsboro")},function(){$(td).css("background","")});
		
		$(td).attr("value",pam.value);
		$(td).attr("innerHTML",pam.text);
		$(td).css("padding","2");
		$(td).css("height","20");
		$(td).css("overflow","hidden");
		if (pam.text.length * 12 > pam.width){
			$(td).attr("title",pam.text);
		}					
		$(td).css("white-space","nowrap");
		$(td).click(function(){
			$("#"+id+"_div").hide();
			$("#"+id)[0].selectedIndex = pam.row;
			$("#"+id+"_text").attr("value",pam.text);
			$("#"+id).change();
		});
		
		td.appendTo(trNode);
		trNode.appendTo(tbl);

		return tbl;
	},
	
	oopiuFindRow:function(id){
		var showText = $("#"+id+"_text").val();
		$("#"+id+"_div > table").each(function(){
			txt = $(this).find("td").text();
			$(this).css("background","");
			if (showText == txt){
				$(this).css("background","whitesmoke");
			}
		});
	}
});