zoukankan      html  css  js  c++  java

  • 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

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