Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Design formularza
Forum PHP.pl > Forum > Po stronie przeglądarki
Dominik137
18.12.2012, 19:01:40
Witam zwracam się z prośbą do forumowiczów, zwłaszcza tych płci pięknej o pomoc nad wyglądem mojego formularza (dodaje ostrzeżenia...). Jako, że bardziej jestem "programistą" niż grafikiem to mam problem:D
Szybko wytłumaczę co w skrypcie jest..Po wybraniu Dodaj ostrzeżenie wczytuje się formularz a w nim jest możliwość dodania kilku użytkowników, których to z kolei można w osobnym oknie wybrać tak jakby z listy e-mailowej. Na głównej stronie znajduje się paskudne zielone tło na którym oprócz belki menu ma się pojawić lista zablokowanych graczy...uff.
Z góry przepraszam, za sieczkę w kodzie, ale na razie to prototyp i robię bez ładu i składu - więc komentarzy też nie ma:D
[PHP] pobierz, plaintext 
  1. <?php
  2. define('LIMITBAN',5);
  3. $powody = array('test1','test2');
  4. function add_warn_form($powody) {
  5. $zm='
  6. <form method="POST" action="">
  7. 	<table>
  8. 		<tr>
  9. 			<td>Dla</td>
  10. 			<td><div id="add_warn_form_dla"></div>
  11. 			<p style="text-align:center;"><!-- <button onClick="add_warn_form_dla(); return false;">Dodaj</button>-->
  12. 			<img class="button" src="img/add.png" border="0" onClick="add_warn_form_dla(); return false;"></p></td>
  13. 		</tr>
  14. 		<tr>
  15. 			<td>Wartość</td>
  16. 			<td>
  17. 				<table style="text-align:center;">
  18. 					<tr>';
  19. 					for($i=1;$i<=LIMITBAN;$i++) {
  20. 						$zm.='<td>'.$i.'</td>';
  21. 					}
  22. 					$zm.='
  23. 					</tr>
  24. 					<tr>';
  25. 					$a = ' checked';
  26. 					for($i=1;$i<=LIMITBAN;$i++) {
  27. 						$zm.='<td><input type="radio" name="wartosc" value="'.$i.'"'.$a.'></td>';
  28. 						$a='';
  29. 					}
  30. 					$zm.='
  31. 					</tr>
  32. 				</table>
  33. 			</td>
  34. 		</tr>
  35. 		<tr>
  36. 			<td>Powód</td>
  37. 			<td><select name="powod" size="5">';
  38. 				foreach ($powody as $powod) {
  39. 				$zm .= '<option>'.$powod.'</option>';
  40. 				}
  41. 				$zm .='
  42. 				<option value="0">Inny...</option>
  43. 				</select>
  44. 				<div id="powod_other" style="display:none;"><textarea name="powod_other"></textarea></div>
  45. 			</td>
  46. 		</tr>
  47.  
  48. 	</table>
  49. </form>';
  50. return $zm;
  51. }
  52. function browser() {
  53. return 'Szukaj <input type="text" name="szukaj"><br><div id="browser_elemnts"></div>';
  54. }
  55. function get_browser_elements($fraza) {
  56. $dane = array('Dominik','Damian','Daniel','Adam','Monika','Andżelika','Michał','Mateusz','Marek','Ala','Ewa','Jacek','Jarek','Zygmunt','Darek');
  57. 	if($fraza != '') {
  58. 		$dane2 = array();
  59. 		foreach ($dane as $login) {
  60. 			if(stripos($login,$fraza) !== FALSE) {
  61. 			$dane2[] = $login;
  62. 			}
  63. 		}
  64. 		return $dane2;
  65. 	}
  66.  
  67. return $dane;
  68. }
  69. if($_GET['cmd'] == 'get_browser_elements') {
  70. $data = get_browser_elements($_GET['fraza']);
  71. 	$ilosc = count($data);
  72. 	if($ilosc > 0) {
  73. 		if($ilosc > 10) {
  74. 		echo'<table border="0">';
  75. 			$lp = 0;
  76. 			echo '<tr><td>';
  77. 			foreach ($data as $login) {
  78. 				$lp++;
  79. 				$zm = '<a onClick="select_user(\''.$_GET['lp'].'\',\''.$login.'\'); return false;">'.$login.'</a><br>';
  80. 				if($lp == 11) {
  81. 				echo '</td><td>'.$zm;
  82. 				}else{
  83. 				echo $zm;
  84. 				}
  85.  
  86. 			}
  87. 		echo'</td></tr></table>';
  88. 		}else{
  89. 			foreach ($data as $login) {
  90. 			echo '<a onClick="select_user(\''.$_GET['lp'].'\',\''.$login.'\'); return false;">'.$login.'</a><br>';
  91. 			}
  92. 		}
  93.  
  94.  
  95. 	}else{
  96. 	echo 'Nie znaleziono...';
  97. 	}
  98. 	exit;
  99. }
  100. ?>
  101.  
  102. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  103.  
  104. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl-pl" lang="pl-pl" dir="ltr">
  105.  
  106. <head>
  107.  
  108.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  109.  
  110.   <title>Prototyp Ostrzeżeń (Ecrosio)</title>
  111.  
  112. 	<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
  113. 	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
  114.     <script type="text/javascript" src="js/jquery.form.js"></script>
  115.     <script type="text/javascript" src="js/jquery.CKEditor.js"></script>
  116.     <script type="text/javascript" src="js/jquery.treeview.js"></script>
  117.     <script type="text/javascript" src="js/jquery.cookie.js"></script>
  118.     <script type="text/javascript" src="js/ui/jquery.tooltip.js"></script>
  119.  
  120.  
  121. <link rel="stylesheet" media="screen" type="text/css" href="css/datepicker.css" />  
  122. <link type="text/css" href="css/jquery.tooltip.css" rel="stylesheet" />
  123. <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
  124. <link rel="stylesheet" href="css/jquery.treeview.css" type="text/css" />
  125. <script type="text/javascript">
  126. var licznik = 0;
  127. function add_warn_form() {
  128. /* GDZIES TU UMIESCIC bind na zamkniecie okna dialog, by resetowal formularz
  129. tak jak w przypadku klikniecie przycisku Anuluj !!! */
  130. $("#add_warn").dialog({			
  131. 						title: 'Dodawanie ostrzeżenia',
  132. 						modal: true,
  133. 						resizable: false,
  134. 						draggable: true,
  135. 						width:500,
  136. 						buttons : {
  137. 							"Dodaj" : function() {
  138. 							  window.location.href = 'admin.php?actions=logout';
  139. 							},
  140.  
  141. 							"Anuluj" : function() {
  142.  
  143. 							  $(this).dialog("close");
  144. 							  $(this).html('<?php echo str_replace("\r\n",' ',add_warn_form($powody)); ?>');
  145. 							  licznik = 0;
  146. 							  add_warn_form_dla(); 
  147. 							}
  148.       }
  149.  
  150. });
  151. }
  152. function add_warn_form_dla() {
  153. licznik++;
  154. var div = $("<div>");
  155. div.attr("id","p_dla"+licznik);
  156. $("#add_warn_form_dla").append(div);
  157. var input = $("<input>");
  158. input.attr("name", "tab"+licznik);
  159. input.attr("type", "text");
  160. $(div).append('nazwa postaci ');
  161. $(div).append(input);
  162. $(div).append('<img class="button" src="img/find.png" border="0" onClick="browser('+licznik+'); return false;"><img class="button" src="img/delete.png" border="0" onClick="add_warn_form_dla_delete('+licznik+'); return false;">');
  163. }
  164. function add_warn_form_dla_delete(lp) {
  165. $('#p_dla'+lp).remove();
  166.  
  167. }
  168. function get_browser(lp) {
  169. $.ajax({
  170.         type: "GET",
  171.         url: 'warn.class.php?lp='+lp+'&cmd=get_browser_elements&fraza='+$("#browser input[name=szukaj]").attr("value"),
  172.         dataType: "html",
  173.             success: function(data) {
  174.                  $('#browser_elemnts').html(data);    
  175.  
  176.             }
  177. });
  178. }
  179. function browser(lp) {
  180. $("#browser").html('<?php echo str_replace("\r\n",' ',browser()); ?>');
  181. $("#browser input[name=szukaj]").attr("value",$("#p_dla"+lp+" input[name=tab"+lp+"]").attr("value"));
  182. $("#browser input[name=szukaj]").keyup(function() {
  183. get_browser(lp);
  184. });
  185. get_browser(lp);
  186.  
  187.  
  188. $("#browser").dialog({			
  189. 						title: 'Lista użytkowników',
  190. 						modal: true,
  191. 						resizable: false,
  192. 						draggable: true,
  193. 						width:500,
  194. 						buttons : {
  195.  
  196. 							"Anuluj" : function() {
  197.  
  198. 							  $(this).dialog("close");
  199.  
  200. 							}
  201.       }
  202.  
  203. });
  204. }
  205. function select_user(lp,login) {
  206.  
  207. $("#p_dla"+lp+" input[name=tab"+lp+"]").attr("value",login);
  208. $("#browser").dialog("close");
  209. }
  210.  
  211. $(document).ready(function() {
  212.  
  213. $('#add_warn').html('<?php echo str_replace("\r\n",' ',add_warn_form($powody)); ?>');
  214. add_warn_form_dla();
  215. $("#add_warn select[name=powod]").change(function() {
  216.  
  217. 	if($(this).val() == '0') {
  218. 	$("#powod_other").show();
  219. 	}else{
  220. 	$("#powod_other").hide();
  221. 	}
  222. });
  223. });
  224. </script>
  225. <style>
  226. body {
  227. margin: 0px;
  228. padding: 0px;
  229. background-color:silver;
  230. }
  231. #block {
  232. margin: 0 auto;
  233. padding: 10px;
  234. margin-top:20px;
  235. background-color:green;
  236. width:700px;
  237. height:500px;
  238. }
  239. #belka {
  240. width:100%;
  241. height:30px;
  242. background-color:silver;
  243. text-align:right;
  244. }
  245. #add_warn {
  246. font-size:12px;
  247. }
  248. #browser {
  249. font-size:12px;
  250. }
  251. .button {
  252. margin-top:5px;
  253. }
  254. .button:hover {
  255. cursor:pointer;
  256. border:1px solid green;
  257. background-color:red;
  258. }
  259. </style>
  260. </head>
  261.  
  262. <body>
  263. <div style="display:none;" id="add_warn"></div>
  264. <div style="display:none;" id="browser"></div>
  265. <div id="block">
  266. 	<div id="belka"><a href="#" onClick="add_warn_form()">Dodaj ostrzeżenie</a></div>
  267. </div>
  268. </body>
  269. </html>
[PHP] pobierz, plaintext

Pliki *.js, *.css i *.png itp. nie opublikowałem bo nie są istotne
Co sądzicie ? (jeśli chodzi o estetykę, chodź uwagi o estetykę kodu też przyjmę z chęciąbiggrin.gif)
Damonsson
18.12.2012, 19:07:08
Ten zielony rzeczywiście paskudny, koniecznie trzeba zmienić na inny...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.