基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016-04-30 00:20
991 查看
注意这里要求使用到Bootstrap框架的输入框组,如:
Demo案例的效果图:
![](http://img.blog.csdn.net/20160430000423995?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
点击添加按钮,添加多行输入框组:
![](http://img.blog.csdn.net/20160430000526533?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](http://img.blog.csdn.net/20160430000633393?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
点击第3个输入框组的删除按钮进行删除:
![](http://img.blog.csdn.net/20160430000727081?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
第3个输入框组就被删除了。
这里提供自制的 插件 inputGroup.js
参数为可以设置 输入框组中中间的控件是文本域还是输入框;以及设置在输入框组右侧的操作的内容。
使用inputGroup.js只要在对应的容器,如div中添加选择器,然后使用jQuery获取该选择器对应的jQuery对象,调用 initInputGroup方法即可。
inputGroup.js
Demo案例——InputGroupDemo
目录结构如下:
![](http://img.blog.csdn.net/20160430001116613?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
index.html
如果输入框组中的中间控件需要input,则可以设置:
中间控件为input的效果如下:
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row -->
Demo案例的效果图:
点击添加按钮,添加多行输入框组:
点击第3个输入框组的删除按钮进行删除:
第3个输入框组就被删除了。
这里提供自制的 插件 inputGroup.js
参数为可以设置 输入框组中中间的控件是文本域还是输入框;以及设置在输入框组右侧的操作的内容。
使用inputGroup.js只要在对应的容器,如div中添加选择器,然后使用jQuery获取该选择器对应的jQuery对象,调用 initInputGroup方法即可。
inputGroup.js
/** * Created by DreamBoy on 2016/4/29. */ $(function() { $.fn.initInputGroup = function (options) { //1.Settings 初始化设置 var c = $.extend({ 'widget' : 'input', 'add' : "<span class=\"glyphicon glyphicon-plus\"></span>", 'del' : "<span class=\"glyphicon glyphicon-minus\"></span>" }, options); var _this = $(this); //添加序号为1的输入框组 addInputGroup(1); /** * 添加序号为order的输入框组 * @param order 输入框组的序号 */ function addInputGroup(order) { //1.创建输入框组 var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>"); //2.输入框组的序号 var inputGroupAddon1 = $("<span class='input-group-addon'></span>"); //3.设置输入框组的序号 inputGroupAddon1.html(" " + order + " "); //4.创建输入框组中的输入控件(input或textarea) var widget = '', inputGroupAddon2; if(c.widget == 'textarea') { widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>"); inputGroupAddon2 = $("<span class='input-group-addon'></span>"); } else if(c.widget == 'input') { widget = $("<input class='form-control' type='text'/>"); inputGroupAddon2 = $("<span class='input-group-btn'></span>"); } //5.创建输入框组中最后面的操作按钮 var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>"); addBtn.appendTo(inputGroupAddon2).on('click', function() { //6.响应删除和添加操作按钮事件 if($(this).html() == c.del) { $(this).parents('.input-group').remove(); } else if($(this).html() == c.add) { $(this).html(c.del); addInputGroup(order+1); } //7.重新排序输入框组的序号 resort(); }); inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2); _this.append(inputGroup); } function resort() { var child = _this.children(); $.each(child, function(i) { $(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' '); }); } } });
Demo案例——InputGroupDemo
目录结构如下:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>输入框组</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <style> /*.input-group-add .input-group { margin: 10px 0; }*/ </style> <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />--> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="input-group-add"> <!--<div class="input-group"> <span class="input-group-addon"> 1 </span> <!–<input type="text" class="form-control" aria-label="...">–> <textarea class="form-control"></textarea> <span class="input-group-addon"> <button class="btn btn-default" type="button"> + </button> </span> </div>--> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="inputGroup.js"></script> <script> $(function() { $('.input-group-add').initInputGroup({ 'widget' : 'textarea', //输入框组中间的空间类型 /*'add' : '添加', 'del' : '删除'*/ }); }); </script> </body> </html>
如果输入框组中的中间控件需要input,则可以设置:
$('.input-group-add').initInputGroup({ 'widget' : 'input', //输入框组中间的空间类型 /*'add' : '添加', 'del' : '删除'*/ });或者不进行设置,因为默认中间控件为input。
中间控件为input的效果如下:
相关文章推荐
- springmvc+mybatis+spring 整合 bootstrap html5 mysql
- bootstrap学习笔记(5)
- 详解Bootstrap进度条组件
- bootstrap学习笔记(4)
- 一系列Bootstrap导航条使用方法分享
- Bootstrap实现下拉菜单效果
- 解决打开bootstrap模态框抖动问题
- JS组件Bootstrap导航条使用方法详解
- bootstrap响应式设计简单实践。
- 浅析BootStrap模态框的使用(经典)
- 浅析Bootstrap缩略图组件与警示框组件
- Bootstrap模态对话框的简单使用
- Bootstrap模态对话框的简单使用
- 浅析Bootstrap缩略图组件与警示框组件
- 浅析BootStrap模态框的使用(经典)
- Bootstrap实现下拉菜单效果
- 一系列Bootstrap导航条使用方法分享
- bootstrap 改变模态弹出框的样式
- spring mvc ajax分页 bootstrap-paginator
- 前端ers 必须知道的几个bootstrap cdn加速节点