Overhang.js - wtyczka jQuery dla komunikatów powiadomień Dropdown

Jak denerwujące są te domyślne pola alertów JS? Czują się jak relikt z prymitywnej minionej epoki rozwoju sieci.

Obecnie możemy to zrobić dyskretne powiadomienia które dzielą te same informacje, ale nie przerywaj doświadczenia użytkownika. I to jest dokładnie to, co możesz zrobić overhang.js.

Ta darmowa wtyczka jQuery może dodaj niestandardowe paski powiadomień które spadają z góry ekranu. Oni są umieszczony przez CSS i animowane za pomocą JavaScript, więc mogą spaść ze stałego punktu na górze niezależnie od długości strony.

Możesz budować wiadomości automatyczne zamykanie po pewnym czasie, lub inni, którzy wymagać danych użytkownika.

Wiadomości mogą przekazuj sukces, niepowodzenie, błąd lub proste powiadomienia z informacjami o użytkowniku lub stronie. Wiadomości mogą również mieć własne przyciski tak / nie zadawać użytkownikom pytania, takie jak ostrzeżenie dotyczące JavaScript.

Istnieje nawet opcja tworzenia podpowiedzi rozwijane z polem wprowadzania. Byłoby to idealne rozwiązanie dla formularza opt-in.

Overhang.js obsługuje wszystkie główne przeglądarki obsługiwane przez jQuery i to także powered by jQuery UI dla animowanych funkcji.

Oprócz bibliotek jQuery i jQuery UI musisz także dołącz niestandardowy plik CSS z wtyczką. Możesz zawsze połącz to z arkuszem stylów swojej witryny zmniejszyć żądania HTTP.

Każde połączenie do zwis() metoda może weź dowolną liczbę parametrów. To są nazywa “opcje” i dają pełną kontrolę nad każdym polem powiadomień.

Możesz zmienić prędkość animacji, Trwanie, złagodzenie, i rozmiar / kolor pudełka, wraz z innymi funkcjami projektowymi.

Tutaj jest przykładowy urywek pokazując, jak to zrobić utwórz pole potwierdzenia:

 // Potwierdzenie $ ("body"). Overhang (type: "confirm", yesMessage: "Yes please!", NoMessage: "No thanks."); 

Możesz to zobaczyć dość proste i to nie wymaga wiele kodu jQuery.

Do pobierz kopię wtyczki, możesz odwiedzić repo na GitHub, gdzie możesz również przeglądać pliki źródłowe bezpośrednio. Lub, jeśli chcesz zobacz więcej przykładów na żywo udaj się na stronę Overhang.js..