首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在语义UI按钮中切换内容?

如何在语义UI按钮中切换内容?
EN

Stack Overflow用户
提问于 2014-04-13 00:07:21
回答 4查看 19.9K关注 0票数 24

documentation说可以对按钮进行格式化以打开或关闭,但给出的示例仅是

代码语言:javascript
运行
复制
<div class="ui toggle button">
    Vote
</div>

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

我可能遗漏了一些简单的东西,但是我怎样才能像这个例子一样创建一个切换按钮呢?指定要在哪些内容之间切换的语法是什么?

EN

Stack Overflow用户

回答已采纳

发布于 2014-04-13 00:26:29

下面的代码正在变魔术:

代码语言:javascript
运行
复制
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
EN
查看全部 4 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23032833

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档