2

問題

ユーザーがマウスオーバーしたときにポップアップが表示されるエフェクトを実行しようとしています。次に、そのポップアップにフォーカスが設定されます。ユーザーがポップアップのフォーカスアウトを行うと、ポップアップは消えます。

例

以下に実際の例を示しますが、ユーザー名とパスワードの両方のフィールドで「testuser」としてログインする必要があります。ログインしたら、ログインボックスにカーソルを合わせると、すでにログインしていることを示すポップアップが表示されます。

http://www.steelfrog.com

ログアウトボタンが含まれているため、ユーザーがフォーカスを外すとポップアップがフェードアウトするようにします。

現在...

私がこれまでに持っているもの：

$('.disabled').hover (
    function () { $('#bubble_logged').fadeIn(300); },
    function() { $('#bubble_logged').focus(); }
    );

$('#bubble_logged').focusout ( function () { $('#bubble_logged').fadeOut(300); } );

どうやら、これは有効ではないか、または私が適切に把握していないものがあります。私はjQueryに非常に慣れていないので、啓発は素晴らしいでしょう!

[編集] これを行うためのより良い方法があれば、ところで私はすべて耳にします!

4

3 に答える 3

4

focus()ネイティブの JavaScriptメソッドを使用する必要があります。jQuery オブジェクトは DOM 要素のみを参照しないため、これを直接 jQuery オブジェクトで使用することはできません。

セレクター$('#bubble_logged')は、「bubble_logged」という ID を持つすべてのアイテムを含む jQuery オブジェクトを返します。1 つしかないはずですが、jQuery は気にしません。したがって、このコレクションの最初の (そして唯一の) 項目を見つける必要があります。$('#bubble_logged').get(0)またはを使用してそれを行うことができます$('#bubble_logged')[0]。これを行うと、探していた DOM 要素への参照が得られます。

.focus()そのため、その要素にフォーカスを移動するためにa を追加します。$('#bubble_logged').get(0).focus();これは #bubble_logged 要素にフォーカスしようとすることに注意してください。それがdivの場合、あまり効果がありません。そのコンテナ内の要素にフォーカスしようとしている場合は、代わりにフォーカスを呼び出す必要があります。

.hover()jQuery メソッドの場合、2 つの無名関数を指定しています。1 つ目は hoverIn イベント ハンドラーで、2 つ目は hoverOut イベント ハンドラーです。ポップアップをフェードインさせてから、フォーカスを設定したいと思います。これを行うには、最初のイベント ハンドラーに両方のロジックを配置します。

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    ...
);

次に、hoverOut メソッドが呼び出されたときに、おそらくポップアップをフェードアウトしたいと思うでしょう。以下を追加するだけです。

$('.disabled').hover (
    ...
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);

最終的なスクリプトは次のようになります。

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);
于 2010-07-29T14:05:33.690 に答える
1

私はおそらくこれを次のように書くでしょう：

$('.disabled').mouseenter(function()
{
 $('#bubble_logged').fadeIn(300);
 $('#bubble_logged').focus();
}); 

$('#bubble_logged').focusout(function () 
{ 
  $(this).fadeOut(300); 
});

代替案: (フェードイン完了後にフォーカス)

$('.disabled').mouseenter(function() 
{ 
 $('#bubble_logged').fadeIn(300, function()
 {
   $('#bubble_logged').focus(); 
 });
});  

$('#bubble_logged').focusout(function ()  
{  
  $(this).fadeOut(300);  
});

EDIT2：時々、私はこれを次のようにも見ました：

$('#bubble_logged').blur(function ()   
{   
  $(this).fadeOut(300);
  $(this).hide();
});
于 2010-07-29T14:02:39.897 に答える
0

に変更focusoutしてみてくださいblur。

于 2010-07-29T13:59:11.957 に答える