基于bootstrap面板的类别多选栏
1、html部分
<div class="panel panel-default"> <div class="panel-heading">请选择您需要的分类(可多选)</div> <div class="list-group" > <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>前端</p></a> <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>后台</p></a> <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>iOS</p></a>
<a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>java</p></a> <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok" ></span><p>测试</p></a> <a href="#" class="list-group-item" ><span class="glyphicon glyphicon-ok " ></span> <p>自定义</p> <div > <input type="text" maxlength="10" placeholder="请输入要添加的类别" class="form-control" name="" > <button class="btn btn-primary">添加</button> </div> </a> </div> <button class="btn btn-success">确定</button> </div>
2、js
//类别多选栏的样式(小绿勾) var $category = $("#category"); $category.delegate("a", "click", function (e) { if ($(this).index() == $("#category a").length - 1) { $(\'#newCategory div\').css("display", "block"); } else { $(\'#newCategory div\').css("display", "none"); $("#newCategory input").val(""); if ($(this).is(".active")) { $(this).removeClass("active"); } else { $(this).addClass("active"); } ; } }); $("#newCategory button").on("click", function () { var item = \'<a href="#" class="list-group-item active"><span class="glyphicon glyphicon-ok" ></span><p>\' + $("#newCategory input").val() + \'</p></a>\'; $("#newCategory").before(item); $("#newCategory input").val(""); })
3、css
/*******类别多选栏的部分******/ #category .active{ background-color: white; color: black; border: 1px solid #E2E2E3; } #category .badge{ margin-top: -4px; background-color:transparent; border: none; } #category span{ float:right; display:none; } #category .active span{ display:block; float:right; color: rgb(70, 176, 85); font-size: 15px; } #options a{ overflow: hidden; } #options .panel{ width:100%; margin-left: auto; margin-right: auto; } #newCategory div{ display: none; }
- 上一篇 »css3实现多选
- 下一篇 »纯CSS实现多选组件