本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作,供大家参考,具体内容如下
注意这里要求使用到Bootstrap框架的输入框组,如:
<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案例的效果图:
这里提供自制的 插件 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的效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助。
本文地址:https://www.stayed.cn/item/25337
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我