读书人

仿照extjs风格写的jquery combobox

发布时间: 2012-09-21 15:47:26 作者: rapoo

模仿extjs风格写的jquery combobox

(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);

读书人网 >JavaScript

热点推荐