web-dev-qa-db-ja.com

セマンティックUIボタンのコンテンツを切り替える方法は？

documentation はボタンをオンまたはオフに切り替えるようにフォーマットできますが、指定された例は単に

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

これは当然、機能しません。例のソースコードを調べると、activeクラスがプログラムで追加されていることがわかります。

おそらく単純なものが足りないのですが、その例のようにトグルボタンを作成するにはどうすればよいですか？何を切り替えるかを指定するための構文は何ですか？

jqueryhtmlcssbuttonsemantic-ui
22
Huey

以下のコードは魔法をかけています：

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

オプションなしでトグルボタンを機能させる最も簡単な方法は次のとおりです。

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

クリックすると、デフォルトの灰色と緑色が切り替わります。より複雑な動作については、他の回答を参照してください。他のセマンティックUI初期化子と同様に、最初にDOMなどがロードされていることを確認してください。

3
Greg

とてもシンプルです

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

従来のjqueryクリックを使用してアクティブなクラスを変更し、必要なその他の変更を追加します。この場合、セマンティックステージを使用することは時間の無駄だと思います。

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

次の簡単なコードは、onClickイベントを持つ2つの異なるトグルボタンに対して正常に機能しています。ムケシュに刺激を与えてくれてありがとう。

<!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>
2
Mohammed Ali