https - Kurs HTML i CSS
Podcast HTML / #8 Formularze HTML...w prostym formularzu pocztowym nie jest bezpieczne. Szyfrowanie można uzyskać, używając protokołu SSL, poprzedzając adres skryptu na serwerze przez "https://". Pole wyboru (wielokrotny wybór) Umożliwia użytkownikowi wybór kilku bądź jednej odpowiedzi. Pole wyświetlane jest w postaci kwadratu, który można zaznaczyć i odznaczyć. Wprowadzenie pola: <input type="checkbox" name="nazwa" value="wartość">Opis pola. Wszystkie pola tego typu, dotyczące tego samego pytania, powinny mieć tę samą...
Aktualizacja / Data aktualizacji strony...JavaScript. W tym celu najpierw zapisz poniższy kod w dowolnym pliku z rozszerzeniem *.js - np. date.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ Date.prototype.date = function(format) { for (var i = 0, c = '', returner = '', formats = new Object(); i < format.length; i++) { c = format.charAt(i); if (c == '\\' && i + 1 < format.length) returner += format.charAt(++i)...
- Aktualizacja / System newsów
...kodem przedstawionym poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function News(days) { this.config = { ////////// // Konfiguracja: 'days': 0, // ilość dni wyświetlania newsów (0 = zawsze) // Ustawienia domyślne: 'author': '', // autor 'email': '', // e-mail 'img': '', // obrazek 'width...
- Galeria zdjęć HTML / Skrypt galerii zdjęć
...zdjęć, należy zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. gallery.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) * @version 2.6.4 */ function GalleryModel(items) { this.items = items || []; } GalleryModel.prototype.get = function(index) { var item = this.items[index]; if (!item) { return null; } return { title: item.getAttribute('data-gallery')...
- Przeglądarka zdjęć
...zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. przegladarka_zdjec.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function PrzegladarkaZdjec(id, zdjecia) { this.czas = 5; // czas przejścia w trybie pokazu slajdów [sek] this.id = id; this.zdjecia = zdjecia; var timerID = null; this.wyswietl = function(nr)...
- Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki
...nowy dokument. Wklej do niego poniższy kod i zapisz w pliku indeks.js (koniecznie użyj kodowania utf-8): /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Indeks(id, ramka) { this.id = id; if (typeof ramka == 'undefined') this.ramka = self; else if (typeof ramka == 'string') { if (ramka == '_blank') this.ramka = ''; else if (ramka == '_self') this.ramka = self...
- Wyszukiwarka / Wyszukiwanie tylko w polskim Internecie
<form action="https://www.google.pl/search" method="get"> <input type="text" name="q"> <input type="hidden" name="ie" value="utf-8"> <input type="hidden" name="lr" value="lang_pl"> <input type="submit" value="Szukaj"> </form> Przykład
- Wyszukiwarka / Wyszukiwanie w całym światowym Internecie
<form action="https://www.google.pl/search" method="get"> <input type="text" name="q"> <input type="hidden" name="ie" value="utf-8"> <input type="submit" value="Szukaj"> </form> Jeśli dokumenty w Twoim serwisie korzystają z innej strony kodowej niż utf-8, wstaw w wyróżnionym miejscu jej nazwę. Przykład
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj) { if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25; if (typeof czasZwin == 'undefined' || czasZwin < 0)...
- Menu drzewiaste / Skrypt menu drzewiastego
...{ text-decoration: underline; } Dodatkowo w tym samym katalogu utwórz plik tree.js i zapisz w nim: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Tree(id) { this.id = id; var url = unescape(window.location.href.replace(/#.*/, '')); var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, ''); this.click = function...