Как переключить контент в кнопки семантического интерфейса?

Документация говорит, что кнопка может быть отформатирована для включения или выключения, но приведенный пример - это просто

<div class="ui toggle button">
    Vote
</div>

который, естественно, не работает. Проверка исходного кода примера показывает, что класс active программно добавлен.

Я, вероятно, пропустил что-то простое, но как я могу создать кнопку переключения, как в этом примере? Какой синтаксис для указания того, что переключать между?

Ответ 1

Следующий код делает магию:

semantic.button = {};

// ready event
semantic.button.ready = function() {

  // selector cache
  var
    $buttons = $('.ui.buttons .button'),
    $toggle  = $('.main .ui.toggle.button'),
    $button  = $('.ui.button').not($buttons).not($toggle),
    // alias
    handler = {

      activate: function() {
        $(this)
          .addClass('active')
          .siblings()
          .removeClass('active')
        ;
      }

    }
  ;

  $buttons
    .on('click', handler.activate)
  ;


  $toggle
    .state({
      text: {
        inactive : 'Vote',
        active   : 'Voted'
      }
    })
  ;

};


// attach ready event
$(document)
  .ready(semantic.button.ready)
;

Ответ 2

Самый простой способ получить кнопки переключения, работающие без каких-либо параметров и т.д., следующие:

$('.ui.button.toggle').state();

Для переключения между серыми и зелеными цветами по умолчанию нажмите. См. Другие ответы для более сложного поведения. Убедитесь, что DOM и т.д. Загружены первыми, как и с другими инициализаторами семантического интерфейса.

Ответ 3

Следующий простой код отлично работает для двух разных кнопок переключения с событием onClick. Спасибо Мукешу за то, что он вдохновил меня.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="../../dist/semantic.css">
<script src="../assets/library/jquery.min.js"></script>
<script src="../../dist/semantic.js"></script>

</head>
<script>

function show(b){
alert( $(b).hasClass("active"));
}

// attach ready event
$(document)
  .ready(function() {
  var $toggle  = $('.ui.toggle.button');
  $toggle
    .state({
      text: {
        inactive : 'Vote',
        active   : 'Voted'
      }
    })
  ;

})
;
</script>
<body>

<button class="ui toggle button" onclick="show(this)">
  Vote
</button>
<br/><br/>
<button class="ui toggle button" onclick="show(this)">
  Vote
</button>


</body>
</html>

Ответ 4

Это очень просто,

<button class="ui toggle button active" id="tgl">Toogle button</button>

просто используйте классический jquery click, чтобы переключить активный класс и добавить любые другие необходимые изменения. Я думаю, что использование семантического этапа в этом случае является пустой тратой времени.

$('#tgl').click(function(){      
            $(this).toggleClass('active');
});