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

Question

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

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

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

Answer 1

以下是如何使用渐进式增强来正确执行此操作.这个想法很简单,将带有标记的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输入上的's',然后单击标签就足以正确选择控件.

我们需要仅在内部定位,".js-active"以便没有JavaScript但仍具有CSS的用户将看到无线电输入元素.可以在UL包装器上添加某种".radio-js"类来完成相同的操作.

首先,浮动按钮并给它们一个更像按钮的外观:

/* 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因此我们可以将输入元素移出视图.这将使其可访问,但我们不再需要查看它:

/* 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上的其他位置进行演示.

Answer 2

有可能让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次选择.

其余的只是根据您的特定需求进行定制.

编辑:我有点无聊所以我实施了一些,所以你可以得到一个想法.

查看一个有效的演示.你可以摆脱大小和颜色的事情有很多重复,但我想把它们分开,因为我想两者之间的事情可能会发生变化.无论如何,这应该会给你一个很好的开始.