AngularJS-Tutorial-Serie: Teil 4 – Erstellen eines Fokus-Textfeld-Steuerelements mit ausgefallenem Feedback

Dieses AngularJS-Mini-Tutorial für Fortgeschrittene ist Teil 4 einer 5-teiligen Serie, in der Sie jeweils lernen, wie Sie etwas erstellen, das Sie auf Ihrer Webseite verwenden können. In diesem Tutorial erfahren Sie, wie Sie mithilfe von AngularJS-Direktiven, LESS CSS und Font Awesome ein Fokus-Textfeld-Steuerelement erstellen.

Andere Beiträge in der Serie:

Eckiger JS-Fokustext

Heute werde ich darüber sprechen, wie man ein Fokus-Textfeld-Steuerelement mit erstellt Winkel JS, WENIGER CSSund Schriftart genial. Die Direktive sollte Eingaben vom Typ Text und Passwort ersetzen und dem Benutzer ein relativ ausgefallenes Feedback darüber geben, welche Eingabe fokussiert ist.

Ich gehe davon aus, dass Sie mit diesen Tools zumindest halbwegs vertraut sind, aber wenn Sie es nicht sind, schlage ich vor, dass Sie einen Blick auf die obigen Links werfen. Sie können die Demo sehen hier.

Ich werde den Artikel in drei separate Abschnitte aufteilen: HTML, JavaScript und CSS. Im HTML-Abschnitt zeige ich, wie Sie die Anweisung schnell zu Ihrer Website hinzufügen können. Ich werde auch erklären, was im HTML der Direktive vor sich geht. Als Nächstes werde ich über JavaScript sprechen und darüber, wie man eine Angular JS-App, einen Controller und eine Anweisung einrichtet. Ich werde auch erklären, wie die Direktive mit dem Controller verknüpft ist. Abschließend gehe ich durch das CSS und beschreibe, wie genau ich die Fokusanimationen durchführe.

Notiz: Das hier gezeigte CSS stimmt möglicherweise nicht genau mit dem überein, was Sie auf der Demoseite sehen, da ich möchte, dass die Demo mit einem hübschen Styling zumindest halbwegs anständig aussieht. Größtenteils werde ich jedoch versuchen, das CSS im Tutorial so einfach wie möglich zu halten.

HTML

Direktive Verwendung

<text placeholder="Name..." ng-model="name"></text>

Hier ist ein Beispiel dafür, wie Sie die Textdirektive verwenden können. Das Platzhalter Das Attribut funktioniert genauso wie bei einem normalen Eingabesteuerelement und stellt Text bereit, der angezeigt wird, bevor der Benutzer etwas eingibt. Das des Modells Die integrierte Angular JS-Direktive ermöglicht das Binden des Werts der Eingabe an eine Controller-Variable. In unserem obigen Fall ist der Wert der Eingabe an den eines Controllers gebunden Name Variable.

Fokus-Textvorlage

Auch wenn die Vorlage für die Focus-Text-Direktive nicht sehr groß ist, wäre es dennoch unhandlich, sie inline mit der Direktive zu setzen, also befindet sie sich in einer separaten Datei.

<div class="text-container">
  <input type="{{type}}" placeholder="{{placeholder}}" ng-model="ngModel" />
  <div class="focus">
    <div></div>
  </div>>
</div>

Wir setzen hier ein paar Dinge direkt aus dem Anwendungsbereich unserer Richtlinie. Die erste ist die Typ der Eingabe, die in unserem Fall entweder „Text“ oder „Passwort“ sein wird. Wie Sie sehen können, ist dies ein direkter Durchgang von der Direktivenverwendung zur Direktivenvorlage. Das Platzhalter Wert funktioniert auf genau die gleiche Weise, außer natürlich, dass es alles sein kann, was Sie wollen. Das des Modells Das Attribut definiert die Bindung zwischen der Variablen im äußeren Gültigkeitsbereich (dem des Controllers) und dem isolierten Gültigkeitsbereich unserer Direktive. Grundsätzlich bedeutet dies, dass, wenn der Benutzer einen Wert in das Eingabefeld eingibt, dieser Wert automatisch auf die Variable des Controllers angewendet wird, wie in der Direktive Usage angegeben.

JavaScript

Hier ist der Angular-Code zum Einrichten der Fokustextdirektive sowie des Controllers für unsere Testseite. Um Verwirrung zu vermeiden, würde ich den Controller und die Direktive in separate Dateien aufteilen, wie es die Best Practice von Angular ist. Der Kürze halber habe ich das gesamte Skript in einem Abschnitt zusammengefasst.

var app = angular.module("demo", []);

app.controller("textDemo", function($scope) {
  $scope.value = "";
});

app.directive("text", function() {
  return {
    restrict: "E",
    templateUrl: "templates/focus.html",
    scope: {
      type: "@",
      placeholder: "@",
      ngModel: "="
    },
    link: function(scope, element) {
      $(element).on("focus", "input", function() {
        $(element).addClass("focus");
      });

      $(element).on("blur", "input", function() {
        $(element).removeClass("focus");
      });
    }
  }
});

