- Graficzki na pun.pl http://www.graficzki.pun.pl/index.php - Kody http://www.graficzki.pun.pl/viewforum.php?id=57 - [JS/HTML/CSS]Generator Kart Postaci http://www.graficzki.pun.pl/viewtopic.php?id=175 |
Baczus - 01-08-2013 00:06 |
Kod oczywiście modyfikujecie do swoich potrzeb ;) 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: Kod:<style type="text/css"> input#n1 { display: none; } </style> W przypadku nie korzystania z nagłówka, ten kod jest zbędny. |