1

我在 balsamiq 中做了模型，他们有这个不错的小部件，它

  • 允许从两个值中选择一个值。在触摸屏上工作得非常好
  • 可用于显示两个值并突出显示选定的值

例子： 小部件

通过 HTML/CSS 和 JS 实现类似于图片中所示的小部件的选项有哪些？

4

1 回答 1

2

我在下面介绍的方法遍历所有fieldset元素，如果其中的所有输入都是 of type="radio"，则隐藏它们并使用相关元素中的文本将span元素 (of ) 附加到它们的位置。它还将事件绑定到附加元素，并在原始s 上触发事件，并将“已检查”类名称添加到单击/触摸元素，同时将该类从其兄弟元素中删除：class="buttonRadio"labelclickspanchangeinput

$('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 小提琴演示。

编辑对 jQuery 进行了一些修改：

  1. $(this)在此版本中稍早缓存了对象，
  2. 记得使用legend我在第一个化身中分配但忘记实际使用的变量......叹息。

  3. 还隐藏了实际<legend></legend>元素：

    $('fieldset').each(
    function() {
        var that = $(this),
            legend = that.find('legend').text();
        $('<span />').text(legend).addClass('legend').appendTo(that);
        if (that.find('input').length == that.find('input[type="radio"]').length) {
            var 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"], legend').css('display','none');​

JS 小提琴演示。

参考：

于 2012-04-01T20:19:33.837 回答