3

私のオンライン ストアでは、商品のサイズと色を選択するための Amazon のようなインターフェイスを実装したいと考えています。つまり、さまざまなサイズ/色のラジオ ボタンの代わりに、色見本またはサイズの名前を含む小さなボックスの束がユーザーに表示されます。ユーザーがボックスをクリックすると、選択されていることを示すために境界線が変化する必要があります。

私はすでに jQuery を使用しているので、jQuery の選択可能なウィジェットがこれを実装する自然な方法になると考えました。残念ながら、ユーザーが選択できるアイテムの最大数を制御できるようには見えないため、ユーザーが UI でオンラインで 1 つの色/サイズを選択するように制限することはできませんでした。

この機能を jQuery に適した方法で実装する最善の方法は何ですか (可能な場合)?

4

4 に答える 4

8

プログレッシブ エンハンスメントを使用してこれを適切に行う方法を次に示します。アイデアは単純です。適切にマークアップされた HTML フォームを、JavaScript を使用しているユーザー向けに、より適切な色とサイズの見本ボタンに変換します。

この方法には多くの利点があります。コンポーネント (JS/CSS) を簡単に切り替えたり削除したりしても、フォームは引き続き機能します。JavaScript を使用しないユーザーでも機能します。注意すれば、キーボードやスクリーン リーダーからアクセスできるようになります。また、送信時に追加のコードを必要とせず、フォームバリデーターでの使用がはるかに簡単になります.

ほとんどの作業は CSS を使用して行われ、最後の仕上げには最小限の JavaScript のみが使用されます。

完全な動作例は jsbin にあります。色とサイズの両方の選択が含まれます。CSS にはわずかな違いしかないため、ここでは色のみを含めました。

HTML

まず、フォーム コンポーネントをマークアップします。これが基本です。明らかに、ウィジェット全体のラッパーなどを追加したり、他のクラス名を使用したりすることができます。

<label>Color</label>
<ul class="radio color">
  <li class="red">
    <input type="radio" name="color" id="color_red" value="red" />
    <label for="color_red">Red</label>
  </li>
  <li class="green">
    <input type="radio" name="color" id="color_green" value="green" />
    <label for="color_green">Green</label>
  </li>
  <!-- ...and so on... -->
</ul>

これは「基本」には多くのように思えるかもしれませんが、ここではいくつかのことが行われています。コンテナ全体ULに「ラジオ」のフラグが付けられるため、その中のすべてを CSS で適切にターゲットにすることができます ( "ul.radio label")。

さらに、入力の名前に対応するクラスを追加し、それぞれLIに値をエコーするクラスを追加して、CSS が適切なスタイルを追加できるようにします ( "ul.color li.red")。残りは、ほぼ標準のフォーム マークアップです。

JavaScript

JavaScript は非常に単純です。現在選択されているラジオ入力を検出し、コンテナLIに「選択された」クラスのフラグを付けて、CSS が適切に強調表示できるようにするだけです。

jQuery(function($){
  // notify CSS that JS is present
  $( 'body' ).addClass( 'js-active' );
  // for every radio control...
  $( 'ul.radio' )
    // redo every change
    .bind('click', function () {
      // refresh "current classes"
      $( 'li', this ).removeClass( 'selected' )
        .filter( ':has(:checked)' ).addClass( 'selected' );
    })
    // trigger initial run
    .trigger( 'click' );  
});

注意: クリックをトリガーして最初の実行を強制するこの「トリック」は、クリック ハンドラーがより高い (通常はdocument.body) 場合、安全ではない可能性があります。簡潔にするためにこの方法を使用します。

CSS

ここで本当の魔法が起こります。アイデアは、入力コントロールをビューの外に押し込んで、ラベルをカラー ボタンとしてスタイルすることができるということです。forラベルの属性が入力の を正しく指している限りid、ラベルをクリックするだけでコントロールを正しく選択できます。

".js-active"JavaScript を持っていないが、まだ CSS を持っているユーザーがラジオ入力要素を見ることができるように、内部のみをターゲットにする必要があります。あるいは、ある種の「.radio-js」クラスをULラッパーに追加して、同じことを行うこともできます。

