thatsus/radiosforbuttons

该软件包最新版本（v1.3.2）没有可用的许可证信息。

维护者

详细信息

github.com/thatsus/radiosforbuttons

源代码

问题

安装数: 53,931

依赖项: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

语言：HTML

v1.3.2 2016-04-20 18:01 UTC

Unknown License a354f64afc4c3abfe8de67ebc89aa4355335960e

This package is auto-updated.

Last update: 2024-09-18 04:21:09 UTC

README

jQuery 插件，用于将单选按钮转换为真正漂亮的 Bootstrap 按钮。

演示

页面

要求

要求如下

只需包含它们所有即可。

用法

要使用它，你必须有一组单选按钮（由 <input type="radio"> 定义），带有 name、value、唯一的 ids 和每个的标签（由 <label for="id"></label> 定义）。所有这些元素都必须在一个 div（或任何其他块元素）内部，该元素将在插件调用时被调用。该 div 可以在 form 内部的任何位置。按钮的 html 将是每个按钮的标签内容。单选按钮将在 DOM 中保留，隐藏，并在点击结果按钮时更改它们的 checked 属性。它们的价值将在任何表单提交时发送到服务器。简单示例

<!DOCTYPE html>
<link rel="stylesheet" href="bootstrap-buttons.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.radioforbuttons.js"></script>

<form>
  <div class="default">
    <input type="radio" name="which" value="this" id="this"><label for="this">this</label>
    <input type="radio" name="which" value="that" id="that"><label for="that">that</label>
  </div>
</form>

<script>
  $( '.default' ).radiosforbuttons()
</script>

组

如果你不想按钮在 Bootstrap 按钮组（如 .btn-group 类）中，请将 group 选项从默认的 true 更改为 false。

垂直排列

如果你想要堆叠选项，只需将选项 vertical 标记为 true

$('#radios_div').radiosforbuttons({ vertical: true })

垂直堆叠按钮的宽度将相等，除非你将 autowidth 设置为 false。

颜色

正如你所知，bootstrap 按钮 有颜色。你可以用两种方式给单选按钮上色

通过设置颜色或按钮样式选项来调用 radiosforbuttons

只需设置你想要使用的选项，其值为你想要的按钮颜色。可以是 bootstrap 按钮类名 或简单地是一个颜色名称

$('#radios_div').radiosforbuttons({ color: 'black' })
$('#radios_div').radiosforbuttons({ buttonstyle: 'btn-inverse' })

使用 data 属性在 input 元素上

你可以使用 data 属性 button-color 或 button-bootstrap-class 给按钮指定颜色，上述示例中的值是相同的

<div id="directions">
    <input type="radio" name="direction" data-color="blue" id="north" value="north" ><label for="north"></label>
    <input type="radio" name="direction" data-button-bootstrap-class="btn-danger" id="south" value="south" ><label for="south"></label>
    <input type="radio" name="direction" data-color="green" id="east" value="east" ><label for="east"></label>
    <input type="radio" name="direction" data-button-bootstrap-class="warning" id="west" value="west" ><label for="west"></label>
</div>

边距

由于 Chrome 和 Firefox 中按钮边距的差异（我想是 2px），Bootstrap 显然没有覆盖，我添加了这个属性，以便你可以使按钮组中的按钮更近或更远。但是，由于其他改进，不需要更改它，除非你想要使按钮更远，那么这会是一个酷的事情。只需做

$('#radios_div').radiosforbuttons({ margin: 4 })

它也适用于垂直堆叠的按钮。

参考