模仿extjs风格写的jquery combobox

最新推荐文章于 2025-07-19 02:19:28 发布

iteye_13008

最新推荐文章于 2025-07-19 02:19:28 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB开发文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_13008/article/details/82131538

WEB开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于jQuery的组合框插件实现方法，该插件可以为网页表单增加下拉选择功能，并支持静态数据及动态加载数据两种方式。通过自定义配置项，如动态加载、数据源URL等，可以灵活应用于不同场景。

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


(function($) {
	jQuery.fn.combobox = function(options){
		var defaults = {
			dynamic:false,
			dataurl:'',
			imgsrc:"./images/s.gif",
			width: 162,
			data : [{text:"text",value:"value"},{text:"测试",value:"test"}]

		};
		var o = jQuery.extend(defaults, options);
		var pstyle ="PADDING-RIGHT: 2px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px";

		return this.each(function() {
				var p_id = $(this).attr("id");
				$(this).addClass("x-form-element");
				$(this).attr("style",pstyle);
				var p_list = $("<div></div>");
				$(this).append(p_list);
				p_list.addClass("x-form-field-wrap");
				p_list.css("width",o.width);
				var combo = $("<input type='text'></input");
				combo.addClass("x-form-text").addClass("x-form-field");
				p_list.append(combo);
				var comboimg = $("<img src='"+o.imgsrc+"'></img>");
		    comboimg.addClass("x-form-trigger");
		    p_list.append(comboimg);	   	    
		    var position = combo.offset();
				var inputheight = combo.outerHeight()-1;
				var divwidth = p_list.outerWidth()-1;
		    var data=[];


		    comboimg.click(function(){
		    	 $(".x-combo-list").each(function(){
				 			 $(this).hide();				 			   		
				 		});
		    	 var combocontent =  $("<DIV></DIV>").appendTo("body");
				 	 combocontent.addClass("x-layer").addClass("x-combo-list").css(
				 	 	{
				 	 		position:"absolute"

				 	 	}
				 	 );
				 	  var innerDiv = $("<DIV class=x-combo-list-inner></DIV");
				 	 combocontent.append(innerDiv);
				 	 if(o.dynamic){

				 	 		var response = $.ajax(
				 	 		{
				 	 		 url:o.dataurl,
				 	 		 async:false
				 	 		}
				 	 		);

				 	 		data = jQuery.parseJSON(response.responseText);
				 	 			if(!$.isArray(data)){				 	 					
				 	 					data = $.parseJSON(data);

				 	 			}
				 	 			$.each(data, function(i,n){
						 			var member = n;
						 			innerDiv.append("<DIV class='x-combo-list-item'>"+member.text+"</DIV>");
						 		});



				 	 }else{
				 	  $.each(o.data, function(i,n){
				 			var member = n;
				 			innerDiv.append("<DIV class='x-combo-list-item'>"+member.text+"</DIV>");
				 		});
				 	 }


				 	  combocontent.css({
				 	 	"top":  position.top + inputheight,
				 	 	"left": position.left,
				 	 	"width" : divwidth 
				 	 	}).show();

				 	 	combocontent.bgiframe();

				 		$(document).bind("mousedown",function(evt){
				 			   var el = evt.target ? evt.target : evt.srcElement;
				 			   while(el != undefined && el.nodeType != 1){
										el = el.parentNode;
									}

									if(el == "undefined" || el == null || el == undefined){
										return;
									}

									var elclass = el.className;
									if(elclass.indexOf('combo')!=-1 || elclass.indexOf('trigger') != -1){
										return;
									}

				 			   $(".x-combo-list").each(function(){
				 			   		$(this).hide();

				 			   });
				 		});

				 	 	innerDiv.children().each(function(){
				 	 		$(this).click(function(){				 	 			
				 	 			 combo.val($(this).text());				 	 			 
				 	 			 combocontent.hide();		

				 	 		});

				 	 		$(this).mouseover(function(){
				 	 				$(this).addClass("x-combo-selected");
				 	 		});
				 	 		$(this).mouseout(function(){
				 	 				$(this).removeClass("x-combo-selected");
				 	 		});

				 	 	});

				 	 	$(this).getValue = function(){
				 	 			$.each(data,function(i,n){
				 	 	   		if(combo.val() == n.text){
				 	 	   			return combo.val(n.value);
				 	 	   		}
				 	 	   });

				 	 	}
				 	 $(this).setValue = function(val){
				 	 	   $.each(data,function(i,n){
				 	 	   		if(val == n.value){
				 	 	   			combo.val(n.text);
				 	 	   		}
				 	 	   });

				 	 }

		    });

		});		
	};
})(jQuery);