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


Posted in Javascript onMay 03, 2016

本文实例为大家分享使用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案例的效果图:

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

这里提供自制的 插件 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
目录结构如下:

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

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的效果如下:

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
JQuery的Pager分页器实现代码
May 03 #Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 #Javascript
JQuery核心函数是什么及使用方法介绍
May 03 #Javascript
jquery对象访问是什么及使用方法介绍
May 03 #Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 #Javascript
javascript的BOM
May 03 #Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 #Javascript
You might like
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
javascript中常用编程知识
2013/04/08 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
表达自我的市场:Society6
2018/08/01 全球购物
后勤主管工作职责
2013/12/07 职场文书
教师考察材料范文
2014/06/03 职场文书
任命书怎么写
2015/03/02 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
庆七一晚会主持词
2015/06/30 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技