如何在语义UI按钮中切换内容？ [英] How to toggle content in Semantic UI buttons?

问题描述

文档说，按钮可以格式化为打开或关闭但是给出的示例仅仅是

The documentation says a button can be formatted to toggle on or off, but the example given is merely

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

这当然不起作用。通过检查示例的源代码，可以以编程方式添加活动类。

which naturally, doesn't work. An inspection of the source code of the example reveals an active class is programmatically added.

简单的东西，但是如何在这个例子中创建一个切换按钮？

I'm probably missing something simple, but how can I create a toggle button like in that example? What's the syntax for specifying what to toggle between?

推荐答案

下面的代码是神奇的：

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

这篇关于如何在语义UI按钮中切换内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！