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>

我认为我们要处理像单选按钮这样的按钮，其中只能选择一个按钮，但是Semantic UI实际上没有关于如何对按钮组执行相同操作的任何文档。

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

修改

Here是一个jsFiddle，显示我在尝试实现切换后的按钮分组here

Answer 1

每当按下按钮时 Semantic UI 为该按钮提供一个名为active的类名。

要从您的群组中进行选择，您可以这样做：

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

这将选择具有第一部分的UI组，并使用第二部分返回所选元素。您可以对所选元素执行操作，例如selected.textContent。这将返回元素的显示文本。

由于您已经标记了jQuery，我也将提供一个jQuery示例：

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

注意：请注意，您可能无法创建具有相同类名（huge ui buttons）的多个组。您需要区分它们。使用document.querySelectorAll并使用index选择正确的元素，或者为每个组分配一个唯一的ID，以便您可以使用document.getElementById访问该组。

注2：语义不会记录此内容，但他们会在页面上使用其他代码将按钮设置为活动状态。你可以在这里找到它。 How to toggle content in Semantic UI buttons?。我修改它以适应你的小提琴。 http://jsfiddle.net/cgz7sv4g/2/

添加到语义用户界面：

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

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

编辑：

通过表单请求

发送 div 的内容

需要一个隐藏的输入

的Javascript

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

如何使Semantic UI按钮组可选

1 个答案: