Fort.js — prosty skrypt do tworzenia nowoczesnych formularzy
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
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.
30 grudnia 2014
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?