집 >웹 프론트엔드 >JS 튜토리얼 >jQuery를 사용하여 Bootstrap_javascript 기술을 기반으로 입력 상자 그룹 입력 그룹 추가 및 삭제

jQuery를 사용하여 Bootstrap_javascript 기술을 기반으로 입력 상자 그룹 입력 그룹 추가 및 삭제

WBOY원래의: 2016-05-16 15:02:321945검색

이 글에서는 참고용으로 jQuery를 사용하여 입력 상자 그룹의 추가 및 삭제 작업을 구현하는 예제를 공유합니다.

이를 위해서는 다음과 같은 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 -->

데모 사례 렌더링:

자체 제작 플러그인 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) + ' '); 
      }); 
    } 
  } 
});

데모 사례——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-group-add').initInputGroup({ 
        'widget' : 'input', //输入框组中间的空间类型 
        /*'add' : '添加', 
        'del' : '删除'*/ 
      });

아니면 기본 중간 컨트롤이 입력되기 때문에 설정하지 마세요.
중간 컨트롤이 입력되는 효과는 다음과 같습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명：

이전 기사：DWR_javascript 기술로 다양한 Java 메소드 호출다음 기사：DWR_javascript 기술로 다양한 Java 메소드 호출

jQuery를 사용하여 Bootstrap_javascript 기술을 기반으로 입력 상자 그룹 입력 그룹 추가 및 삭제

관련 기사