类似于亚马逊的界面，用于选择产品尺寸和颜色(即，单击一个红色小框以选择红色产品，等等)

问题描述

在我的在线商店中，我想实现类似亚马逊的，用于选择商品尺寸和颜色.即，用户应该看到一堆小盒子，而不是用于不同大小/颜色的单选按钮，每个小盒子都包含一个色样或一个大小名称.当用户单击一个框时，边框应更改以指示它已被选中.

In my online store, I want to implement an interface like Amazon's for selecting product size and color. I.e., instead of radio buttons for the different sizes / colors, the user should see a bunch of little boxes, each containing either a swatch of color or the name of a size. When the user clicks a box, the border should change to indicate it's selected.

我已经在使用jQuery，所以我认为 jQuery可选小部件将是一个实现此目的的自然方法.不幸的是，它似乎没有让您控制用户可以选择的最大项目数，因此，我不能限制用户在UI中在线选择一种颜色/大小.

I'm using jQuery already, so I thought that the jQuery selectable widget would be a natural way to implement this. Unfortunately, it doesn't appear to give you control over the maximum number of items the user can select, and therefore I couldn't limit users to selecting online one color / size in the UI.

以jQuery友好的方式(如果可能)实现此功能的最佳方法是什么?

推荐答案

以下是使用渐进的魅力.这个想法很简单，将具有适当标记的HTML表单变成具有JavaScript的用户更好的颜色和大小色板按钮.

Here is how to do this properly using progressive enchancement. The idea is simple, turn a decently marked up HTML form into nicer color and size swatch buttons for users that have JavaScript.

此方法的好处很多，您可以轻松地切换或删除组件(JS/CSS)并使表格仍然有效.它适用于不使用javascript的用户，如果我们注意的话，可以通过键盘和屏幕阅读器进行访问.它还不需要提交任何额外的代码，并且与表单验证器一起使用会容易得多.

The benefits of this method are many, you can easily switch, or remove, components (JS/CSS) and have the form still work. It will work for users that don't hvae javascript, and if we're careful, it will be accessible via keyboard and screen readers. It also requires no extra code on submit, and will be a lot easier to use with a form validator.

大多数工作都是使用CSS进行的，仅使用最少的JavaScript即可添加点睛之笔.

Most of the work is done with CSS with only minimal JavaScript to add the finishing touches.

可以在jsbin上的中找到完整的示例示例.它包括颜色和尺寸选择.我只在这里包括了颜色，因为它们之间的CSS仅有细微的差别.

Full working example example can be found on jsbin. It includes both color and size selections. I have only included the colors here as there is only a slight difference in the CSS between the them.

HTML

首先，标记表单组件.这是基础知识，您可能显然想添加一些东西，例如围绕整个小部件的包装，或使用其他类名.

First off, markup the form components. Here are the basics, you may obviously want to add things, like a wrapper around the whole widget, or use other classnames.

<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容器都标记为"radio"，因此可以使用CSS("ul.radio label")适当地定位其中的所有内容.

This may seem a lot for "basics", but there are several things going on here. The whole UL container is flagged as "radio" so everything within can be targeted appropriately with CSS ("ul.radio label").

此外，我添加了一个与输入名称相对应的类，并在每个LI上添加了一个类，以回显该值，以允许CSS添加适当的样式("ul.color li.red").其余的几乎就是您的标准表单标记.

Additionally I add a class corresponding to the input's name, and a class on each LI echoing the value to allow CSS to add appropriate styles ("ul.color li.red"). The rest is pretty much your standard form markup.

JavaScript

JavaScript非常简单.我们要做的就是检测当前选择了哪个无线电输入，并使用"selected"类标记容器LI，从而使CSS能够适当地突出显示它.

The JavaScript is very simple. All we do is detect which radio input is currently selected and flag the container LI with a "selected" class, thus allowing CSS to highlight it appropriately.

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)，则这种触发点击以强制执行初始运行的技巧"可能是不安全的，为简便起见，我使用此方法.

Please note: This "trick" of triggering click to enforce the initial run may be unsafe if you have click handlers higher (typically document.body), I use this method for brevity.

CSS

这是真正的魔术发生的地方.想法是我们可以将输入控件隐藏在视图之外，并将标签设置为颜色按钮.只要标签上的for属性正确指向输入上的id，那么单击标签就足以正确选择控件.

Here is where the real magic happens. The idea is that we can tuck the input controls out of view and style the labels as color buttons. So long as the for attributes on the labels correctly point to id's on the inputs then clicking the labels will suffice to select the control correctly.

我们只需将目标定位在".js-active"内，这样不具有JavaScript但仍具有CSS的用户将可以看到单选输入元素.可以在UL包装器上添加某种".radio-js"类，以完成相同的工作.

We need to target things only within ".js-active" so that users that don't have JavaScript but still have CSS will see the radio input elements. Some sort of ".radio-js" class could alternatively be added on the UL wrapper to get the same thing done.

首先，使按钮浮动，使按钮外观更像按钮:

Firstly, float the buttons and give them a more button-like appearance:

/* 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;
}

我们在每个LI上放置了position:relative和overflow:hidden，因此我们可以将输入元素移出视线.这将使它易于访问，但我们不再需要查看它:

We put position:relative and overflow:hidden on each LI so we can shift the input element out of view. This will keep it accessible, but we just no longer have to look at it:

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

下一步是将标签变成按钮:

Next up is turning the labels into buttons:

/* 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;  }

最后，为突出显示/选定的项目设置一些样式.

Finally, set some styles for our highlighted / selected item.

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

出于完整性考虑:如果要添加更多效果，则获取选择值在SO上的其他地方进行了演示.

For completeness: Getting the select values if you want to add more effects is demonstrated elsewhere on SO.

这篇关于类似于亚马逊的界面，用于选择产品尺寸和颜色(即，单击一个红色小框以选择红色产品，等等)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！