3

jqTransform を使用して標準の選択ボックスとラジオ ボタンを置き換えるフォームがあります。私を悩ませる1つのことを除いて、それはすべてうまく機能します。

選択ボックスをリンクのリストに置き換えるため、文字を入力してスクロールしても何も起こりません。たとえば、クリックして選択を開き、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;
            }
});
});
4

3 に答える 3

0

jqTransformのソリューションselectkeypressworklinkhttp://www.techapparatus.com/jqtransform-select-problem-with-keyboard-type-solutionにアクセスしてください

于 2012-03-30T10:57:59.373 に答える
0

ああダン。コードがなければ全体像が見えませんでした。これで何が起こっているかわかりました...そうです、リンクの新しいリストは実際には選択ボックスではないため、機能を「元に戻す」ことはありません。jqTransform にデフォルトでスクロール可能なオプションが含まれていない場合は、実装する必要があると思います。

彼らのデモ ページを見ると、「プレーンな」選択ボックスは期待どおりに機能します (ただし、すべてのオプションが「O」で始まるためわかりにくいですが、最初の「オプション」にジャンプします)。

コードを詳しく調べなくても、キープレス キャプチャがプラグイン自体に実装されていないことを意味していると思われます。

残念ながら、これはおそらくあなたが望んでいた「答え」ではありません。運が良ければ、この種のことを以前に行ったことのある人があなたの嘆願を聞くでしょう. ;-)

于 2011-12-14T22:01:50.460 に答える
0

return this.each(function(index){ ... }); の最後に次のコードを追加します。$.fn.jqTransSelect 関数の中にあります。

また、Scrollto JQueryプラグインをインストールする必要があります。

コード：

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;
        }
    }
});
于 2014-03-13T18:06:36.467 に答える