jQuery 将单选按钮转换成分组按钮

jQuery 将单选按钮转换成分组按钮416
如何使用它:
1。加载Twitter引导页面的CSS。
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
2。加载最新的jQuery库和jQuery无线电按钮插件的页面。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.radiosforbuttons.js"></script>
3。创建单选按钮的颜色分配通过 data属性。
<div class="colors">
<input type="radio" data-button-color="blue" name="color" value="blue" id="blue">
<label for="blue">blue</label>
<input type="radio" data-button-color="white" name="color" value="white" id="white">
<label for="white">white</label>
<input type="radio" data-button-bootstrap-class="btn-warning" name="color" value="yellow" id="yellow">
<label for="yellow">yellow</label>
<input type="radio" data-button-color="black" name="color" value="black" id="black">
<label for="black">black</label>
<input type="radio" data-button-bootstrap-class="success" name="color" value="green" id="green">
<label for="green">green</label>
<input type="radio" data-button-bootstrap-class="btn-danger" name="color" value="red" id="red">
<label for="red">red</label>
<input type="radio" data-button-color="lightblue" name="color" value="lightblue" id="lightblue">
<label for="lightblue">light blue</label>
</div>
4。初始化插件一行javascript。
$('.colors').radiosforbuttons();
5。可选的设置。
$('.colors').radiosforbuttons({
group: true, // grouped buttons
vertical: false, // vertical mode
autowidth: true,
margin: 0, // space between buttons
});

也许你还喜欢