24

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

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

这自然是行不通的。对示例源代码的检查显示以active编程方式添加了一个类。

我可能遗漏了一些简单的东西，但是我怎样才能创建一个像该示例中那样的切换按钮？指定切换内容的语法是什么？

4

4 回答 4

17

下面的代码正在发挥作用：

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)
;
于 2014-04-12T16:26:29.220 回答
4

在没有任何选项等的情况下使切换按钮工作的最简单方法如下：

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

这应该在点击时在默认的灰色和绿色之间切换。有关更复杂的行为，请参阅其他答案。确保首先加载 DOM 等，就像其他语义 UI 初始化程序一样。

于 2016-03-23T15:55:26.920 回答
3

这很简单，

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

只需使用经典的 jquery click toggle 活动类，并添加您需要的任何其他更改。我认为在这种情况下使用语义阶段是浪费时间。

$('#tgl').click(function(){      
            $(this).toggleClass('active');
});
于 2018-11-04T12:37:33.823 回答
2

以下简单代码适用于具有 onClick 事件的两个不同切换按钮。感谢 Mukesh 给了我灵感。

<!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>
于 2015-10-04T04:57:43.393 回答