2011-12-14 65 views
3

我有一個窗體使用jqTransform來替換標準的選擇框和單選按鈕。這一切工作正常和丹迪,除了一件事情讓我很懊惱:jqTransform選擇 - 滾動到字母輸入

由於它將選擇框替換爲鏈接列表,當您鍵入一個字母滾動它不會做任何事情。例如,你點擊打開select,然後輸入S.它應該滾動到列表中的第一個S,但沒有任何反應。有沒有辦法重新設置這個功能?以下是選擇框的jqTransform代碼。我沒有看到一個處理程序這種類型的事情:

/*************************** 
    Select 
***************************/ 
$.fn.jqTransSelect = function(){ 
    return this.each(function(index){ 
     var $select = $(this); 

     if($select.hasClass('jqTransformHidden')) {return;} 
     if($select.attr('multiple')) {return;} 

     var oLabel = jqTransformGetLabel($select); 
     /* First thing we do is Wrap it */ 
     var $wrapper = $select 
      .addClass('jqTransformHidden') 
      .wrap('<div class="jqTransformSelectWrapper"></div>') 
      .parent() 
      .css({zIndex: 10-index}) 
     ; 

     /* Now add the html for the select */ 
     $wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>'); 
     var $ul = $('ul', $wrapper).css('width',$select.width()).hide(); 
     /* Now we add the options */ 
     $('option', this).each(function(i){ 
      var oLi = $('<li><a href="#" index="'+ i +'">'+ $(this).html() +'</a></li>'); 
      $ul.append(oLi); 
     }); 

     /* Add click handler to the a */ 
     $ul.find('a').click(function(){ 
       $('a.selected', $wrapper).removeClass('selected'); 
       $(this).addClass('selected'); 
       /* Fire the onchange event */ 
       if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); } 
       $select[0].selectedIndex = $(this).attr('index'); 
       $('span:eq(0)', $wrapper).html($(this).html()); 
       $ul.hide(); 
       return false; 
     }); 
     /* Set the default */ 
     $('a:eq('+ this.selectedIndex +')', $ul).click(); 
     $('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');}); 
     oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');}); 
     this.oLabel = oLabel; 

     /* Apply the click handler to the Open */ 
     var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper) 
      .click(function(){ 
       //Check if box is already open to still allow toggle, but close all other selects 
       if($ul.css('display') == 'none') {jqTransformHideSelect();} 
       if($select.attr('disabled')){return false;} 

       $ul.slideToggle('fast', function(){     
        var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top); 
        $ul.animate({scrollTop: offSet}); 
       }); 
       return false; 
      }) 
     ; 

     // Set the new width 
     var iSelectWidth = $select.outerWidth(); 
     var oSpan = $('span:first',$wrapper); 
     var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width(); 
     $wrapper.css('width',newWidth); 
     $ul.css('width',newWidth-2); 
     oSpan.css({width:iSelectWidth}); 

        $ul.css({height:'420px','overflow':'hidden'}); 

     // Calculate the height if necessary, less elements that the default height 
     //show the ul to calculate the block, if ul is not displayed li height value is 0 
     $ul.css({display:'block',visibility:'hidden'}); 
     var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff 
     (iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff 
     $ul.css({display:'none',visibility:'visible'}); 

    }); 
}; 

下面是我們試圖做來實現這個:

var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper) 
    .keypress(function (e) { 
     $.each(myArray, function (i, l) { 
      var sc = l.substr(0, 1).toLowerCase(); 
      var kc = String.fromCharCode(e.which); 
      if (sc == kc) { 
       $select[0].selectedIndex = i; 
       $('span:eq(0)', $wrapper).html(l); 
       $ul.hide(); 
       return false; 
      } 
}); 
}); 
+0

與HTML的樣品沿jqTransform初始化是得心應手。猜測,我會說你的事件處理程序正在丟失;在這種情況下,將祖先元素委派爲偵聽器將解決此問題。但是,如果沒有示例或查看jqTransform,我不知道這是否屬於jqTransform中自己的代碼或功能。 – 2011-12-14 17:11:16

+0

我添加了原始問題的選擇框的jqTransform代碼。我的HTML是如此簡單,標準的。jqTransform實際上取代了選擇框 – user1098316 2011-12-14 17:19:01

+0

我猜我只需要添加一個按鍵事件到select將搜索列表並改變了索引,但我是jQuery的絕對新手,不知道該怎麼做:) – user1098316 2011-12-14 17:31:30

回答

0

哦宕。我錯過了沒有代碼的大局。現在我看到發生了什麼...是的,沒有「恢復」功能,因爲新的鏈接列表實際上不再是選擇框。如果jqTransform在默認情況下不包含可滾動選項,我認爲你必須實現一個。

如果你看他們的演示頁面,他們的「普通」選擇框按預期工作(雖然很難注意,因爲所有選項都以「O」開始,它將跳轉到第一個「選項」),並且他們的樣式選擇盒子沒有。

沒有深入研究代碼,我懷疑這意味着按鍵捕獲不在插件中實現。

恐怕這不是你可能希望的「答案」。幸運的是,之前做過這種事情的人會聽到你的請求。 ;-)

爲jqTransform
0

在返回this.each結束(函數添加以下代碼( index){...});那就是$ .fn.jqTransSelect函數的內部。

另外你必須安裝scrollTo jquery插件。

CODE:

var newChar; 
$(document).bind("keydown", function (e) { 
    var char = String.fromCharCode(e.which); 
    var code = e.keyCode || e.which; 
    var charFound; 

if($ul.css('display') != 'none'){ 
    if (newChar != char){ 
     newChar = char; 

      $ul.find('a').each(function(){ 
       // Find first occurence of li that starts with letter typed 
       if ($(this).text().substr(0,1).toUpperCase() == char && $(this).text() != "Choose"){ 
        charFound = true; 

        $('a.selected', $wrapper).removeClass('selected'); 
        $(this).addClass('selected'); 
        $select[0].selectedIndex = $(this).attr('index'); 
        $($select[0]).trigger('change'); 
        $that = $(this); 

        return false; 
       } 
      }); 

      if (charFound == true){ 
       // Scroll to selected value 
       $ul.scrollTo($('a.selected', $ul), 400); 
      } 
     } 

     //If Enter has been pressed, select the value 
     if(code == 13) { 
      $('span:eq(0)', $wrapper).html($that.html()); 
      $ul.hide(); 
      return false; 
     } 
    } 
});