私のオンラインストアでは、製品サイズと色を選択するためにAmazon'sのようなインターフェイスを実装したいと考えています。すなわち、異なるサイズ/色のラジオボタンの代わりに、色の見本またはサイズの名前のいずれかを含む小さな箱の束を見るべきである。ユーザーがボックスをクリックすると、境界線が選択されたことを示すように変更されます。製品のサイズと色を選択するためのAmazonのようなインターフェース（赤い商品を選択するために小さな赤いボックスをクリック）
私はすでにjQueryを使用していますので、jQuery selectable widgetはこれを実装する自然な方法だと思いました。残念ながら、ユーザーが選択できるアイテムの最大数を制御できないため、ユーザーがUIで1つの色/サイズのオンラインを選択することを制限できませんでした。
（可能であれば）jQueryにやさしい方法でこの機能を実装する最も良い方法は何ですか？
これは正しくprogressive enchancementを使ってこれを行う方法です。このアイデアは簡単ですが、JavaScriptを使用するユーザーにとっては、マークアップされたHTMLフォームを色やサイズのスウォッチボタンに変えてください。
この方法の利点は多くあります。コンポーネント（JS/CSS）を簡単に切り替えたり削除したりして、フォームが動作するようにすることができます。 javascriptを使わないユーザーにとってはうまくいくでしょう。注意しておけば、キーボードやスクリーンリーダーからアクセスできるようになります。また、提出時に余分なコードを必要とせず、フォームバリデーターで使いやすくなります。
ほとんどの作業は、仕上げのタッチを追加するために最小限のJavaScriptを使用してCSSで行われます。
完全な実例の例はon 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は非常に簡単です。すべてのラジオ入力が現在選択されているかどうかを検出し、コンテナーに "selected"クラスの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を正しく指している場合は、ラベルをクリックするだけでコントロールを正しく選択できます。
JavaScriptを使用していないがCSSを持っているユーザーにはラジオ入力の要素が表示されるように、".js-active"内のもののみをターゲットにする必要があります。代わりに、ある種の ".radio-js"クラスを同じようにするために、ULラッパーに追加することができます。我々はビューのうち、入力要素をシフトすることができますように、我々は各LIにposition:relativeとoverflow:hiddenを入れ
/* 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;
}
：
まず、ボタンを浮遊し、それらをより多くのボタンのような外観を与えます。これは、アクセス可能な、それを維持しないだろうが、我々はちょうどもはやそれを見ている：
/* 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;
}
：Getting the select valuesあなたはより多くのエフェクトを追加したい場合は他の場所SOに示されています。
残念ながら、それは非常に直感的ではないが、jQueryの選択が選択を防ぐことが可能です：1つの選択を過ぎて何かを停止します
$('#selectable').selectable({
selected: function(event, ui) {
var total = $(ui.selected).siblings('li.ui-selected').length + 1;
if(total > 1) {
$(ui.selected).removeClass('ui-selected');
}
}
});
残りはお客様のニーズに合わせてカスタマイズされています。
EDIT：ちょっと退屈になってしまったので、もう少し実装してアイデアを得ることができました。
Check out a working demo。大きさや色について行ったことは、おそらく取り除くことができますが、私はそれらを別々にしておきたいと思っていました。とにかく、それはあなたにかなり良いスタートを与えるはずです。
あなたの目標は、選択する項目を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");
}
})
});
このコードは、単一の項目が選択できるようになります、そしてそれは、マウスによるかどうかを別の項目を選択しなくなりますCtrlキーを押しながらクリックします。また、アイテムの選択解除も防止します。それはAmazonが持っているものと非常に似た振る舞いをしている
stopイベントを使用して、アイテムが選択された後でページの変更を実行できます（JQuery UIに付属の例に似ています）。
男、そのAmazonインターフェイスは醜いです。これはおそらく、もう少しですが（当然、あなたはピッカーで色の16進表現を使用することはありません）
サイズは十分に簡単でなければなりません。私はおそらく一種のここでのように、しかし、異なるサイズのシャツの小さな絵にしてください：
（それは私が見つけることができるシャツのサイズを選ぶの最良の例ですが、ほとんどの場所はかなりありますひどい）
非常に明確で包括的な - ありがとう！ –
頑固に..はるかに良い答え。 –