`

jquery扩展select控件支持enter或focus选择

    博客分类:
  • js
阅读更多
/******************************************************************************************************************************

* @ author jdkleo
* @ date 2013/2/27
 
	JQuery SelKeys

USAGE:
   jQuery.selkeys.enter(jQuery("#selcon"));
   jQuery.selkeys.focus(jQuery("#selcon2"));
    
******************************************************************************************************************************/
(function (jQuery){
    this.version = '(beta)(0.0.1)';
	this.all = {};
	/**---------enter---------**/
    this.enter = function(sel){  
		var flag = 1;
		var open = function(){ 
		  if(flag==1){
				sel.get(0).size = sel.get(0).options.length;
				flag=0;
		   }else{
				sel.get(0).size = 1;
				flag=1;
		   }
		};  
		sel.keydown(function(e){  
				e = e ? e :(window.event ? window.event : null); 
				var code = e.keyCode || e.which || e.charCode;
				if(code == 13)
				{
					open();
					return false;
				}
			});
		sel.blur(function(){
					sel.get(0).size=1;
					flag=1;
				 });		  
	} 
	/**---------focus---------**/
	this.focus = function(sel){  
		var flag = 1;
		var open = function(){ 
		  if(flag==1){
				sel.get(0).size = sel.get(0).options.length;
				flag=0;
		   }else{
				sel.get(0).size = 1;
				flag=1;
		   }
		};  
		sel.focus(function(){  
				open();
				return false;
			});
		sel.blur(function(){
				sel.get(0).size=1;
				flag=1;
			});
		sel.keydown(function(e){  
				e = e ? e :(window.event ? window.event : null); 
				var code = e.keyCode || e.which || e.charCode;
				if(code == 13)
				{
					sel.get(0).size=1;
					flag=1;
					return false;
				}
			});
			  
	}
	/**---------all---------**/
    jQuery.selkeys = this;
    return jQuery;    
})(jQuery);

 

分享到:
评论

相关推荐

    jquery通过扩展select控件实现支持enter或focus选择的方法

    主要介绍了jquery通过扩展select控件实现支持enter或focus选择的方法,通过jQuery针对select空间增加enter及focus选择功能分析了jQuery扩展的相关实现技巧,需要的朋友可以参考下

    jquery 多功能select控件,多功能选择控件

    1. **多选支持**:Chosen允许用户选择多个选项,通过复选框或拖放操作来增加或移除选项,提高了用户操作的便捷性。 2. **搜索功能**:内置的搜索框让用户能够在长长的选项列表中快速找到所需项,提升了查找效率,...

    jquery 自定义select控件

    为了解决这个问题,开发者常常会使用jQuery等JavaScript库来创建自定义的Select控件,以实现更加美观和交互丰富的选择器。本文将深入探讨如何使用jQuery实现自定义Select控件,并分析其核心原理。 一、为何需要...

    jquery jquery控件 时间控件 时分秒控件

    例如,Timepicker Addon是一个流行的jQuery UI扩展,它添加了对时间选择的支持,允许用户选择小时、分钟和秒。 在描述中提到的"在cal.js最后"可能是指一个特定的脚本文件,该文件包含了实现时间控件的代码。开发者...

    jquery 时间选择控件

    "jQuery时间选择控件"是jQuery生态中的一个重要组件,主要用于用户界面中方便用户输入或选择日期和时间。这类控件通常提供友好的交互方式,提升用户体验,尤其在需要用户输入特定日期或时间的场合。 描述中提到的这...

    select选择框控件jquery-editable-select支持编辑输入

    在网页开发中,选择框(Select)控件是常见的用户交互元素,用于让用户从预设的选项中进行选择。然而,传统的HTML `<select>` 标签功能相对单一,不支持直接编辑或输入自定义值。为了解决这个问题,开发者通常会借助...

    Jquery双向select控件Bootstrap Dual Listbox

    - 动态获取数据:该控件支持动态加载数据,这意味着你可以根据需要从服务器获取选项,提高用户体验。 - 多功能筛选:内置搜索框允许用户快速找到并选择特定选项,提升操作效率。 - 可自定义:提供多种配置选项,...

    很炫,很简洁,很好用的 jquery选择地区控件 (源码)

    在实际应用中,这款jQuery选择地区控件支持多级地区选择,涵盖了全国范围内的省份、城市、区县,甚至可以扩展至街道级别。其数据结构合理,便于维护和更新。同时,控件还支持自定义数据源,开发者可以根据需求导入...

    jquery select2组件

    总结来说,`jQuery Select2`组件以其强大的功能、良好的用户体验和高度的可定制性,成为了网页开发中不可或缺的工具。通过熟练掌握其使用方法和配置选项,开发者可以轻松地提升下拉菜单的交互性和美观度。

    携程网 时间控件 jquery控件 时间控件 php

    在IT行业中,时间控件是一种常见的用户界面元素,它允许用户选择或输入日期和时间,以提高用户体验并方便数据输入。在本项目中,我们关注的是一个与携程网相关的jQuery时间控件,它用于PHP环境。jQuery是一个轻量级...

    jquery日期控件(有下拉菜单选择年份)

    在Web开发中,日期选择控件是不可或缺的一部分,它提供了用户友好的界面,让用户能够方便地输入或选择日期。在JavaScript库中,jQuery以其易用性和丰富的插件库而备受青睐。本篇文章将详细介绍一个特别针对年份选择...

    jquery 日期时间控件

    而"jQuery 日期时间控件"则是基于jQuery构建的,用于帮助开发者在网页上添加用户友好的日期和时间选择功能。这类控件通常提供交互式的日历视图和时间选择器,使得用户可以方便地输入或选择日期和时间,避免手动输入...

    jquery实现select带模糊搜索下拉选择框

    然而,原生的 `select` 元素并不支持模糊搜索功能,所以我们需要借助 `jQuery` 和 CSS 来增强其功能。 1. **引入资源**: 在项目中,你需要引入 `jQuery` 库以及自定义的 CSS 和 JavaScript 文件。假设我们有以下...

    jquery漂亮日期控件 jquery美化

    这类控件通常会提供自定义样式,易于使用的接口,以及多种显示和交互模式,提升用户在输入或选择日期时的体验。 标题中的“jquery美化”是指利用jQuery的灵活性和强大的功能来增强日期控件的外观和交互性。这可能...

    jquery-ui控件

    2. **时间选择器(Timepicker)**:虽然 jQuery UI 自带的 Datepicker 不包含时间选择功能,但社区中存在许多扩展插件,如 Timepicker Addon,它可以与 Datepicker 结合,提供时间选择功能。这些插件通常支持多种...

    jquery时间控件时分秒

    而"jquery时间控件时分秒"是jQuery的一个扩展插件,用于创建用户友好的时间选择器,帮助用户方便地输入或选择时间,通常用于表单中的时间输入字段。这种控件在许多场合都非常实用,比如预订系统、日程安排或时间跟踪...

    jquery.inputer 完美替换select控件 带模糊搜索

    1.jquery.inputer为替代select控件开发! 2.本控件经过测试,兼容IE,火狐! 3.本控件可以自由扩展! 4.本控件为原创,代码有些凌乱,但功能齐全! ---本控件代码为本人编写,完全处于分享拿出来的,有什么地方写的...

    简洁漂亮的jquery日期选择控件代码

    本文将深入探讨如何使用jQuery实现一个简洁、漂亮的日期选择控件,并通过提供的压缩包文件来演示具体代码实现。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画创建等任务。在构建日期选择器时...

    jquery.selectbox.js select下拉菜单美化代码

    jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码

Global site tag (gtag.js) - Google Analytics