Wprowadzenie
Reakcje są bardziej wyraziste w porównaniu z prostymi przyciskami „lubię i nie lubię”. Za pomocą reakcji użytkownik może łatwo wyrazić swoje myśli, ponieważ emotikony są w zasadzie sposobem na pokazanie emocji. Z drugiej strony, jeśli użyjemy przycisku lubię i nie lubię, użytkownik nie może pokazać dokładnej emocji. Używając emotikonów możemy uczynić naszą stronę bardziej wyrazistą dla użytkownika.
Cele bloga
Na tym blogu znajdziesz łatwy i szybki sposób na zaimplementowanie funkcjonalności Reactions. Po przejrzeniu bloga będziesz mógł stworzyć system reakcji dla swojej strony internetowej, taki sam jak przycisk Lubię to na Facebooku.
Pracujący
Będzie jeden przycisk Like i pozostałe przyciski Reaction. Po zaznaczeniu przycisku Like, wyświetlą się przyciski reakcji. JQuery będzie używany do obsługi naciśnięć przycisków reakcji. Po dotknięciu przycisku reakcji, żądanie Ajax jest wysyłane na stronę like.php. Logika zapisywania/aktualizowania danych w bazie danych może być napisana na stronie obsługi. Po ponownym dotknięciu tekstu reakcji reakcja zostaje cofnięta i tym razem wysyłamy Ajax na stronę undo_like.php. Cała funkcjonalność pokazywania/ukrywania przycisków reakcji i animacji jest dodawana przez JavaScript i CSS.
Tworzenie struktury HTML
Zanim zaczniemy pracować nad logiką, będziemy musieli stworzyć układ. Kod HTML układu jest następujący:
Reakcje na Facebooku Reakcje na Facebooku Tak jak Knowband i 4.3.0k innych
Dodawanie stylu
Używamy dwóch plików CSS (style.css i response.css), aby dodać stylizację na stronie.
Uwaga:� Pliki CSS można znaleźć w kompletnej kompilacji projektu.
Dodawanie funkcjonalności
Gdy nasz układ jest gotowy, możemy pracować nad funkcjonalnościami. Najpierw zajmiemy się dotknięciem przycisków Like i Reaction. W tym celu użyjemy jQuery i dodamy zdarzenia kliknięcia. Kod do dodania zdarzeń kliknięcia znajduje się poniżej –
// Dodanie zdarzenia kliknięcia, gdy tylko dokument będzie gotowy $(document).ready(function () { // Dodanie zdarzenia kliknięcia na przycisku reakcji przy użyciu nazwy klasy $(.emoji").on("click ", function() { // jak kliknięcie // Tu będziemy pisać kod, który będzie uruchamiany po naciśnięciu przycisku reakcji }); });
W centrum uwagi przycisku reakcji wyślemy żądanie Ajax na stronie php. Żądanie Ajax jest podane poniżej –
// Wysłanie żądania Ajax na stronie handlera (like.php) w celu wykonania operacji na bazie danych $.ajax({ type: "POST", url: "php/like.php", data: "", success: function (odpowiedź) { // Ten kod jest uruchamiany po pomyślnym wykonaniu Ajax } })
Następnie będziemy musieli stworzyć stronę obsługi. Może to być prosty plik php.
Uwaga: Użytkownik może dokonywać zmian w bazie danych w pliku handlera zgodnie z wymaganiami. Cokolwiek jest zwracane/drukowane w tym pliku, jest zwracane do żądania Ajax i możemy odpowiednio zaktualizować układ. Tutaj dodaliśmy kod do aktualizacji układu, aby pokazać aktualnie zapisaną reakcję. Pełny kod pliku response.js jest następujący:
$(document).ready(function () { $(.emoji").on("click", function() { // Tutaj otrzymujemy reakcję, która jest podsłuchiwana za pomocą atrybutu data-reaction zdefiniowanego w main page var data_reaction = $(this).attr("data-reaction"); // Wysłanie żądania Ajax na stronie handler'a w celu wykonania operacji na bazie danych $.ajax({ type: "POST", url: "php/like.php ", data: "data_reaction=" + data_reaction, success: function (response) { // Ten kod zostanie uruchomiony po pomyślnym działaniu Ajax $(.like-details").html("Ty, Knowband i 10k innych") ; $(".reaction-btn-emo").removeClass().addClass('reaction-btn-emo').addClass('like-btn-' + data_reaction.toLowerCase()); $(".reaction- btn-text").text(data_reaction).removeClass().addClass('reaction-btn-text').addClass('reaction-btn-text-' + data_reaction.toLowerCase()).addClass("active") ; if (data_reaction == "Lubię") $(".like-emo").html(' '); w przeciwnym razie $(".like-emo").html(' '); } }) }); $(".reaction-btn-text").on("click", function () { // cofnij polubienie kliknięcia if ($(this).hasClass("active")) { // Wysyłanie żądania Ajax na stronie obsługi do wykonania operacji na bazie danych $.ajax({ type: "POST", url: "php/undo_like.php", data: "", success: function (response) { // Obsługa, gdy Ajax się powiedzie $(". reakcja-btn-text").text("Lubię").removeClass().addClass('reaction-btn-text'); $(".reaction-btn-emo").removeClass().addClass('reakcja -btn-emo').addClass("like-btn-default"); $(".like-emo").html(' '); $(".like-details").html("Knowband i 1k innych"); } }) } }) });
Podsumowanie
Możesz pobrać pełny projekt z następującej lokalizacji –
Kliknij tutaj, aby pobrać cały projekt
W tym samouczku nie omówiliśmy połączenia i operacji bazy danych, ponieważ logika bazy danych może się różnić w zależności od Twoich potrzeb. Za pomocą tego projektu możesz w prosty sposób zaimplementować na swojej stronie internetowej funkcjonalność reakcji taką samą jak Facebook.