Какой виджет HTML / JS отображает этот элемент управления balsamiq? - PullRequest
Новая
       25

Какой виджет HTML / JS отображает этот элемент управления balsamiq?

1 голос
/ 01 апреля 2012

Я сделал макеты в balsamiq, и у них есть этот красивый виджет, который

  • Позволяет выбрать значение из двух значений. Очень хорошо работает на сенсорных экранах
  • Может использоваться для отображения двух значений и выделения выбранного

Пример: Widget

Какие варианты реализации виджета похожи на показанные на картинке через HTML / CSS & JS?

1 Ответ

2 голосов
/ 02 апреля 2012

Подход, который я представляю ниже, перебирает все fieldset элементы, и если все входные данные имеют type="radio", скрывает их и добавляет span элементы (class="buttonRadio") на их место, используя текст изих соответствующие label элементы.Он также привязывает события click к добавленным элементам span и запускает событие change в исходных input s, а также добавляет «проверенное» имя класса к элементу, к которому был произведен щелчок / касание, при удалении этого класса.это от его родных братьев: 

$('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 demo .

Отредактировано , чтобы немного изменить 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 Fiddle demo .

Ссылки:

...