Generator kart postaci

Rudik · 2010-11-03 23:37:19

Stworzyłem generator KP, który działa prawie tak samo jak ten Mangela (tzn. wizualnie tak samo, ale różnie się kodem).
W generatorze tym nie musimy pobierać z formularza ręcznie wszystkich wartości, lecz są one pobierane automatycznie (tak samo jak ilość pól w formularzu).
Czyli w kodzie forum umieszczamy formularz HTML, który ma mieć taką strukturę:

<form id="form" onsubmit="return false;">
<input type="text" name="Imie" /> Imie<br />
<input type="text" name="Nazwisko" /> Nazwisko<br />
<input type="text" name="Wiek" /> Wiek<br />
<input type="submit" value="Potwierdź" onclick="generator();" />
</form>

Oczywiście pola możemy sobie dopasowywać do własnych potrzeb.
Pole typu submit musi być za wszystkimi innymi polami

Tyle jednak, że atrybut name przy każdym polu jest jednocześnie wartością wyświetlaną w wyświetlonym oknie (czyli np. powyższy kod zwróci okno z treścią:

Imie: wpisane imie
Nazwisko: wpisane nazwisko
Wiek: wpisany wiek

: (dwukropek) dodawany jest automatycznie.

A teraz kod JS:

<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 = "Oto Twoja karta postaci<br />Wklej ją <a href=\"http://www.rudik.boo.pl\">tu</a><br /><br />";

// tekst wyświetlony na stronie pod elementami
tekst2 = "Oto Twoja karta postaci<br />Wklej ją <a href=\"http://www.rudik.boo.pl\">tu</a><br /><br />";

// USTAWIENIA WYGLĄDU STRONY

// kolor tekstu (RGB lub angielska nazwa)
kolor = "#000000";

// wielkość czcionki (wyrażona w px)
wielkosc = "11px";

// tło strony (RGB lub angielska nazwa)
// możesz podać tło obrazkowe, np.: #ffffff url(adres_tła)
tlo = "#ffffff";

// rozmiary wyskakującego okna (bez cudzysłowiów)
szerokosc = 500;
wysokosc = 500;




//////////////////////////////////
///////// 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 += tekst2;
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>

W części Ustawienia skryptu możemy sobie dopasować wygląd i treść dodatkową okna do własnych potrzeb.

Jak widać, nie musimy już wpisywać każdej wartości pola do wyskakującego okna, tylko dzieje się to automatycznie.

Ostatnio edytowany przez Rudik (2010-11-04 16:50:01)

Asamoto · 2010-11-04 16:31:28

Wielkie dzięki! Rudik A jak zrobić by coś pojawiało się pod tekstem? Bo nie mogę jakoś tego znaleźć, a nie znam się na JS

Rudik · 2010-11-04 16:50:29

Ok dodałem już taką opcję.
Aktualizacja w 1. poście.

Asamoto · 2010-11-04 16:53:07

Dzięki!

Dominohaker · 2010-12-11 14:46:05

Gdzie to się wkleja.?

Nelgor · 2010-12-11 14:52:19

Tak jak jest, tyle że bez rzeczy za '//'?

Dominohaker · 2010-12-11 15:31:03

Napisz na gg o co ci chodzi

16217179

Rudik · 2010-12-11 15:47:21

To wszystko (cały kod, razem z komentarzami, czyli "rzeczami za //") wklejasz do pola obsługującego HTML.
Kod JS (między znacznikami <script>) można umieścić w innym miejscu na danej stronie niż kod formularza (np. w ogłoszeniu).

Dominohaker · 2010-12-12 14:17:12

A może wejdziesz na forum i pomożesz.?

ten1000 · 2010-12-12 17:09:01

A może zaczniesz myśleć?
Rudik wszystko ci opisał.

Rudik · 2010-12-12 17:22:04

W 1. poście masz wszystko opisane.
Wystarczy wkleić kod JS (i dopasować do swoich potrzeb) i dorobić sobie własne pola formularza.

Sammael · 2011-08-22 17:42:22

Witam!

Wycentrowałem sobie pola typu: "Imie" (wpisałem pomiędzy to center w HTML) i teraz te tabele nie są równe.
Jakbym mógł to naprawić?

AdaseK · 2011-08-22 17:47:20

@up człowieku po co temat odkopujesz?Nie lepiej napisać w dziale problemy i pytania?
Jeśli chcesz pomocy przy generatorze napisz do mnie na gg 7785096

Sammael · 2011-08-22 19:42:19

W czym problem, żeby nie odkopywać? Po co zakładać kolejny wątek, skoro można tutaj napisać?
Nie rozumiem tutaj czegoś. To w końcu forum dyskusyjne - napisać w starym temacie, to jakby kogoś zabić... Bezsens.

Marox234 · 2011-08-22 19:55:27

On ma rację. Nie widzę przeszkód, żeby napisać tutaj swój problem. W końcu po co zaśmiecać forum? Sammael, nie przejmuj się, bo dobrze zrobiłeś.
A teraz do tematu.
Zamknąłeś kod? Tak jak poniżej?

<center><input type="text" name="Imie" /> Imie<br /></center>

Kiedyś też miałem problemy z tabelami, bo zapominałem zamykać przekładni. Jeżeli nadal jednak jest problem, to raczej Tylko Rudik Ci pomoże.

Ostatnio edytowany przez Marox234 (2011-08-22 19:57:20)

Oficjalne forum pomocy serwisu PUN.pl

#1 2010-11-03 23:37:19

Generator kart postaci

#2 2010-11-04 16:31:28

Odp: Generator kart postaci

#3 2010-11-04 16:50:29

Odp: Generator kart postaci

#4 2010-11-04 16:53:07

Odp: Generator kart postaci

#5 2010-12-11 14:46:05

Odp: Generator kart postaci

#6 2010-12-11 14:52:19

Odp: Generator kart postaci

#7 2010-12-11 15:31:03

Odp: Generator kart postaci

#8 2010-12-11 15:47:21

Odp: Generator kart postaci

#9 2010-12-12 14:17:12

Odp: Generator kart postaci

#10 2010-12-12 17:09:01

Odp: Generator kart postaci

#11 2010-12-12 17:22:04

Odp: Generator kart postaci

#12 2011-08-22 17:42:22

Odp: Generator kart postaci

#13 2011-08-22 17:47:20

Odp: Generator kart postaci

#14 2011-08-22 19:42:19

Odp: Generator kart postaci

#15 2011-08-22 19:55:27

Odp: Generator kart postaci

Stopka