1

jqueryでこのようなものをコーディングするための最もエレガントなソリューションについて尋ねられました

http://jsfiddle.net/lucaguglielmi/z3PKm/

もちろん、マウスを使用すると、ポップアップにカーソルを合わせて1つのボタンをクリックできるはずです。

エレガントとは、マウスオーバー/アウトのバグがなく、優れたパフォーマンスと最大限の使いやすさを備えたクリーンなコードを意味します。ユーザーがエラーのためにマウスをホバーし、jquery以外のプラグインがない場合、ユーザーはポップアップに戻る時間が必要です。

HTMLを変更することもできますが、3ボタンはそのままにしておく必要があります。

続行する方法について何か提案はありますか？多分タイマーを使っていますか？

少し早いですがお礼を

4

2 に答える 2

1

http://jsfiddle.net/z3PKm/12/

ポップアップメニュー自体にいくつかのポップアップルールを追加します（ボタンに触れている必要があります）（divラップを使用して透明にし、ボタンの上に配置します）-またはタイムアウト機能を使用します.choose

これは私が考える最も簡単な解決策です

于 2012-09-20T18:19:17.173 に答える
0

このような UX 要素に関する私の経験では、ユーザーの不満につながります。そのため、要素の上にカーソルを置くことに依存しない 2 つのボタンを表示する別の方法があるように、アプローチを完全に再検討することをお勧めします。デザインのリファクタリングを支持するもう 1 つの議論は、「ホバー」の概念がないため、タブレットや電話などのタッチ デバイスでは機能しないということです。

ただし、どうしてもやりたい場合はタイマーを使うのが一番だと思います。アレックスの解決策は、ボタンとコンテナーの間のギャップを取り除くことで機能しますが、それも不満につながる可能性があります。たとえば、ユーザーのマウスがボタンの上にあり、現在表示されているコンテナーに向かって斜めに上に移動した場合、最初に背景を通過します。 、コンテナが消えます。また、2 つの要素間の視覚的なギャップをなくすことは、設計の観点から望ましくない場合があります。

を使用するだけでは簡単ではありませんがsetTimeout、ボタンの上にカーソルを置いてからポップアップに移動すると、ボタンを押すのに十分な速さでないと消えてしまいます。したがって、ポップアップに入るときにも使用する必要がclearTimeoutあり、おそらく、ポップアップを離れるときにポップアップを非表示にする必要があります。だから、ここにあなたが必要とするものがあります：

まず、タイムアウト ID を保持する変数を宣言します (簡単にするためにグローバル変数を使用しましたが、代わりに要素の 1 つでプロパティを使用することもできます)。

var hidePopupTimeoutId;

次に、.chooseイベントを次のように変更します。

$(".choose").live("mouseover", function () {
    // no need to check if hidePopupTimeoutId is undefined; clearTimeout
    // will fail silently
    clearTimeout( hidePopupTimeoutId );
    $(".popup").show();
});


$(".choose").live("mouseout", function () {
    // we don't hide the popup immediately, but give the user a reasonable
    // amount of time to mouse over it
    hidePopupTimeoutId = setTimeout( function() {
        $(".popup").hide();
    },500);
});

イベントのタイムアウトをクリアする必要があることに注意してくださいmouseover。そうしないと、ボタンの上にマウスを置き、マウスを離してからマウスを戻すと、マウスがボタンの上にあるにもかかわらず、ボタンが消えてしまいます!

次に、マウスがポップアップの上にある場合にポップアップが表示されたままになるように、いくつかのロジックを追加します。

$(".popup").live("mouseenter", function() {
    clearTimeout( hidePopupTimeoutId );
});


$(".popup").live("mouseleave", function() {
    $(".popup").hide();
});​

andの代わりにjQuery のmouseenterandmouseleaveイベントを使用していることに注意してください。これは、ポップアップの子要素 ​​(ボタンなど) の 1 つにカーソルを合わせると が呼び出され、ポップアップが消えるためです!mouseovermouseoutmouseout

そして、あなたはそれを持っています。ここにjsFiddleのデモがあります：http://jsfiddle.net/z3PKm/15/

于 2012-09-20T18:51:18.330 に答える