Come attivare il contenuto nei pulsanti UI semantici?

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

Domanda

the Documentazione afferma un pulsante può essere formattato per il passaggio o disattivato, ma l'esempio dato è solo 

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

che naturalmente, non funziona.Un'ispezione del codice sorgente dell'esempio rivela una classe active è stata aggiunta a livello di programmazione.

Probabilmente mi manca qualcosa di semplice, ma come posso creare un pulsante di commutazione come in quell'esempio?Qual è la sintassi per specificare cosa alternarsi tra?

È stato utile?

Soluzione

Il codice qui sotto sta facendo la magia: 

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

Altri suggerimenti

Il modo più semplice per ottenere i pulsanti a legna da lavorare senza alcuna opzione, ecc. È il seguente: 

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

Questo dovrebbe alternare tra i colori grigi e verdi predefiniti sul clic.Vedi le altre risposte per un comportamento più complicato.Assicurati che il DOM ecc. Viene caricato prima come con altre iniziative UI semantiche.

è molto semplice, 

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

Basta utilizzare la classica jQuery click per toogle la classe attiva e aggiungere altre modifiche necessarie.Penso che l'utilizzo della fase semantica sia una perdita di tempo in questo caso. 

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

Il seguente codice semplice funziona bene per due diversi pulsanti di commutazione con evento onClick.Grazie Mukesh per ispirare me. 

<!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>
.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top