(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);
分享到:
相关推荐
extjs 自动补全,模拟下拉列表combobox
extjs使用说明 extjs的API jQuery使用说明 jQuery的API 很好用 很实用 不用上网就能知道jquery怎么用
extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显
extjs的combobox功能很强大,通过它可以模糊查询,只要添加几个属性即可,网上找的代码有的不符合我的要求。 所以自己改了一些代码。
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 items<array> 选项卡元素集合 选项卡组件渲染后就会显示的选项卡元素集合,具体参数...
详解MyEclipse10 安装Spket 1.6.23(支持Extjs4.1.1及jQuery1.8)
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
该DIV弹层简单漂亮,模仿EXTJS,能实现层上弹层。
jQuery EasyUI 仿 Extjs 界面布局,左边手风琴折叠菜单。点击菜单在右边content区域可增加tab标签,可作为项目的main页
extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释
Extjs4---combobox省市区三级联动+struts2
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
最新 HTML&JS&ExtJS&jQuery 智能提示 Eclipse插件 可直接解压安装
ExtJS-3.4.0文档目录说明: ◊ adapter目录下是EXT的核心代码和底层库,包括jQuery、Prototype和YUI的适配器。 ◊ docs目录下是EXT的文档。 ◊ examples目录下是官方的演示示例。 ◊ pkgs目录下是EXT压缩后...
Ajax(Jquery与ExtJs) 框架对比 web前端开发
代码看起来简洁又漂亮是如何做到的,这篇文章主要为大家详细介绍了Extjs如何让combobox写起来更简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下