哪个HTML/JS小部件显示这个balsamiq控件？

Question

我在balsamiq做了模型&他们有一个很好的小部件，

• 允许从两个值中选择一个值。在触摸屏上效果很好
• 可用于显示两个值&突出显示选定的值。

示例：

​

通过HTML/CSS和JS实现类似于图片中的小部件的选项是什么？

Answer 1

下面我介绍的方法迭代了所有的fieldset元素，如果其中的所有输入都是type="radio"的，那么就隐藏它们，并从它们的相关label元素中添加span元素( class="buttonRadio")。它还将click事件绑定到附加的span元素，并在原始input上触发change事件，并将“选中”类名添加到单击/触摸元素中，同时将该类从其兄弟节点中移除：

$('fieldset').each(
    function() {
        var legend = $(this).find('legend').text();
        if ($(this).find('input').length == $(this).find('input[type="radio"]').length) {
            var that = $(this),
                len = that.find('input[type="radio"]').length;
            for (var i = 0; i < len; i++) {
                $('<span />')
                    .text($('label')
                          .eq(i).text())
                    .addClass('buttonRadio')
                    .attr('data-fromID',that.find('input:eq(' + i + ')').attr('id'))
                    .appendTo(that);
            }
        }
    }).on('click','.buttonRadio',function(){
        var id = $(this).attr('data-fromID');
        $(this).addClass('checked').siblings().removeClass('checked');
        $('#' + id).click().trigger('change');
    }).find('label, input[type="radio"]').css('display','none');​

这将使用以下CSS对这些元素进行样式设置：

.buttonRadio {
    background-color: #fff;
    padding: 0.5em 1em;
    border: 1px solid #000;
    margin: 0.5em 0 0 0;
}

.buttonRadio.checked {
    background-color: #ffa;
}​

JS Fiddle演示。

编辑了，对jQuery做了一点修改：

1. 在此版本中稍早缓存$(this)对象，
2. 记得使用我在第一次投递时分配的legend变量，但忘了实际使用use...sigh。
3. 还隐藏了实际的<legend></legend>元素： $('fieldset').each(函数(){ var = $(this)，len =that.find(‘len’).text()；that.find if (‘input’).length == that.find(‘inputtype=’inputtype=‘).length){ var len=that.find(’inputtype=‘无线电’).length；for (var i= 0；i< len；( i++) {$(‘).text($(’标签‘).eq(I).text() .addClass('buttonRadio') .attr('data-fromID’)，that.find('input:eq(‘+I+’)‘).attr(’id‘).appendTo(I)；) $(this).addClass('checked').siblings().removeClass('checked')；$('#‘+ id).click().trigger('change')；).find(‘label，inputtype=’收音机，传奇‘).css(’display‘，'none');​

JS Fiddle演示。

参考文献：

• addClass()。
• attr()。
• click()。
• css()。
• each()。
• eq()。
• find()。
• on()。
• removeClass()。
• siblings()。
• text()。
• trigger()。