README

这是一个小的javascript代码片段，它扩展了Bootstrap按钮组，以便使用切换按钮作为单选按钮或复选框。

请查看jsfiddle。

集成

从GitHub下载代码，并将dist目录复制到您的项目中。

在您的HTML的<head>部分包含以下代码行。

<script src="path/to/jquery.twbs-toggle-buttons.min.js"></script>

基础

<label class="control-label">Is it true?</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <div class="btn active" role="button">
        <input type="radio" name="options" value="1" required="required">yes 1
    </div>
    <div class="btn active" role="button">
        <input type="radio" name="options" value="2">yes 2
    </div>
    <div class="btn" role="button">
        <input type="radio" name="options" value="0">no
    </div>
</div>
<script>
    $(".btn-group-toggle").twbsToggleButtons();
</script>

选项

twbsBtnSelector

默认: '[role="button"]'

所有按钮的默认选择器是[role="button"]。为了避免这个特殊的HTML属性，您可以更改选项twbsBtnSelector，例如将其更改为一个类。

<label class="control-label">Is it true?</label>
<div class="btn-group btn-group-toggle">
    <div class="btn" required="required">yes</div>
    <div class="btn">no</div>
</div>
<script>
    $(".btn-group-toggle").twbsToggleButtons({
        twbsBtnSelector: ".btn"
    });
</script>

classActive

默认: 'btn-success'

为了检测活动状态和非活动状态切换按钮之间的视觉差异，将两个选项classActive和classInactive设置为默认的Bootstrap类。更改选项并使用其他类来区分两种切换状态。

提示：使用类数组来设置多个类。

$(".btn-group-toggle").twbsToggleButtons({
    classActive: "my-active-button",
    classInactive: ["my-inactive-button-1", "my-inactive-button-2"]
});

classInactive

默认: 'btn-secondary'

参见classActive

事件

为了避免在twbs-toggle-buttons上执行点击事件的顺序出现问题时，您可以使用两种事件类型来处理事件。

点击事件

click事件在按钮上触发。

❗ 注意获取按钮的正确状态！要获取按钮切换后的状态，请使用事件twbsToggleButtons:activate 事件。

$(".btn-group-toggle").find("[role='button']").on("click", function (e)
{
    console.log(e);
});

twbsToggleButtons:activate 事件

此事件在按钮激活状态改变后触发。

$(".btn-group-toggle").find("[role='button']").on("twbsToggleButtons:activate", function (e)
{
    console.log(e);
});

技巧与提示

复选框或单选按钮

<label class="control-label">Choose your documents!</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <div class="btn active" role="button">
        <input type="checkbox" name="options[]" value="1">Document 1
    </div>
    <div class="btn active" role="button">
        <input type="checkbox" name="options[]" value="2">Document 2
    </div>
    <div class="btn" role="button">
        <input type="checkbox" name="options[]" value="3">Document 3
    </div>
</div>

必填单选组

如果使用单选按钮，通常只有一个按钮必须是活动的。

为了允许没有任何活动按钮的按钮组，在输入字段中移除属性required。

重写classActive

有时改变单个切换按钮的活动类很有用。为此，添加tml数据属性data-twbs-toggle-buttons-class-active和相应的类。

<label class="control-label">Is it true?</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <div class="btn active" role="button">
        <input type="radio" name="options" value="1" required="required">yes
    </label>
    <div class="btn active" role="button">
        <input type="radio" name="options" value="0" data-twbs-toggle-buttons-class-active="btn-danger">no
    </label>
</div>

prokki / twbs-toggle-buttons

维护者

详细信息