如何切换语义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>

这自然，不能正常工作。该示例的源$ C ​​$ C的检查发现一个有效类编程方式添加。

我可能失去了一些东西简单，但我怎么能在这个例子中创建一个切换按钮样的？什么是规范语法怎么切换？

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?

推荐答案

下面code是做魔术：

The below code is doing the magic:

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屋！