まず、ボタンをフロートさせて、ボタンのような外観にします。

/* attributes are lined up horizontally */
ul.color li,
ul.size li {
  border : 1px solid #aaa;
  margin : 0 4px 0 0;
  padding : 2px;
  float : left;
  overflow : hidden;
  position : relative;
}

position:relative各 LI にとを付けoverflow:hiddenて、入力要素をビューの外に移動できるようにします。これにより、アクセス可能になりますが、もう見る必要はありません。

/* if JS: remove inputs from sight */
.js-active ul.color input,
.js-active ul.size input {
  position : absolute;
  left : -999em;
}

次は、ラベルをボタンに変換します。

/* if JS: turn color labels into buttons */
.js-active ul.color label {
  cursor : pointer;
  display : block;
  height : 18px;
  width : 18px;
  text-indent : -999em; /* hide text */
}
/* color buttons in color -- allowed even if no JS */
ul.color li.red label   { background : red;   }
ul.color li.green label { background : green; }
ul.color li.blue label  { background : blue;  }

最後に、強調表示/選択したアイテムのスタイルをいくつか設定します。

/* if JS: current selected highlight */
.js-active ul.color .selected,
.js-active ul.size .selected {
  border : 2px solid #000;
  padding : 1px;
}

完全を期すために: さらに効果を追加する場合の選択値の取得については、SO の別の場所で説明しています。

于 2009-04-13T15:07:05.823 に答える
5

残念ながらあまり直感的ではありませんが、jQuery を選択可能にすることで選択を防ぐことができます。

$('#selectable').selectable({
   selected: function(event, ui) {
       var total = $(ui.selected).siblings('li.ui-selected').length + 1;
       if(total > 1) {
           $(ui.selected).removeClass('ui-selected');
       }
   }
});

これにより、選択可能なウィジェットで 1 つ以上の選択が行われなくなります。

残りは、特定のニーズに合わせてカスタマイズするだけです。

編集：少し退屈になったので、アイデアを得るためにさらに実装しました。

実際のデモをご覧ください。おそらく取り除くことができるサイズと色に対して行われたことには多くの繰り返しがありますが、2つの間で物事が変わる可能性があると思うので、それらを別々に保ちたいと思いました. とにかく、それはあなたにかなり良いスタートを与えるはずです.

于 2009-04-11T19:34:47.820 に答える
0

男、そのアマゾンのインターフェースは醜いです。私は次の線に沿ってもっと何かを試してみたいと思うでしょう：

サイズは十分に簡単でなければなりません。私はおそらく、さまざまなサイズのシャツの小さな写真を撮りますが、ここのようなものです：

（これは私が見つけたシャツのサイズを選ぶ最良の例です。ほとんどの場所はかなりひどいです）

于 2009-04-12T02:23:25.277 に答える
0

目標が1つのアイテムのみを選択できるようにすることである場合、これにより次のことが可能になります。

$(function() {
    $("#selectable").selectable({
        // this will prevent selecting a second item (for dragging\clicking)
        selecting: function(event,ui) {
            if ($(ui.selecting).siblings("li.ui-selecting").length > 0)
                $(ui.selecting).removeClass("ui-selecting");
        },
        // this will prevent selecting a second item (for CTRL+Click)
        selected: function(event,ui) {
            if ($(ui.selected).siblings("li.ui-selected").length > 0)
                $(ui.selected).removeClass("ui-selected");
        },
        // this will prevent un-selecting items (one item must be selected)
        unselected: function(event,ui) {
            if ($(ui.unselected).siblings("li.ui-selecting").length == 0)
                $(ui.unselected).addClass("ui-selected");
        }
    })
});

このコードを使用すると、1つのアイテムを選択でき、マウスをドラッグするか、Ctrlキーを押しながらクリックして別のアイテムを選択できなくなります。また、アイテムの選択解除を防ぎます。これは、Amazonと非常によく似た動作をします。

アイテムが選択された後、イベントを使用stopしてページの変更を実行できます（JQuery UIに付属の例と同様）。

于 2009-04-11T20:53:55.757 に答える