为JQuery EasyUI 表单组件扩大“大旨切换”功用

1、背景表明

    在应用
JQuery  EasyUI 各表单组件时,实际客户端页面成分是由 JQuery EasyUI
生成的,成分的关节切换,就算 Tab
键能够健康用,但顺序控制属性 tabindex
不起效用,因为页面看到的成分,是变化的,未有tabindex
属性,而真实的要素被隐形了。本文通过三个自定义函数,达成Tab
回车键的典型切换效用。

 

2、函数定义

   
通过捕获窗口按件,对回车和Tab键进行了热门切换处理。先根据当下难题,获取须求tabindex
属性,加一后为下一要点无素的属性值,根据那1性质找到下1要害成分,并设置成核心。

//增加改变焦点操作
function addChangeFocusOpe()
{
    $(window).keydown(function(event){//按键事件
        if(event.keyCode==13 || event.keyCode==9) //回车 或 tab键
        {
            var tabindex = $($(':focus').parent()[0]).prev().attr("tabindex"); //取(当前焦点--父元素--前一元素)的 tabindex 属性。该结构根据jQuery EasyUI生成的页面结构而定。
            if(tabindex != undefined)
            {
                var nextIndex = parseInt(tabindex) + 1; //下一焦点元素tabindex编号
                var nextInput = $("input[tabindex='"+nextIndex+"']"); //查找下一焦点元素
                if(nextInput.length > 0);
                {
                    var nextObj = $(nextInput[0]);
                    var options = nextObj.attr("data-options"); //设置的属性值,用于判断是否是“文本区域”
                    var focusObj = $(nextInput[0]).next('span').find('input'); //元素--下一span元素 --内部input。该结构根据jQuery EasyUI生成的页面结构而定
                    if(options.indexOf("multiline:true") != -1)
                    {//要设置焦点的元素是“文本区域”
                        focusObj = nextObj.next('span').find('textarea');
                    }
                    focusObj.focus(); //设置焦点
                }
            }
        }
        if(event.keyCode==9)
        {//对于tab键,则取消其本有功能,因为上面已完成焦点转换
             return false;
        }
    });
}

 

三、使用办法

(1)页面调用函数

$(function(){    
    $('#code').next('span').find('input').focus();  //第一个元素设置焦点   
    addChangeFocusOpe(); //页面增加焦点切换操作    
});

 

(二)表单成分设置 tabindex
属性

图片 1

 

4、约束和限量

   
由于函数实现时,tabindex 采纳+一的点子,去追寻下一成分,所在页面设置 tabindex
属性时,一定要连接,不然在断续的地点,将不起效能。