上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ，初始状态下只有一个输入框组，可以通过点击输入框组的右侧“+”（或自定义的文字）可以在原输入框组的下面产生一个新的输入框组，通过点击输入框组的右侧“-”（或自定义的文字）可以删除当前输入框组。
        但是这样的输入框组还存在的许多不足之处，如问题一：我们在form表单中添加了这样一个输入框组，那么我们提交表单的时候怎么提交输入框输入的内容呢？（此时上回讲到的输入框组的输入框或文本域还未定义name属性）此外，问题二：那假如我希望初始的输入框组中输入框或文本域就有值肿么办？多个输入框组的内容呈现又如何呢？
针对这样的问题，对上一次自定义的输入框组插件进行了一定的修改。对于问题一，为插件添加 field 配置设置；对于问题二，为插件添加 data 配置设置（解决该问题，有点类似采用了递归的思想，当构建出一个输入框组后，通过触发该输入框组的添加功能（添加按钮的点击事件），在当前输入框组下面产生新的输入框组，同理，直到产生与 data 属性传入的数组长度为止，此时不再触发点击事件）
       修改如下：
inputGroup-1.1.js
  1. /**
  2. * Created by DreamBoy on 2016/6/4.
  3. */
  4. /**
  5. * Created by DreamBoy on 2016/4/29.
  6. */
  7. $(function() {
  8. $.fn.initInputGroup = function (options) {
  9. //1.Settings 初始化设置
  10. var c = $.extend({
  11. widget: 'input',
  12. add: "<span class=\"glyphicon glyphicon-plus\"></span>",
  13. del: "<span class=\"glyphicon glyphicon-minus\"></span>",
  14. field: '',
  15. data: []
  16. }, options);
  17. var _this = $(this);
  18. 　　_this.children().remove();
  19. //添加序号为1的输入框组
  20. addInputGroup(1);
  21. /**
  22. * 添加序号为order的输入框组
  23. * @param order 输入框组的序号
  24. * @param data 初始化输入框组中的数据
  25. */
  26. function addInputGroup(order) {
  27. //1.创建输入框组
  28. var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>");
  29. //2.输入框组的序号
  30. var inputGroupAddon1 = $("<span class='input-group-addon'></span>");
  31. //3.设置输入框组的序号
  32. inputGroupAddon1.html(" " + order + " ");
  33. //4.创建输入框组中的输入控件（input或textarea）
  34. var widget = '', inputGroupAddon2;
  35. if(c.widget == 'textarea') {
  36. widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>");
  37. widget.html(c.data[order - 1]);
  38. inputGroupAddon2 = $("<span class='input-group-addon'></span>");
  39. } else if(c.widget == 'input') {
  40. widget = $("<input class='form-control' type='text'/>");
  41. widget.val(c.data[order - 1]);
  42. inputGroupAddon2 = $("<span class='input-group-btn'></span>");
  43. }
  44. //5.设置表单提交时的字段名
  45. if(c.field.length == 0) {
  46. widget.prop('name', c.widget + 'Data[]');
  47. } else {
  48. widget.prop('name', c.field + '[]');
  49. }
  50. //6.创建输入框组中最后面的操作按钮
  51. var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");
  52. addBtn.appendTo(inputGroupAddon2).on('click', function() {
  53. //7.响应删除和添加操作按钮事件
  54. if($(this).html() == c.del) {
  55. $(this).parents('.input-group').remove();
  56. } else if($(this).html() == c.add) {
  57. $(this).html(c.del);
  58. addInputGroup(order+1);
  59. }
  60. //8.重新排序输入框组的序号
  61. resort();
  62. });
  63. inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2);
  64. _this.append(inputGroup);
  65. if(order + 1 > c.data.length) {
  66. return;
  67. }
  68. addBtn.trigger('click');
  69. }
  70. function resort() {
  71. var child = _this.children();
  72. $.each(child, function(i) {
  73. $(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');
  74. });
  75. }
  76. }
  77. });
