基于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 options属性集合操作代码
Dec 28 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
原生js实现九宫格拖拽换位
Jan 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防止sql注入代码实例
2013/12/18 PHP
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
从零学Python之hello world
2014/05/21 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
python字符串的index和find的区别详解
2020/06/20 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
询价采购方案
2014/06/09 职场文书
企业贷款委托书格式
2014/09/12 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
校本课程教学计划
2015/01/19 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
中秋节感想
2015/08/10 职场文书
清明扫墓感想
2015/08/11 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
MySQL分布式恢复进阶
2022/07/23 MySQL