当前位置:首页 > 开发 > Web前端 > Jquery > 正文

Jquery easyui的combobox的默认“请选择”“全部”扩展

发表于: 2012-03-31   作者:bozch   来源:转载   浏览次数:
摘要: 扩展版本1.2.2: 1、首先在<input type="text" class="combo-text">上面添加一段用来显示默认文字的代码。 <span class="combo-defaultText"></span> 位置在 var _5c8=$("<input type

扩展版本1.2.2:

1、首先在<input type="text" class="combo-text">上面添加一段用来显示默认文字的代码。

<span class="combo-defaultText"></span>

位置在
var _5c8=$("<input type=\"text\" class=\"combo-text\">").appendTo(span);之前加上
$("<span class=\"combo-defaultText\"></span>").appendTo(span);

2、样式:
.combo-defaultText{
float:left;
position:absolute;
padding:3px 0 0 3px;
color:#4e4e4;
}

3、添加默认属性defaultText:

$.fn.combo.defaults=$.extend({},$.fn.validatebox.defaults,{width:"auto",defaultText:'请选择',panelWidth:null,panelHeight:200,。。。。。。。。。。

4、初始化时将相应的文本添加到输入框中

位置,在_5c1.find("input.combo-text").width(_5c0);之上添加

if(_5c1.val().length>0){//判断初始的时候是否有值,如果没值则将默认的值直接放到<span class="combo-defaultText"></span>中
_5c1.find(".combo-defaultText").text(opts.defaultText?opts.defaultText:'');
}

5、在鼠标单击图标的时候,执行如下代码(对应放置,只有if是新添加的):

$(document).bind("mousedown.combo",function(e){
if(_5d1.val().length <=0 ){//4
_5cf.find(".combo-defaultText").text('');}
$("div.combo-panel").panel("close");
});

6、 鼠标焦点输入,及移除时时,置空(3、6为新添加的行)

_5d1.bind("mousedown.combo",function(e){
_5cf.find(".combo-defaultText").text('');//3
e.stopPropagation();
}).bind('focusout.combo',function(e){//6
if(_5d1.val().length <=0 ){
_5cf.find(".combo-defaultText").text(opts.defaultText?opts.defaultText:'');
}})

7、键盘事件(可不写),对应位置新添加即可(5为添加的语句)

if(opts.editable){
setTimeout(function(){
var q=_5d1.val();
if(q.length <=0 ){//5
_5cf.find(".combo-defaultText").text('');
}
if($.data(_5ce,"combo").previousValue!=q){
$.data(_5ce,"combo").previousValue=q;
_5d3(_5ce);
opts.keyHandler.query.call(_5ce,_5d1.val());
_5db(_5ce,true);
}
},10);
}

8、当下拉框打开的时候,置空。在opts.onShowPanel.call(_5d4);之前添加
_5d5.find(".combo-defaultText").text('');//2
opts.onShowPanel.call(_5d4);

9、当给具体的组件赋值的时候,执行:

_5f3.find(".combo-defaultText").text('');放置于_5f4.val(_5f1[i]);之后

 

注:当前的扩展是针对combo的,而不是combobox。

/*http://www.jeestudio.com 版权所有,转载请说明出处*/

Jquery easyui的combobox的默认“请选择”“全部”扩展

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<input class="easyui-combobox" id="cc" name="mallId" url="${ctx}/record/mallin!getMall.act
$('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return
jQuery ui 是一个UI的雏形, 一些UI都基于jQuery ui 开发,例如easy ui。 最近项目用jquery ui 做前
相信大家都知道jQuery EasyUI 的ComboBox有个很方便很人性化的小功能,就是可以根据输入的值对combo
有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭 显然太麻烦,这时可以在选项卡的
设置Combobox默认选中项 $("#selectDock").combobox({ valueField: 'value', textField: 'label', p
效果图: 图标 [javascript] view plain <a style="" href="http://blog.csd
效果图: 图标 (function($){ //初始化清除按钮 function initClear(target){ var jq = $(target);
扩展jquery easyui datagrid编辑单元格 1.随便聊聊   这段时间由于工作上的业务需求,对jquery eas
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号