Hier geht es um drei Dinge. Zuerst erstellen wir die Angular JS-Anwendung. Angular verfügt über die sehr nützliche Fähigkeit, Abhängigkeiten einzufügen. Da wir in diesem kurzen Beispiel keine Abhängigkeiten haben, ist der zweite Parameter für das Modul nur ein leeres Array. Zweitens definieren wir den Controller, der die gesamte Logik zum Rendern der Ansicht verwaltet. Unser Controller-Bereich hat nur eine Variable (Name), die an das Wertefeld unserer Direktive gebunden ist. Schließlich haben wir die Direktivendefinition selbst. Es ist darauf beschränkt, ein Element über die zu sein restrict: "E" Möglichkeit.

Danach folgt der Speicherort des HTML-Templates und dann die Deklaration des isolierten Geltungsbereichs. Angular JS bietet eine Reihe verschiedener Bereichsoptionen, aber ich habe festgestellt, dass der isolierte Bereich am häufigsten vorkommt. Wenn Sie die Bereichsoption ganz weglassen, hat die Direktive Zugriff auf den übergeordneten Bereich. Das Erstellen des Bereichs wie wir es getan haben bedeutet, dass wir nur Zugriff auf den Bereich der Direktive haben und nichts darüber hinaus, außerhalb der angegebenen Bindungen, wie Typ, Platzhalter und ngModel in unserem Beispiel.

Endlich haben wir eine kompilieren -Funktion, mit der wir Aktionen für das HTML-Element der Direktive ausführen können. In unserem Fall verbinden wir Ereignishandler, um die Fokusklasse anzuwenden und zu entfernen, wenn das Element fokussiert bzw. unscharf ist. Dies ermöglicht es uns, die Fokusanimationen zu rendern.

CSS

@spacing:10px;
@select-colour:#2875C7;

.vertical-centre (@height) { height:@height; line-height:@height !important; display:inline-block; vertical-align:middle; }

text {
  float:left;
  display:block;
  width:250px;
  border:solid 1px #AAA;
  margin-right:15px;
  
  div.text-container {
    float:left;
    width:100%;
    text-align:inherit;
    
    >input {
      float:left;
      width:100%;
      -webkit-appearance:none;
      text-align:inherit;
      padding:@spacing;
      border:none;
      font-size:0.875em;
      background:white;
      outline:none;
      border-box:box-sizing;
      border-radius:3px;
      transition:background ease 250ms;
    }
    
    >div.focus {
      float:left;
      width:100%;
      margin-top:-1px;
      position:relative;
      height:1px;
      background:transparent;
      border-color:transparent;
      
      >div {
        position:absolute;
        z-index:2;
        width:100%;
        transform:scale(0, 1);
        height:2px;
        margin-top:-1px;
        background:@select-colour;
        transition:all ease 250ms;
      }
    }
  }

  &.focus {
    input {
      background:#DEE9FA !important;
    }
    div.focus>div {
      transform:scale(1, 1) !important;
    }
  }
  &.error {
    div.focus>div {
      background:red !important;
    }
  }
  &.focus.error {
    input {
      background:rgba(255, 0, 0, 0.125) !important;
    }
  }
}

Die ersten paar Zeilen definieren einige Variablen und Mixins, die wir für den Rest der CSS-Regeln verwenden werden. Bemerkenswert ist die vertikale Mitte mixin, mit dem wir alles vertikal zentrieren können, wenn wir die Höhe kennen. Danach richten wir nur das Erscheinungsbild des Fokus-Textfelds ein. Zur Positionierung verschieben wir die Fokusleiste um ein Pixel nach oben, um den unteren Rand des Textfelds zu verdecken. Es gibt zwei Animationen, die auftreten, wenn ein Textfeld den Fokus erhält: Erstens breiten wir die Fokusleiste über den unteren Rand der Eingabe aus, und zweitens blenden wir den Hintergrund der Eingabe blau (oder rot, falls vorhanden) aus fehleranfällig).

Die erste wird mit der erreicht transformieren: skalieren Regel. Die Umwandlung der Skalierung in (0, 1) gibt an, dass die Breite des Elements als Null gerendert werden sollte, während die Höhe 100 % betragen sollte, was unsere Standardeinstellung ist. Beim Fokussieren ändert sich die Skala auf (1, 1), was anzeigt, dass die Breite wieder auf 100 % springen soll. Es ist animiert, weil wir ein haben Überleitung eingestellt für die verwandeln Eigentum. Der Hintergrund wird auf die gleiche Weise ausgeblendet, indem a hinzugefügt wird Überleitung zum Hintergrund Eigenschaft des Eingabeelements.

Notiz: Das obige CSS berücksichtigt für einige der neueren CSS-Regeln keine Herstellerpräfixe. Dinge wie Border-Radius, Box-Sizing, Transform und Transition erfordern alle eine Vielzahl von Anbieter-Präfixen, um mit allen gängigen Browsern kompatibel zu sein.

Fazit

Und das ist es! Wie ich oben erwähnt habe, habe ich eine Demoseite zusammengestellt, die das Textfeld in seiner endgültigen Form zeigt. Du kannst es sehen hier. Danke fürs Lesen!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *