`
bozch
  • 浏览: 460311 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

扩展版本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 级联java demo(真正可用)

    以下将详细介绍如何使用jQuery EasyUI的Combobox实现级联功能,并结合Java后端处理JSON数据。 首先,理解jQuery EasyUI Combobox的基本用法。Combobox组件在HTML中表现为一个输入框和一个下拉列表,通过JavaScript...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果,这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用,比如在本例中的“老师分类”和“老师细类”。...

    jquery easyui combobox模糊过滤(示例代码)

    修改jquery easyui combobox模糊过滤 代码如下:filter:function(q,row){ var opts=$(this).combobox(“options”); //return row[opts.textField].indexOf(q)==0;// return row[opts.textField].indexOf(q)&gt;-1;//将...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    `easyui-combobox` 则是一个下拉选择框组件,允许用户从预定义的选项列表中选择一项。这两个组件在网页表单中非常常见,可以用于收集用户的输入数据。 `onchange` 事件是 JavaScript 中的一个重要事件,它会在元素...

    jquery easyui datagrid demo

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它封装了一系列的 jQuery 插件,为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...

    jquery easyui combobox mysql 数据库的省市县三级联动的例子

    3. **前端实现**:在jQuery EasyUI中,ComboBox可以通过`onSelect`事件监听用户的选择。当选择发生变化时,触发AJAX请求,获取新的数据,并更新下一级ComboBox的选项。这个过程需要使用JSON格式传输数据,因为它是...

    在easyui-combobox多选模式下加入选择所有选项

    总之,通过结合EasyUI的Combobox组件和自定义的JavaScript代码,我们可以轻松实现多选模式下的“选择全部”功能,为用户提供更便捷的操作体验。在开发过程中,理解并熟练运用此类组件和技巧,对于提升Web应用的用户...

    jquery easyui 帮助文档

    jQuery EasyUI 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...

    初试JqueryEasyUI(附Demo)

    2. **UI 组件**: jQuery EasyUI 提供了诸如对话框(dialog)、表格(datagrid)、下拉框(combobox)、树形控件(tree)、菜单(menu)等常见的 UI 组件,这些组件都封装了复杂的交互逻辑和样式,使得开发者无需关心...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作,使得...

    jQuery EasyUI的api

    - **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展,提供了如`datagrid`(数据网格)、`panel`(面板)、`dialog`(对话框)等丰富的UI组件。 2. **组件的使用**: - **初始化组件**: 使用`$(selector)....

    Jquery EasyUI 日历Demo

    在这个"Jquery EasyUI 日历Demo"中,我们将探讨如何利用 EasyUI 的日历组件来实现一个简单的日期选择功能。 首先,我们需要在 HTML 页面中引入 jQuery 和 JQuery EasyUI 的库文件。这些库文件通常可以从官方 CDN...

    jQuery EasyUI 1.5.1 离线中文API文档 含完整开发工具包+皮肤+扩展+演示+各版权API chm 最新 最全 纯净

    4. **扩展**:除了基本的组件外,jQuery EasyUI还提供了许多扩展插件,如日期选择器、时间选择器、树形表格等,这些扩展增强了框架的功能,使开发者能够创建更复杂的用户交互体验。 5. **演示**:包含的演示示例...

    jQuery EasyUI 1.9.4 chm文档

    针对jQuery EasyUI的1.9.0的在线帮助文档进行整理,生成chm文件,便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。

    jQuery EasyUI v1.3.5官方API中文版

    jQuery EasyUI 是一款非常棒的WEB前端UI框架,很多朋友都在找jQuery EasyUI API 中文文档,本次给大家提供的就是jQuery EasyUI v1.3.5官方API中文版,有需要的拿去用吧

    jquery-easyui-1.7.0.zip官方文档

    《jQuery EasyUI 1.7.0:打造高效前端界面的利器》 jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它为开发者提供了一系列组件,使得构建交互式、响应式的Web应用程序变得更加简单。在1.7.0版本中,这个强大的...

    jquery easyui pagination 分页插件扩展

    jQuery EasyUI中的分页组件默认提供了基本的分页功能,包括页码导航、每页显示条数的选择等。然而,有时我们可能需要更高级或定制化的功能,这就需要对分页插件进行扩展。 扩展通常有两种主要方式: 1. **代码扩展...

    jQuery EasyUI 为Combo,Combobox添加清除值功能的实例

    jQuery EasyUI提供了一套丰富的UI组件库,其中Combo和Combobox组件主要用于数据的输入和选择。在本实例中,通过自定义的方法,为这些组件增加了一个“清除”按钮,让用户能够快速清除已选择的值。 知识点一:jQuery...

    jQuery easyui 全套文件

    EasyUI 是基于 jQuery 的一组 UI 组件,它为开发者提供了诸如表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、对话框(dialog)等常见的网页元素。这些组件不仅具有丰富的样式,还内置了大量的功能,如...

Global site tag (gtag.js) - Google Analytics