Kod oczywiście modyfikujecie do swoich potrzeb
Zaczynając od podstaw, to generatory kart postaci najlepiej tworzyć na Dodatkowych Stronach, które tworzymy w:
Administracja > Dodatki > Dodatkowe strony
Po założeniu takowej strony możemy zająć się kodem i dostosować go do naszych potrzeb.
A oto kod:
<form id="form" onsubmit="return false;"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="91%" id="AutoNumber1" height="1"> <title> Karta postaci </title> </head> <body> <div id="main"> <div id="lewo"> <form action="index.php" method="post"> <table border="0"> <tr><td class="prawy"> Nagłówek </td></tr> <tr><td class="lewy"> <input type="text" name="Nagłówek" size="75" id="n1" /></input> </td></tr> <tr><td class="lewy"> Wpisz: </td> <td><input type="text" name="Wpisz" /> </td></tr> <tr><td class="lewy"> Wybór: </td><td> <select name="Wybór"> <option>opcja 1</option> <option>opcja 2</option> <option>opcja 3</option> <option>opcja 4</option> </select> </td></tr> <tr><td class="lewy"> Bez zmiany: </td><td> <input type="text" disabled="disabled" name="Bez zmiany" value="Wpisane" /> </tr></td> <tr><td colspan="2"> <input type="submit" value="Zatwierdź" onclick="generator();" /> <br /> </td></tr> </table> </form> </div> <div id="prawo"> </div> </div> <script type="text/javascript"> function generator() { ////////////////////////////////// ////// USTAWIENIA SKRYPTU //////// ////////////////////////////////// // pamiętaj, że atrybut name pola formularza // jest jednocześnie nazwą wyświetloną w oknie // tekst wyświetlony na stronie nad elementami // można używać HTML, przed każdym " lub ' umieść \ (backslash) // cały tekst musi zostać umieszczony w jednej linijce tekst = ""; // USTAWIENIA WYGLĄDU STRONY // kolor tekstu (RGB lub angielska nazwa) kolor = "KOLOR_CZCIONKI"; // wielkość czcionki (wyrażona w px) wielkosc = "WIELKOŚĆ_CZCIONKI"; // tło strony (RGB lub angielska nazwa) // możesz podać tło obrazkowe, np.: #ffffff url() tlo = "#ffffff url(LINK_DO_OBRAZKA_TŁA)"; // rozmiary wyskakującego okna (bez cudzysłowiów) szerokosc = W_PX; wysokosc = W_PX; ////////////////////////////////// ///////// WŁAŚCIWY KOD /////////// ////////////////////////////////// form = document.getElementById("form"); ile = form.length; strona = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\""; strona += "\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">"; strona += "<html xmlns=\"http://www.w3.org/1999/xhtml\">"; strona += "<head>"; strona += "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" />"; strona += "<style type=\"text/css\">body { padding: 20px; color:" + kolor + "; font: " + wielkosc + " Verdana, sans-serif; background:" + tlo + "; } a { color:" + kolor + "; }</style>"; strona += "<title>"; strona += "Generator kart postaci"; strona += "</title>"; strona += "</head>"; strona += "<body>"; strona += tekst; for (i = 0; i < (ile - 1); i++) { nazwa = form.elements[i].name; wartosc = form.elements[i].value; strona += nazwa + ": " + wartosc + "<br />"; } strona += "<br />"; strona += "</body>"; strona += "</html>"; ustawienia = "width = " + szerokosc + ", height = " + wysokosc + ", left = 50, top = 50, location = no"; window1 = window.open("", "Nowe okno", ustawienia); window1.document.write(strona); form.reset(); } </script> </body> </html>
Jak widać jest to generator rozróżniający cztery metody nanoszenia tekstu do nowej karty:
- Nagłówek - czyli po prostu tekst, który zostanie wpisany, a nie jest wyznacznikiem atrybutu, np. posiadanej magii przez gracza.
- Wpisz - jest to typowy sposób wprowadzenia tekstu do naszej karty, poprzez wprowadzenie go przez użytkownika bezpośrednio. Jednak posiada on dwa pola, w którym jeden jest wyznacznikiem co to ma opisać, np. Imię , a drugie to tego opis, np. Damian.
- Wybór - jest to opcja ograniczająca nam nieco możliwy do wpisania tekst, ponieważ możemy tylko dokonać wyboru, miedzy istniejącymi opcjami. Jednak posiada on dwa pola, w którym jeden jest wyznacznikiem co to ma opisać, np. Płeć , a drugie to co nam to opisuje, za pomocą tego, co możemy wybrać, np. Mężczyzna lub Kobieta.
- Bez zmiany - jest to opcja całkowicie ograniczająca nam możliwy do wpisania tekst, ponieważ nie możemy dokonać wyboru, miedzy istniejącymi opcjami, ani wpisać samemu. Jednak to pole także posiada dwa pola, w którym jeden jest wyznacznikiem co to ma opisać, np. Ranga , a drugie to co nam to opisuje, za pomocą tego, co nam zostało przypisane np. Nowicjusz
Istnieje pewne ale jeśli chodzi o Nagłówki. Jak widzicie w kodzie są im przypisywane pewne zmienne ( id ) w naszym przypadku jest to "n1". Istnieje ona w celu zablokowania możliwości wpisania tekstu przy zmiennej. Aby spełniała ona swoją powinność, musimy zablokować tą opcją, poprzez wstawienie takiego kodu do stopki:
<style type="text/css"> input#n1 { display: none; } </style>
W przypadku nie korzystania z nagłówka, ten kod jest zbędny.
Gdy już utworzymy odpowiednio skonfigurowany generator, nie zapomnijmy dodać gdzieś odnośnika do niego, ponieważ jeśli o tym zapomnimy, to dla zwykłych graczy będzie on niewidzialny (nie będą o nim wiedzieć). Możemy to zrobić poprzez podanie linku przy wątku do zakładania Kart Postaci albo dodać go jako dodatkowe odnośnik w menu.
No i o to jest screen, jak wygląda taki przykładowy generator:
EDIT:
W czym jest on lepszy od przeciętnego skryptu HTML?
Otóż HTML daje nam możliwości tworzenia tabeli i ustalania wyglądu strony na której jest generator, zaś nie daje zbytnich możliwości co do modyfikacji karty pojawiającej się po kliknięciu przycisku 'Zatwierdź'.
Dzięki wykorzystaniu, w tym kodzie, języka JS, możemy swobodnie edytować tę kartę.
Ostatnio edytowany przez Baczus (01-08-2013 00:29)
Offline