W pierwszym poradniku chciałbym pokazać prosty sposób na wykonanie pewnego usprawnienia naszego formularza. W tym wypadku będzie to formularz kontaktowy, bardzo prosty - tylko z polem do wpisania treści. Wykorzystamy tutaj bibliotekę jQuery. Zrobimy system który sprawdza, czy wiadomość nie jest za krótka, bądź za długa (sprawdzanie czy nie jest zbyt długa przydaje się w bazach danych). Jeżeli wiadomość będzie zła - wyświetlimy informację.
Na początku zajmiemy się prostym formularzem HTML, stylami CSS i naszym okienkiem. Jeżeli chodzi o wygląd okienka - możecie to modyfikować dowolnie. Ja, jako że nie jestem zbyt dobry w grafice, zrobiłem prosty styl.
W przykładzie, style CSS wpisałem do pliku index.htm, aby nie "rozdrabniać" kodu na części, jednak dobrym zwyczajem jest umieszczanie ich w osobnym pliku.
Tak będzie wyglądał nasz jeszcze niezaprogramowany szablon:
<html> <head> <title>jQuery Windows</title> <style type="text/css"> <!-- #notifyback { position: fixed; top: 30%; left: 0; right: 0; width: 500px; margin: 0 auto; padding: 10px 10px 10px 10px; text-align: center; -webkit-radius: 8px 8px 8px 8px; -moz-border-radius: 8px 8px 8px 8px; -o-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; background-color: rgba(82, 82, 82, 0.699219); z-index: 999999; display: none; font-size: 17px; font-family: Tahoma, sans-serif; color: #3C3C3C; } #notifymain { border: 2px solid #FFDA3F; background-color: #FFE88E; padding: 5px 10px; } input#close { width: auto; height: auto; padding: 5px 10px; background: #6D84B4; color: white; font-weight: bold; border: 1px solid #3B5998; -webkit-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; cursor: pointer; } input#close:hover { background: #6D84E0; } --> </style> </head> <body> <div id="notifyback"> <div id="notifymain"> <h2>Błąd</h2> <p>Treść wiadomości nie może być; krótsza niż 5 znaków i dłuższa niż 65535 znaków.</p> <p><input type="button" id="close" value="OK" /></p> </div> </div> <h1>Formularz kontaktowy</h1> <form action="#" method="POST"> <p>Treść:<br /><textarea name="text" id="text"></textarea></p> <p><input type="submit" id="submit" value="Wyślij" /></p> </form> </body> </html>
Teraz czas zająć się samym jQuery. Oczywiście na początku musimy pobrać tę bibliotekę ze strony www.jquery.com. Następnie po znaczniku dodajmy sobie ją do pliku i wpiszmy podstawowe elementy skryptu:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function() { //tutaj znajdzie się nasz kod właściwy }); --> </script>
Ustalmy, że gdy treść wiadomości jest krótsza niż 5 lub dłuższa niż 65535 znaków, nie można jej wysłać. Pojawia się natomiast wiadomość w oknie. Będzie za to odpowiedzialny następujący kod:
$('input#submit').click(function() { var text = $('textarea#text').val(); if(text.length < 5 || text.length > 65535) { $('div#notifyback').css('display', 'block'); return false; } }); $('input#close').click(function() { $('div#notifyback').fadeOut(300); });
Gdy klikniemy na przycisk "Wyślij", zmienna text przyjmuje wartość treści wiadomości. Następnie jest ona sprawdzana. Jeżeli nie spełni wymagań to zostanie wyświetlona wiadomość, a akcja wysyłania zostanie anulowana. Natomiast gdy klikniemy na przycisk "OK" w okienku, nasze powiadomienie zniknie.
Cały nasz kod przyjmie teraz taką postać:
<html> <head> <title>jQuery Windows</title> <style type="text/css"> <!-- #notifyback { position: fixed; top: 30%; left: 0; right: 0; width: 500px; margin: 0 auto; padding: 10px 10px 10px 10px; text-align: center; -webkit-radius: 8px 8px 8px 8px; -moz-border-radius: 8px 8px 8px 8px; -o-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; background-color: rgba(82, 82, 82, 0.699219); z-index: 999999; display: none; font-size: 17px; font-family: Tahoma, sans-serif; color: #3C3C3C; } #notifymain { border: 2px solid #FFDA3F; background-color: #FFE88E; padding: 5px 10px; } input#close { width: auto; height: auto; padding: 5px 10px; background: #6D84B4; color: white; font-weight: bold; border: 1px solid #3B5998; -webkit-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; cursor: pointer; } input#close:hover { background: #6D84E0; } --> </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function() { $('input#submit').click(function() { var text = $('textarea#text').val(); if(text.length < 5 || text.length > 65535) { $('div#notifyback').css('display', 'block'); return false; } }); $('input#close').click(function() { $('div#notifyback').fadeOut(300); }); }); --> </script> </head> <body> <div id="notifyback"> <div id="notifymain"> <h2>Błąd</h2> <p>Treść wiadomości nie może być; krótsza niż 5 znaków i dłuższa niż 65535 znaków.</p> <p><input type="button" id="close" value="OK" /></p> </div> </div> <h1>Formularz kontaktowy</h1> <form action="#" method="POST"> <p>Treść:<br /><textarea name="text" id="text"></textarea></p> <p><input type="submit" id="submit" value="Wyślij" /></p> </form> </body> </html>
Mam nadzieję, że choć trochę kogoś z Was zainteresowałem i pomogłem. W wielu przypadkach, artykuł ten, powinien być Wam przydatny.
Zobacz przykład | Pobierz Demo
