Como alternar conteúdo Semântico de INTERFACE do usuário botões?

StackOverflow https://stackoverflow.com//questions/23032833

Pergunta

O documentação diz um botão pode ser formatado para ativar ou desativar, mas o exemplo dado é meramente 

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

que, naturalmente, não funciona.Uma inspeção do código fonte do exemplo revela uma active classe por meio de programação é adicionado.

Eu provavelmente estou faltando alguma coisa simples, mas como eu posso criar um botão de alternância, como no exemplo?O que é a sintaxe para especificar o que, para alternar entre a?

Foi útil?

Solução

O código abaixo está a fazer a mágica:

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)
;

Outras dicas

A maneira mais fácil para obter os botões de alternância de trabalho sem quaisquer opções etc é o seguinte:

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

Este deve alternar entre o padrão de cinza e verde, as cores clique.Veja outras respostas para o mais complicado de comportamento.Certifique-se de que o DOM etc é carregado pela primeira vez como com outros semântica UI inicializadores.

É muito simples,

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

basta usar o clássico jquery clique para toogle de classe ativa, e adicionar quaisquer outras alterações que você precisa.Eu acho que o uso de semântica estágio é um desperdício de tempo neste caso.

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

O seguinte código simples é trabalhar bem para duas diferentes botões de alternância com o evento onClick.Obrigado Mukesh para me inspirar.

<!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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top