Verwenden von jQuery zum Hinzufügen und Löschen der Eingabefeldgruppe input-group basierend auf Bootstrap_javascript-Kenntnissen-js-Tutorial-php.cn

Verwenden von jQuery zum Hinzufügen und Löschen der Eingabefeldgruppe input-group basierend auf Bootstrap_javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:02:32

Original

1893 Leute haben es durchsucht

Dieser Artikel enthält ein Beispiel für die Verwendung von jQuery zum Implementieren der Hinzufügungs- und Löschvorgänge der Eingabefeldgruppe input-group. Der spezifische Inhalt lautet wie folgt:

Beachten Sie, dass hierfür die Verwendung der Eingabefeldgruppe des Bootstrap-Frameworks erforderlich ist, wie zum Beispiel:

<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 -->

Nach dem Login kopieren

Rendering des Demo-Falls:

Hier steht das selbst erstellte Plug-in inputGroup.js zur Verfügung

Der Parameter kann festlegen, ob das mittlere Steuerelement in der Eingabefeldgruppe ein Textfeld oder ein Eingabefeld ist, und den Inhalt der Operation auf der rechten Seite der Eingabefeldgruppe festlegen.

Um inputGroup.js zu verwenden, fügen Sie einfach einen Selektor im entsprechenden Container hinzu, z. B. ein Div, und verwenden Sie dann jQuery, um das dem Selektor entsprechende jQuery-Objekt abzurufen, und rufen Sie die initInputGroup-Methode auf.
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) + ' '); 
      }); 
    } 
  } 
});

Nach dem Login kopieren

Demo-Fall – InputGroupDemo
Die Verzeichnisstruktur ist wie folgt:

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>

Nach dem Login kopieren

Wenn das mittlere Steuerelement in der Eingabefeldgruppe eine Eingabe erfordert, können Sie Folgendes festlegen:

$('.input-group-add').initInputGroup({ 
        'widget' : 'input', //输入框组中间的空间类型 
        /*'add' : '添加', 
        'del' : '删除'*/ 
      });

Nach dem Login kopieren

Oder legen Sie es nicht fest, da die mittlere Standardsteuerung die Eingabe ist.
Der Effekt der Eingabe des mittleren Steuerelements ist wie folgt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Verwenden von jQuery zum Hinzufügen und Löschen der Eingabefeldgruppe input-group basierend auf Bootstrap_javascript-Kenntnissen