基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除
更新時(shí)間：2016年05月03日 12:07:33 作者：夢(mèng)小白
這篇文章主要介紹了基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除的相關(guān)資料,需要的朋友可以參考下
本文實(shí)例為大家分享使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除操作，供大家參考，具體內(nèi)容如下
注意這里要求使用到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
參數(shù)為可以設(shè)置 輸入框組中中間的控件是文本域還是輸入框；以及設(shè)置在輸入框組右側(cè)的操作的內(nèi)容。
使用inputGroup.js只要在對(duì)應(yīng)的容器，如div中添加選擇器，然后使用jQuery獲取該選擇器對(duì)應(yīng)的jQuery對(duì)象，調(diào)用 initInputGroup方法即可。
inputGroup.js
/**
* Created by DreamBoy on 2016/4/29.
*/
$(function() {
$.fn.initInputGroup = function (options) {
//1.Settings 初始化設(shè)置
var c = $.extend({
'widget' : 'input',
'add' : "<span class=\"glyphicon glyphicon-plus\"></span>",
'del' : "<span class=\"glyphicon glyphicon-minus\"></span>"
}, options);
var _this = $(this);
//添加序號(hào)為1的輸入框組
addInputGroup(1);
/**
* 添加序號(hào)為order的輸入框組
* @param order 輸入框組的序號(hào)
*/
function addInputGroup(order) {
//1.創(chuàng)建輸入框組
var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>");
//2.輸入框組的序號(hào)
var inputGroupAddon1 = $("<span class='input-group-addon'></span>");
//3.設(shè)置輸入框組的序號(hào)
inputGroupAddon1.html(" " + order + " ");
//4.創(chuàng)建輸入框組中的輸入控件（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.創(chuàng)建輸入框組中最后面的操作按鈕
var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");
addBtn.appendTo(inputGroupAddon2).on('click', function() {
//6.響應(yīng)刪除和添加操作按鈕事件
if($(this).html() == c.del) {
$(this).parents('.input-group').remove();
} else if($(this).html() == c.add) {
$(this).html(c.del);
addInputGroup(order+1);
}
//7.重新排序輸入框組的序號(hào)
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
目錄結(jié)構(gòu)如下：
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，則可以設(shè)置：
$('.input-group-add').initInputGroup({
'widget' : 'input', //輸入框組中間的空間類型
/*'add' : '添加',
'del' : '刪除'*/
});
或者不進(jìn)行設(shè)置，因?yàn)槟J(rèn)中間控件為input。
中間控件為input的效果如下：
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- jQuery/JS監(jiān)聽input輸入框值變化實(shí)例
- jQuery實(shí)現(xiàn)input輸入框獲取焦點(diǎn)與失去焦點(diǎn)時(shí)提示的消失與顯示功能示例
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
- js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法
- jquery實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
- input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
- input 和 textarea 輸入框最大文字限制的jquery插件
- jQuery 版本的文本輸入框檢查器Input Check
- jquery獲取input輸入框中的值
相關(guān)文章
在javascript中，replace方法是屬于String對(duì)象的，可用于替換字符串。今天我們就來詳細(xì)探討下一些replace()方法的使用2015-09-09
JavaScript枚舉選擇jquery插件代碼實(shí)例
這篇文章主要介紹了JavaScript枚舉選擇jquery插件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
學(xué)習(xí)javascript面向?qū)ο?實(shí)例講解面向?qū)ο筮x項(xiàng)卡
這篇文章主要介紹了面向?qū)ο筮x項(xiàng)卡實(shí)現(xiàn)方法，幫助大家更好地學(xué)習(xí)javascript面向?qū)ο?，感興趣的小伙伴們可以參考一下2016-01-01
javascript提取URL的搜索字符串中的參數(shù)(自定義函數(shù)實(shí)現(xiàn))
我們經(jīng)常會(huì)看到有的頁(yè)面鏈接地址后面會(huì)跟有參數(shù),很多時(shí)候我們需要獲得這些參數(shù)的值,接下來將介紹獲取方法,感興趣的朋友可以了解系,希望本文對(duì)你有所幫助2013-01-01
js對(duì)象數(shù)組查找某一元素的各種方法(不改變?cè)瓟?shù)組)
前端經(jīng)常要通過javaScript來處理數(shù)組中的數(shù)據(jù),其中就包括檢查數(shù)組中是否包含滿足特定搜索條件的單個(gè)或者多個(gè)值,這篇文章主要給大家介紹了關(guān)于js對(duì)象數(shù)組查找某一元素的各種方法,文中介紹的方法不改變?cè)瓟?shù)組,需要的朋友可以參考下2024-06-06
不到200行 JavaScript 代碼實(shí)現(xiàn)富文本編輯器的方法
這篇文章主要介紹了不到200行 JavaScript 代碼實(shí)現(xiàn)富文本編輯器的方法,需要的朋友可以參考下2018-01-01
詳解全棧開發(fā)Vercel數(shù)據(jù)庫(kù)存儲(chǔ)服務(wù)
這篇文章主要為大家介紹了全棧開發(fā)Vercel數(shù)據(jù)庫(kù)存儲(chǔ)服務(wù)功能使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JS判斷字符串是否為整數(shù)的方法--簡(jiǎn)單的正則判斷
今天小編就為大家分享一篇JS判斷字符串是否為整數(shù)的方法--簡(jiǎn)單的正則判斷，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-07-07
js print打印網(wǎng)頁(yè)指定區(qū)域內(nèi)容的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s print打印網(wǎng)頁(yè)指定區(qū)域內(nèi)容的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了在Js中去掉字符串中空格的實(shí)現(xiàn)方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11