轨道单选按钮引导风格

问题描述：

我有一个单选按钮，看起来像这样：轨道单选按钮引导风格

代码：

= f.input :status, as: :radio_buttons, collection: ["Active", "Frozen", "Finished"]

我希望它添加一些造型为它是这样的：

如何能不能做到？

答

简单的解决方案，我发现：在形式：

= f.collection_radio_buttons :status, [[1, "Qualification"] ,[2, "Active"] ,[3, "Frozen"] ,[4, "Finished"] ,[5, "Requalified"]], :first, :last

在样式表：

input[type="radio"] { 
    display:none; 
} 

label { 
    ///color of borders 
    border: 0.5px solid #DDD; 
    border-radius:0px; 
} 

label:hover { 
    cursor:pointer; 
    background-color:red; 
} 

input[type="radio"]:checked + label { 
    background-color: green; 
}

给我们：

答

加载自举

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>

定义单选按钮选项

<% collection = [ { name: "Active", id: 1 }, 
        { name: "Frozen", id: 2 }, 
        { name: "Finished", id: 3 } 
       ] %>

显示所有选项，切换按钮

<div class="btn-group" data-toggle="buttons"> 
    <% collection.each do |status| %> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="<%= status[:id] %>" autocomplete="off"> 
     <%= status[:name] %> 
     </input> 
    </label> 
    <% end %> 
</div>

集类按下按钮时

<script> 
    $('.btn').on('click', function() { 
    <!-- deselect all buttons and set normal color --> 
    $('.btn').removeClass('active'); 
    $('.btn').removeClass('btn-danger'); 

    <!-- set current button as active and change color --> 
    $(this).addClass('active'); 
    $(this).addClass('btn-danger'); 
    }); 
</script>

轨道单选按钮引导风格

相关推荐