如何使语义 UI 按钮组可选

Question

如何使语义 UI Button Group 可选择，以便我可以获得在 PHP 中选择的那个？

这是按钮组：

<div class="huge ui buttons">
  <div class="ui button">One</div>
  <div class="ui button">Two</div>
  <div class="ui button">Three</div>
</div>

我假设我们将按钮视为单选按钮，其中只能选择一个按钮，但语义 UI 实际上没有任何文档说明如何对按钮组执行相同操作。

如何使按钮可选择，以便将其发送到我的 PHP 脚本？

编辑：

Here is a jsFiddle showing how my button groups at the moment after trying to implement the toggle as shown here

Answer 1

每当按下按钮时 语义 UI 为该按钮提供一个 class 名称，名为 active.

您组中的 select 您可以这样做：

var selected = document.querySelector(".huge.ui.buttons").querySelector(".active");

这将 select UI 与第一部分分组，return 与第二部分 selected 元素。您可以对 selected 元素执行操作，例如 selected.textContent。这将 return 元素的显示文本。

既然你标记了jQuery，我也会提供一个jQuery例子：

var selected = $(".huge.ui.buttons").find(".active");

NOTE: Please not that you will likely create multiple groups with the same class names (huge ui buttons). You will need to discriminate between them. Either use document.querySelectorAll and select the proper element using its index or give every group a unique ID so you can access the group with document.getElementById.

NOTE 2: Semantic isn't documenting this, but they use additional code on their page to set the button to active. You can find it here. How to toggle content in Semantic UI buttons?. I modified it to work with your Fiddle. http://jsfiddle.net/cgz7sv4g/2/

添加到 语义 UI:

semantic = {};
// ready event
semantic.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)
  ;


// attach ready event
$(document)
  .ready(semantic.ready)
;

此代码块将使用处理程序扩展您的语义按钮，该处理程序将 class active 添加到当前单击的元素并将其从组中的其他元素中删除。您可以使用此代码扩展 Semantic UI's 元素。使用基本 jQuery，因为 Semantic UI 是一个建立在 jQuery.

之上的平台

编辑：

通过表单请求发送div的内容

需要隐藏输入

Javascript

 var selected = $(".huge.ui.buttons").find(".active").text();
 $("#div_content").val(selected);

如何使语义 UI 按钮组可选

How to make Semantic UI button group selectable

html

javascript

jquery

uibutton

semantic-ui