index-1.1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>输入框组——改进版</title>
  8. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  9. <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->
  10. <!--[if lt IE 9]>
  11. <script src="js/html5shiv.js"></script>
  12. <script src="js/respond.min.js"></script>
  13. <![endif]-->
  14. </head>
  15. <body>
  16. <div class="container">
  17. <div class="input-group-add">
  18. </div>
  19. </div>
  20. <script src="js/jquery-1.11.1.min.js"></script>
  21. <script src="js/bootstrap.min.js"></script>
  22. <script src="inputGroup-1.1.js"></script>
  23. <script>
  24. $(function() {
  25. $('.input-group-add').initInputGroup({
  26. 'widget' : 'input', //输入框组中间的空间类型
  27. /*'add' : '添加',
  28. 'del' : '删除'*/
  29. 'field': 'data',
  30. 'data' : ['haha', 'hello', 'hi', 'dj']
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>
       此时，在不设置 data 属性或data属性设置为空数组 []，将与原来显示结果无异。设置由于设置了field属性，所以此时输入框或文本框的name属性为field属性的值，如：
       如果没有设置 field 属性的话，默认为 inputData[] 或 textarea[] 对应设置 input 或 textarea控件。
       当设置了 data 属性后，并且 data 不为空数组时，初始化界面后如下：（设置要的数组将 放入 输入框组 中）
       同样能正常使用 “添加”和“输出”功能。
 
https://blog.csdn.net/qq_15096707/article/details/51585758

基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版的更多相关文章

  1. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  2. Bootstrap历练实例：输入框组的大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  4. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  5. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  6. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  7. 基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...

  8. 从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：输入框（Input）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Vmware-虚拟机中ubuntu不能联网问题的解决——NAT方式

    设置虚拟机不能联网是很痛苦的,这里我就ubuntu的NAT上网问题就个人经验讲一下,其他的桥连接等没有使用就没有经验了. 1.查看/设置下NAT的网络 打开VMware Workstation, 点击 ...

  2. nginx访问http自动跳转到https

    if ($server_port != '443' ) { rewrite ^/(.*)$ https://cms-news.artron.net/$1 permanent; }

  3. 再访贺利坚（一）：IT毕业生去培训机构，这件事很正常（转载）

    转载自: 再访贺利坚(一):IT毕业生去培训机构,这件事很正常 导语:与烟台大学计算机学院贺利坚副教授相识,还是在2012年年底,那个时候我在为社区之星专访栏目寻找合适的采访人.在社区运营的推荐下,我 ...

  4. iOS 为什么使用xcode8上传app包到appStore无法构建版本

    使用xcode8或者application loader上传代码包到AppStore提示上传成功,但是我们在iTunes Connect中的构建版本或者活动中看不到已上传的代码包.这个问题原因是:ap ...

  5. 基于CSS3图片悬停放大特效

    今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...

  6. 为WPF程序添加字体

    很多时候我们开发的程序可能会在多个版本的Windows上运行,比如XP.Win7.Win8. 为了程序美观,现在很多公司会使用WPF作为程序的界面设计. 跨版本的操作的操作系统往往有一些字体上的问题, ...

  7. 【C#/WPF】限制GridSplitter分隔栏的滑动范围

    GridSplitter可以自由滑动,例如一个水平方向的分隔栏,可以从屏幕顶端滑到屏幕底端. 现在的需求是:限制GridSplitter在一定范围内滑动. 例如,现在有如下的横竖两个GridSplit ...

  8. mysql合并查询结果及为表和字段取别名

    利用union关键字,可以给出多条select语句,并将它们的结果组合成单个的结果. 合并是,两个表对应的列数和数据类型必须相同. 各个select语句之间使用union或union all关键字分隔 ...

  9. CentOS 6编译安装yum和配置常用的yum源

    安装环境:VPS,CentOS 6 + devel包 一.安装相应的软件 1.安装python 下载Python源码包 [root@akinlau ~]# wget http://www.python ...

  10. Linux系统分区方案建议

    在安装Linux系统之初,就应该考虑怎样使linux系统得到最好的性能.linux本身也设计为可以良好扩展的形态. 笔者建议系统程序和业务程序分离安装比较合理,笔者所在的公司也是按照这种理念实施的.比 ...