基于引导程序使用框架实现输入框组输入组的添加与删除

本文实例为大家分享使用框架实现输入框组输入组的添加与删除操作，供大家参考，具体内容如下

注意这里要求使用到引导程序框架的输入框组，如：

div class=' row ' div class=' col-LG-6 ' div class=' input-group ' span class=' input-group-addon ' input type=' checkbox ' aria-label=' . '/span输入类型=' text ' class=' form-control ' aria-label=' . '/div！-/输入-组- /div！- /.col-LG-6-div class=' col-LG-6 ' div class=' input-group ' span class=' input-group-addon ' input type=' radio ' aria-label=' . '/span输入类型=' text ' class=' form-control ' aria-label=' . '/div！-/输入-组- /div！- /.col-lg-6 - /div！- /.行-演示案例的效果图：

这里提供自制的插件inputGroup.js

参数为可以设置输入框组中中间的控件是文本域还是输入框；以及设置在输入框组右侧的操作的内容。

使用inputGroup.js只要在对应的容器，如差异中添加选择器，然后使用框架获取该选择器对应的框架对象，调用initInputGroup方法即可输入组。射流研究…

/** *由梦幻男孩于2016年四月29日创建*/$(function(){ $)。fn。initinputGrouP=函数(选项){//1 .设置初始化设置var c=$ .extend({ 'widget' : 'input '，' add ' : ' span class=\ ' glyphicon glyphicon-plus \ '/span '，' del ' : ' span class=\ ' glyphicon glyphicon-减号\'/span' }，选项)；var _ this=$(this)；//添加序号为一的输入框组addinputGrouP(1)；/** * 添加序号为命令的输入框组* @参数顺序输入框组的序号*/function addInputGroup(order){//1 .创建输入框组var输入组=$(' div class=' input-group ' style=' margin : 10px 0 '/div ')；//2.输入框组的序号var inputgroupaddin1=$(' span class=' input-group-addon '/span ')；//3.设置输入框组的序号inputgroupaddle 1。html(' order ')；//4.创建输入框组中的输入控件（输入或textarea) var widget=' '，inputgroupaddin2 if(c . widget==' text area '){ widget=$(' text area class=' form-control ' style=' resize : vertical；/文本区域')；inputgroupaddin2=$(' span class=' input-group-addon '/span ')；} else if(c . widget==' input '){ widget=$(' input class=' form-control ' type=' text '/')；inputgroupaddin2=$(' span class=' input-group-BTN '/span ')；} //5.创建输入框组中最后面的操作按钮var addBtn=$(' button class=' Btn Btn-default ' type=' button ' ' c . add '/button ')；addbtn。附录2 .on('click '，function() { //6 .响应删除和添加操作按钮事件if($(this).html()==c.del) { $(this).父母('。输入组')。移除();} else if($(this).html()==c.add) { $(this).html(c . del)；addInputGroup(顺序1);} //7.重新排序输入框组的序号度假村();});输入组。追加(inputgroupaddle 1).追加（小部件)。追加(inputGroupAddon2 _ this。追加(输入组)；} function resort(){ var child=_ this。儿童()；$.每个（子，函数{ $(这个)).查找('。输入-组-插件')。等式(0).html('(I ^ 1)' ')；});} } });演示案例——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 link rel='样式表href=' CSS/bootstrap。量滴“CSS”类型=“text/CSS”样式/* .输入组添加。输入组{ margin : 10px 0；} *//样式！-link href=' assets/font-awesome/CSS/font-awesome。CSS ' rel='样式表'/-!-[如果lt IE 9]脚本src=' http : js/html 5 shiv。js /脚本脚本src=' http : js/response。量滴js /脚本！[endif]-/head body div class=' container ' div class=' input-group-add '！-div class=' input-group ' span class=' input-group-addon ' 1/span！输入类型=' text ' class=' form-control ' aria-label=' . 'textarea class=' form-control '/textarea span class=' input-group-addon ' button class=' BTNBTN-default ' type=' button '/button/span/div-/div/div脚本src=' http : js/jquery-1。11 .1 .量滴js /脚本脚本src=' http : js/bootstrap。量滴js /脚本src=' http : inputgroup。js /脚本$脚本输入-组-添加')。initinputGrouP({ ' widget ' : '文本区'，//输入框组中间的空间类型/*"添加":"添加，‘德尔’:删除'*/});});/脚本/正文/html如果输入框组中的中间控件需要输入，则可以设置：

$('.输入-组-添加')。initinputGrouP({ ' widget ' : ' input '，//输入框组中间的空间类型/*"添加":"添加，‘德尔’:删除'*/});或者不进行设置，因为默认中间控件为输入。中间控件为投入的效果如下：

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

引导程序学习教程

引导程序实战教程

引导程序插件使用教程

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