Fort.js — prosty skrypt do tworzenia nowoczesnych formularzy

03 czerwca 2014
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Fort.js to ciekawy i bardzo prosty skrypt służący do wyświetlania eleganckiego wskaźnika stopnia wypełnienia formularza internetowego na stronie.

Efekt użycia skryptu Fort.js

Efekt użycia skryptu Fort.js

Jak używać

Aby wyświetlić pasek postępu Fort.js na stronie, należy dołączyć w jej nagłówku dwa pliki: fort.min.js i fort.min.css, umieścić na początku dokumentu element <div class="top"> </div> oraz wywołać jedną z czterech funkcji:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Demo for Fort.js">
<meta name="viewport" content="width=device-width">
<title>Fort.js</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fort.css">
<script src="fort.js"></script>
</head>
<body>

<div class="top"> </div>

<form name="form" action="#">
  <div class="form">
    <input type="text" name="text" required placeholder="Imię" autocomplete="off">
    <input type="text" name="text" required placeholder="Nazwa użytkownika" autocomplete="off">
    <input type="password" name="password" required placeholder="Hasło" autocomplete="off">
    <input type="submit" class="button" title="Zapisz" value="Wyślij">
  </div>
</form>

<script>
    solid();
</script>

</body>
</html>

Ustawienia

Powyżej przedstawiony jest najprostszy możliwy kod, który oczywiście w przeglądarce nie prezentowałby się zbyt elegancko. Dlatego najlepiej jest zajrzeć do plików CSS oraz przykładowych stron internetowych dołączonych do pakietu plików do pobrania, aby zobaczyć, co więcej można zrobić.

Aktualnie w skrypcie dostępne są cztery funkcje efektów:

  • solid()
  • gradient()
  • sections()
  • flash()

Wypróbuj je, aby dowiedzieć się, jak działają.

Pobieranie i licencja

Skrypt jest dostępny na licencji MIT i jego kod źródłowy można pobrać z serwisu GitHub: https://github.com/Colourity/Fort.js/. Na stronie głównej znajduje się też trochę bardziej szczegółowa instrukcja obsługi.

1 komentarz

  1. Pusty DIV i semantyka kodu źródłowego leży… Czy naprawdę nie dało się takiej pierdółki jak pasek postępu napisać tak, aby owy DIV tworzył się automatycznie już na poziomie JS?

    Odpowiedz

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *