亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法

 更新時間：2017年04月13日 08:32:55   投稿：jingxian  
下面小編就為大家?guī)硪黄獮镴Query EasyUI 表單組件增加焦點(diǎn)切換功能的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1、背景說明

    在使用 JQuery  EasyUI 各表單組件時，實(shí)際客戶端頁面元素是由 JQuery EasyUI 生成的，元素的焦點(diǎn)切換，雖然 Tab 鍵可以正常用，但順序控制屬性 tabindex 不起作用，因?yàn)轫撁婵吹降脑兀巧傻?，沒有tabindex 屬性，而真實(shí)的元素被隱藏了。本文通過一個自定義函數(shù)，實(shí)現(xiàn)Tab 和 回車鍵的焦點(diǎn)切換功能。

2、函數(shù)定義

 通過捕獲窗口按件，對回車和Tab鍵進(jìn)行了熱點(diǎn)切換處理。先根據(jù)當(dāng)前焦點(diǎn)，獲取需要tabindex 屬性，加1后為下一焦點(diǎn)無素的屬性值，根據(jù)這一屬性找到下一焦點(diǎn)元素，并設(shè)置成焦點(diǎn)。

//增加改變焦點(diǎn)操作
function addChangeFocusOpe()
{
 $(window).keydown(function(event){//按鍵事件
  if(event.keyCode==13 || event.keyCode==9) //回車 或 tab鍵
  {
   var tabindex = $($(':focus').parent()[0]).prev().attr("tabindex"); //?。ó?dāng)前焦點(diǎn)--父元素--前一元素）的 tabindex 屬性。該結(jié)構(gòu)根據(jù)jQuery EasyUI生成的頁面結(jié)構(gòu)而定。
   if(tabindex != undefined)
   {
    var nextIndex = parseInt(tabindex) + 1; //下一焦點(diǎn)元素tabindex編號
    var nextInput = $("input[tabindex='"+nextIndex+"']"); //查找下一焦點(diǎn)元素
    if(nextInput.length > 0);
    {
     var nextObj = $(nextInput[0]);
     var options = nextObj.attr("data-options"); //設(shè)置的屬性值，用于判斷是否是“文本區(qū)域”
     var focusObj = $(nextInput[0]).next('span').find('input'); //元素--下一span元素 --內(nèi)部input。該結(jié)構(gòu)根據(jù)jQuery EasyUI生成的頁面結(jié)構(gòu)而定
     if(options.indexOf("multiline:true") != -1)
     {//要設(shè)置焦點(diǎn)的元素是“文本區(qū)域”
      focusObj = nextObj.next('span').find('textarea');
     }
     focusObj.focus(); //設(shè)置焦點(diǎn)
    }
   }
  }
  if(event.keyCode==9)
  {//對于tab鍵，則取消其本有功能，因?yàn)樯厦嬉淹瓿山裹c(diǎn)轉(zhuǎn)換
    return false;
  }
 });
}

3、使用方式

（1）頁面調(diào)用函數(shù)

$(function(){ 
 $('#code').next('span').find('input').focus(); //第一個元素設(shè)置焦點(diǎn) 
 addChangeFocusOpe(); //頁面增加焦點(diǎn)切換操作 
});

（2）表單元素設(shè)置 tabindex 屬性

4、約束和限制

由于函數(shù)實(shí)現(xiàn)時，tabindex 采用 +1的方式，去查找下一元素，所在頁面設(shè)置 tabindex 屬性時，一定要連續(xù)，否則在斷續(xù)的地方，將不起作用。

以上這篇為JQuery EasyUI 表單組件增加"焦點(diǎn)切換"功能的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論