it-swarm.com.de

Float-Beschriftungsmuster für ausgewählte Felder

Ich bin sicher, dass Sie alle auf dieses Muster gestoßen sind. Weiß jemand, ob es eine Dokumentation gibt, die Informationen darüber enthält, wie dieses Muster mit anderen Formularelementen verwendet werden kann, z. B. einem Auswahlfeld und nicht nur mit Texteingabeelementen?

Weitere Informationen zu diesem Muster: http://bradfrostweb.com/blog/post/float-label-pattern/

enter image description here

16
Kyle McBride

Ich habe die Float Pattern Demo geändert, um an einem Auswahlfeld zu arbeiten.

Als erstes habe ich dem HTML-Formular einen State-Wrapper , eine Beschriftung und ein Feld mit allen darin enthaltenen Status als Optionen hinzugefügt. Ich habe dem Text State ein Standardelement und eine leere Zeichenfolge für seinen Wert hinzugefügt. Auf diese Weise konnte ich leicht feststellen, ob es gegen eine tatsächliche Statusoption ausgewählt wurde.

Als nächstes habe ich das CSS geändert, indem ich zwei Stile eingefügt habe. option { color: black; } Und .watermark { color: #aaa }. Die erste Option ist standardmäßig schwarz. Die zweite Option wird verwendet, um die Optionsfarbe in ein Grau zu ändern, genau wie die Wasserzeichen auf den anderen Eingabeelementen, je nachdem, welches Standardelement ausgewählt ist oder nicht.

Als letztes musste ich die jQuery ändern, um das Auswahlfeld anzuschließen. Ursprünglich funktionierte dies so, dass eine Funktion namens checkval gebunden wurde, die die Sichtbarkeit des schwebenden Labels umschaltete und Listener an keyup, focus anhängte. und blur Ereignisse für alle input Elemente.

Ich brauchte eine Möglichkeit, das select einzubinden. Ich habe also den Selektor so geändert, dass er select enthält, sodass er zu $("input, select") wird. Als nächstes musste ich einen bestimmten Listener für das Ereignis select change anhängen, da dieser ausgelöst wird, wenn eine Auswahl getroffen wurde. Dann musste ich nur noch einen Code schreiben, der die zuvor erstellte Wasserzeichenklasse aus- und wieder einschaltete, je nachdem, ob der Wert des aktuell ausgewählten Elements einen Wert hatte oder nicht. Danach ruft es einfach die Funktion checkval auf, um die Sichtbarkeit auf der schwebenden Beschriftung des Auswahlfelds umzuschalten.

Ich habe es nicht in allen Browsern getestet, aber es scheint mir, dass es mit den anderen schwebenden Labels identisch ist und die Benutzererfahrung konsistent und sauber hält.

Genießen!

Siehe funktionierende CopePen-Demo


HTML

<div class="field-wrapper">
  <label for="fname">First Name</label>
  <input name="fname" placeholder="First Name" />
</div>

<div class="field-wrapper">
  <label for="lname">Last Name</label>
  <input name="lname" placeholder="Last Name" />
</div>

<div class="field-wrapper">
  <label for="city">City</label>
  <input name="city" placeholder="City" />
</div>

<div class="field-wrapper">
  <label for="state">State</label>
  <select name="State" placeholder="State"> 
    <option value="" selected="selected">State</option> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
    <option value="AZ">Arizona</option> 
    <option value="AR">Arkansas</option> 
    <option value="CA">California</option> 
    <option value="CO">Colorado</option> 
    <option value="CT">Connecticut</option> 
    <option value="DE">Delaware</option> 
    <option value="DC">District Of Columbia</option> 
    <option value="FL">Florida</option> 
    <option value="GA">Georgia</option> 
    <option value="HI">Hawaii</option> 
    <option value="ID">Idaho</option> 
    <option value="IL">Illinois</option> 
    <option value="IN">Indiana</option> 
    <option value="IA">Iowa</option> 
    <option value="KS">Kansas</option> 
    <option value="KY">Kentucky</option> 
    <option value="LA">Louisiana</option> 
    <option value="ME">Maine</option> 
    <option value="MD">Maryland</option> 
    <option value="MA">Massachusetts</option> 
    <option value="MI">Michigan</option> 
    <option value="MN">Minnesota</option> 
    <option value="MS">Mississippi</option> 
    <option value="MO">Missouri</option> 
    <option value="MT">Montana</option> 
    <option value="NE">Nebraska</option> 
    <option value="NV">Nevada</option> 
    <option value="NH">New Hampshire</option> 
    <option value="NJ">New Jersey</option> 
    <option value="NM">New Mexico</option> 
    <option value="NY">New York</option> 
    <option value="NC">North Carolina</option> 
    <option value="ND">North Dakota</option> 
    <option value="OH">Ohio</option> 
    <option value="OK">Oklahoma</option> 
    <option value="OR">Oregon</option> 
    <option value="PA">Pennsylvania</option> 
    <option value="RI">Rhode Island</option> 
    <option value="SC">South Carolina</option> 
    <option value="SD">South Dakota</option> 
    <option value="TN">Tennessee</option> 
    <option value="TX">Texas</option> 
    <option value="UT">Utah</option> 
    <option value="VT">Vermont</option> 
    <option value="VA">Virginia</option> 
    <option value="WA">Washington</option> 
    <option value="WV">West Virginia</option> 
    <option value="WI">Wisconsin</option> 
    <option value="WY">Wyoming</option>
  </select>
</div>



CSS

.field-wrapper 
{
  position: relative;
  margin-bottom: 20px;
}
label 
{
  position: absolute;
  top: -13px;
  left: 0;
  font-size: 11px;
  color: #aaa;
  transition: all 0.1s linear;
  opacity: 0;
  font-weight:b old;
}
label.on 
{
  color: #4481C4;
}
label.show 
{
  top: -15px;
  opacity: 1;
}
option
{
  color: black;
}
.watermark
{
  color: #aaa;
}
body 
{
  padding: 20px;
    /* the following line fixes a blink in chrome https://code.google.com/p/chromium/issues/detail?id=108025 */
  -webkit-backface-visibility: hidden;
}



JQUERY

$(function () 
{
  var onClass = "on";
  var showClass = "show";

  $("input, select")
    .bind("checkval", function () 
    {
      var label = $(this).prev("label");

      if (this.value !== "")
        label.addClass(showClass);

      else
        label.removeClass(showClass);
    })
    .on("keyup", function () 
    {
      $(this).trigger("checkval");
    })
    .on("focus", function () 
    {
      $(this).prev("label").addClass(onClass);
    })
    .on("blur", function () 
    {
        $(this).prev("label").removeClass(onClass);
    })
    .trigger("checkval");

  $("select")
    .on("change", function ()
    {
      var $this = $(this);

      if ($this.val() == "")
        $this.addClass("watermark");

      else
        $this.removeClass("watermark");

      $this.trigger("checkval");
    })
    .change();
});
4
Code Maverick

Das "Floating" ist nicht der wichtige Teil des Stils - was Sie hier haben, sind zwei Stilelemente:

  1. Der Feldtitel wird erst angezeigt, nachdem das Feld ausgefüllt wurde

  2. Blaue Markierung für das aktuelle Feld

Ich bin mir nicht sicher, um wie viel dieser Stil das Formular tatsächlich verbessert, aber für ein Multiple-Choice-Feld würden Sie dasselbe tun - Dropdown-Menü mit dem Titel, bis eine Option ausgewählt wird, und ein kleiner Titel darüber, der blau hervorgehoben wird wenn das Dropdown geöffnet ist.

2
Ofir

Bei aktiven Eingabeelementen kann ein "Halo-Burst" angezeigt werden, wenn das Auswahlfeld scharfgestellt oder bei Kontrollkästchen aktiviert wird usw.

0
taylorhayward