Administrative Formulare

Osbes · Jun 28, 2009

Dies ist eine derzeit unvollständige Vorlage für Formulare etc., welche nur von bestimmten Nutzergruppen zur Administration von XYZ gebraucht werden (z.B. Moderatoren).

http://www.united-forum.de/tools/jquery/testseite.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="de">
<head>
<title>Validation</title>
<link type="text/css" href="http://www.united-forum.de/tools/jquery/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="http://www.united-forum.de/tools/jquery/jquery.tablesorter.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.united-forum.de/tools/jquery/jquery.js"></script>
<script type="text/javascript" src="http://www.united-forum.de/tools/jquery/jquery.sprintf.js"></script>
<script type="text/javascript" src="http://www.united-forum.de/tools/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.united-forum.de/tools/jquery/jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://www.united-forum.de/tools/jquery/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://www.united-forum.de/tools/jquery/jquery.clock.js"></script>
<script type="text/javascript">
(function($)
{
	$.fn.validator = function(options)
	{
		if (!$(this).length)
		{
			return false;
		}
		
		var form = this;
		var option = $.extend({}, $.fn.validator.defaults, options);

		bindCheckAll();
		
		if(option.submit)
		{
			
			form.bind("submit.first", function (e)
			{
				option.event.focus = true;
				option.event.blur = true;
				option.event.change = true;
				option.event.keypress = true;
				option.event.click = true;
				
				bindCheckAll();
				$(this).unbind("submit.first");
			});

			form.submit(function(event)
			{
				checkAll();
				
				if($(".uf_error:not(:hidden)").length < 1)
				{
					option.submitHandler();
				}
				
				return false;
			});
		}
		
		form.bind("reset", function (e)
		{
			$(".uf_invalid", form).removeClass("uf_invalid");
			$(".uf_errormessage", form).parent().remove();
			$(".uf_error:not(:hidden)", form).hide();
			
			option.event.focus = false;
			option.event.blur = false;
			option.event.change = false;
			option.event.keypress = false;
			option.event.click = false;
			
			bindCheckAll();
			
			form.bind("submit.first", function (e)
			{
				option.event.focus = true;
				option.event.blur = true;
				option.event.change = true;
				option.event.keypress = true;
				option.event.click = true;
				
				bindCheckAll();
				$(this).unbind("submit.first");
			});
		});
		
		function getElementByNameAttr(name)
		{
			return $("[name=" + name + "]", form);
		}
		
		function bindCheckAll()
		{
			$.each(option.validate, function(name)
			{
				$.each(option.event, function(event, bind)
				{
					if(bind)
					{
						bindCheck(name, event);
					}
					else
					{
						$("[name=" + name + "]", form).unbind();
					}
				});
			});
		}
		
		function bindCheck(name, event)
		{
			var element = $("[name=" + name + "]", form);
			element.bind(event, function(e)
			{
				check($(this).attr("name"));
			});
		}
		
		function checkAll()
		{
			$.each(option.validate, function(name)
			{
				check(name);
			});
		}
		
		function check(name)
		{
			$.each(option.validate[name], function(rule, attr)
			{
				var ul = $("[title=" + name + "]", form);
				
				if(!option.rules[rule].func(form, name, attr))
				{
					option.displayErrorMsg(form, name, rule, $.sprintf(option.rules[rule].message, attr));
				}
				else
				{
					option.removeErrorMsg(form, name, rule);
				}
			});
		}
	}
	
	$.fn.validator.defaults = {
		validate: {},
		submit: true,
		event:
		{
			focus: false,
			blur: false,
			change: false,
			keypress: false,
			click: false
		},
		rules:
		{
			required: 
			{
				func:
					function (form, name)
					{
						if($.trim($("[name=" + name + "]", form).val()).length > 0)
						{
							return true;
						}
						else
						{
							return false;
						}
					},
				message: "Dieses Feld muss gefüllt sein."
			},
			minlength: 
			{
				func:
					function (form, name, minlength)
					{
						if($.trim($("[name=" + name + "]", form).val()).length < minlength)
						{
							return false;
						}
						else
						{
							return true;
						}
					},
				message: "Geben Sie bitte maximal %d Zeichen ein."
			},
			maxlength: 
			{
				func:
					function (form, name, maxlength)
					{
						if($.trim($("[name=" + name + "]", form).val()).length > maxlength)
						{
							return false;
						}
						else
						{
							return true;
						}
					},
				message: "Geben Sie bitte mindestens %d Zeichen ein."
			},
			rangelength: 
			{
				func:
					function (form, name, range)
					{
						var length = $.trim($("[name=" + name + "]", form).val()).length;
						
						if(length < range[0] || length > range[1])
						{
							return false;
						}
						else
						{
							return true;
						}
					},
				message: "Geben Sie bitte mindestens %d und maximal %dZeichen ein."
			},
			email: 
			{
				func:
					function (form, name)
					{
						if(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test($("[name=" + name + "]", form).val()))
						{
							return true;
						}
						else
						{
							return false;
						}
					},
				message: "Geben Sie bitte eine gültige E-Mail Adresse ein."
			},
			url: 
			{
				func:
					function (form, name)
					{
						if(/^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test($("[name=" + name + "]", form).val()))
						{
							return true;
						}
						else
						{
							return false;
						}
					},
				message: "Geben Sie bitte eine gültige E-Mail Adresse ein."
			},
			date: 
			{
				func:
					function (form, name)
					{
						if(/^\d\d?\.\d\d?\.\d\d\d?\d?$/.test($("[name=" + name + "]", form).val()))
						{
							return true;
						}
						else
						{
							return false;
						}
					},
				message: "Bitte geben Sie ein gültiges Datum ein."
			},
			number: 
			{
				func:
					function (form, name)
					{
						if(/^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test($("[name=" + name + "]", form).val()))
						{
							return true;
						}
						else
						{
							return false;
						}
					},
				message: "Geben Sie bitte eine Zahl ein."
			},
			digits: 
			{
				func:
					function (form, name)
					{
						if(/^\d+$/.test($("[name=" + name + "]", form).val()))
						{
							return true;
						}
						else
						{
							return false;
						}
					},
				message: "Geben Sie bitte nur Ziffern ein."
			},
			equalTo: 
			{
				func:
					function (form, name, dependency)
					{
						if($("[name=" + name + "]", form).val() == $(dependency, form).val())
						{
							return true;
						}
						else
						{
							return false;
						}
					},
				message: "Bitte denselben Wert wiederholen."
			},
			notEqualTo: 
			{
				func:
					function (form, name, dependency)
					{
						if($("[name=" + name + "]", form).val() != $(dependency, form).val())
						{
							return true;
						}
						else
						{
							return false;
						}
					},
				message: "Bitte denselben Wert nicht wiederholen."
			},
			range: 
			{
				func:
					function (form, name, range)
					{
						var value = $("[name=" + name + "]", form).val();
						
						if(value < range[0] || value > range[1])
						{
							return false;
						}
						else
						{
							return true;
						}
					},
				message: "Geben Sie bitten einen Wert zwischen %d und %d."
			},
			max: 
			{
				func:
					function (form, name, max)
					{
						if($("[name=" + name + "]", form).val() > max)
						{
							return false;
						}
						else
						{
							return true;
						}
					},
				message: "Geben Sie bitte einen Wert kleiner oder gleich %d ein."
			},
			min: 
			{
				func:
					function (form, name, min)
					{
						if($("[name=" + name + "]", form).val() > min)
						{
							return false;
						}
						else
						{
							return true;
						}
					},
				message: "Geben Sie bitte einen Wert größer oder gleich %d ein."
			},
		},
		displayErrorMsg: function (form, name, rule, message)
		{
			var ul = $("[title=" + name + "]", form);
			var element = $("[name=" + name + "]", form);

			$(".uf_error:hidden", form).show();
					
			if(!element.hasClass("uf_invalid"))
			{
				element.addClass("uf_invalid");
			}
			
			if(message && $("[title=" + rule + "]", ul).length < 1)
			{
				var li = document.createElement('li');
				$(li)
					.attr("title", rule)
					.append(message);
				
				if(ul.length > 0)
				{
					ul.append(li);
				}
				else
				{
					var ul = document.createElement('ul');
					$(ul)
						.addClass("uf_errormessage")
						.attr("title", name)
						.append(li);
						
					var div = document.createElement("div");
					$(div)
						.css("clear", "both")
						.append(ul);
						
					$(element).parent("div").after(div);
				}
			}
		},
		removeErrorMsg: function(form, name, rule)
		{
			var ul = $("[title=" + name + "]", form);
			var element = $("[name=" + name + "]", form);
			
			if($("li", ul).length > 1)
			{
				$("[title=" + rule + "]", ul).remove();
			}
			else
			{
				element.removeClass("uf_invalid");
				ul.parent().remove();
				
				if($(".uf_errormessage", form).length < 1)
				{
					$(".uf_error:not(:hidden)", form).hide();
				}
			}
		},
		submitHandler: function ()
		{
			alert("send");
			
		}
	};
})(jQuery);

$(document).ready(function()
{
	$("#uf_formular2").validator({
		validate:
		{
			"eingabe":
			{
				required: true,
				minlength: 10
			},
			"ausgabe":
			{
				required: true
			}
		}
	});

	$(".uf_datepicker").each(function (i)
	{
		$(this).datepicker({
			showOn: "both",
			dateFormat: "dd.mm.yy",
			altFormat: "@",
			altField: $(this).next(),
			buttonImage: "http://www.united-forum.de/tools/jquery/images/calendar.gif",
			buttonImageOnly: true,
			minDate: new Date(),
			onClose: function () { $(this).valid(); }
		})
		.attr("readonly", "readonly");
	});
	
	$(".uf_timepicker").each(function (i)
	{
		$(this).clock({
			displayFormat: "24",
			defaultHour: "17"
		});
	});
	$("div[id^='clock']").css("display", "inline");		
	
	$("select[id^='clock']").change(function ()
	{
		var form = $(this).closest("form");
		var validator = form.validate();
		
		if(validator.settings['onchange'])
		{
			form.valid();
		}
	});
	
	$('#uf_tabs').tabs();
	
	$("#klappbox_mit_formular h3, #klappbox h3").each(function (i)
	{
		$(this).wrapInner(document.createElement('a'));
	});
	
	$("#klappbox_mit_formular, #klappbox").accordion({ 
		header: "h3",
		clearStyle: true,
		autoHeight: false,
		collapsible: true,
		active: false
	});
	
	$("#uf_table")
		.tablesorter({ 
			sortList: [[1,1]],
			headers: { 
				5: { sorter: false }
			},
			widgets: ['zebra']
		})
		.tablesorterPager({
			container: $("#pager"),
			positionFixed: false
		});
	
	$(".uf_hilfe li").each(function (i)
	{
		$(this).dialog({
			bgiframe: true,
			autoOpen: false
		});
	});
	
	$("span[class*='uf_hilfe_']").click(function ()
	{
		var Classes = $(this).attr('class').split(" ");
		
		var count = Classes.length;
		for (var i = 0; i < count; i++)
		{
			if (Classes[i].indexOf('uf_hilfe_') != -1)
			{
				$('li.' + Classes[i]).dialog("open");
			}
		}
	});
});
</script>
<style type="text/css">
body
{ 
	font: 					11px "Trebuchet MS", sans-serif;
}

a img
{
	border:					0;
}

legend
{
	border: 				1px solid;
	padding:				1px 15px;
	font-size: 				11px;
}

fieldset
{
	margin:					20px 5px;
	padding:				10px;
}

input
{
	margin:					2px;
	padding:				2px;
}

#tabs
{
	width: 					99%;
}

.uf_invalid
{
	border: 				2px solid red !important;
	background: 			#F4C2C2 !important;
}

.uf_error
{
	list-style-position:	outline;
	margin:					0 0 0 20px;
	padding:				0;
}

.uf_error li
{
	color: 					red;
	font-weight: 			bold;
	margin:					0;
	padding:				0;
}

.uf_panel
{
	margin: 				0 auto;
}

.uf_ajax
{
	display:				none;
}

.uf_hilfe
{
	overflow:				visible;
	position:				relative;
}

.uf_hilfe div
{
	display:				none;
	position:				absolute;
	right:					20px;
	width:					370px;
}

.uf_hilfe div p
{
	margin-left:			26px;
}

.uf_hilfe:hover div
{
	display:				block;
}

.uf_submit, input.uf_reset
{
	cursor:					pointer;
}

.uf_submit
{
	border:					2px solid green;
	font-weight: 			bold;
	padding:				5px;
	background-color:		#eee;
}

.uf_reset
{
	border:					2px solid red;
	padding:				5px;
	background-color:		#eee;
}

.ui-icon-help
{
	float:					right;
	cursor:					help;
}

.ui-icon-plusthick,
.ui-icon-minusthick
{
	float:					left;
	cursor:             	pointer;
}

.ui-icon-info
{
	float:					left;
	margin-right:			10px;
}

.ui-state-error,
.ui-state-highlight
{
	padding: 				8px;
}
</style>
</head>
<body>
<noscript>
	<div class="ui-widget ui-state-error ui-corner-all"> 
		Achtung, JavaScript ist in Ihrem Browser nicht aktivert oder wird nicht unterstützt.
		Um diese Seite in ihrer kompletten Nutzerfreundlichkeit zu betrachten wird jedoch JavaScript benötigt.<br />
		<b>Der Funktionsumfang dieser Seite ist aber auch ohne Javascript in vollem Umfang vorhanden.</b>
	</div>
</noscript>
<table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td>
	<div class="uf_panel ui-widget">
		<div class="uf_ajax">
			Bild + sinnvoller Text wäre schick :(
		</div>
		<div id="uf_tabs">
			<noscript>
				<a name="top"></a>
				<h2>Navigation</h2>
			</noscript>
			<ul>
				<li><a href="#how-to">How-To</a></li>
				<li><a href="#formular"> Formular</a></li>
				<li><a href="#klappbox">Klappbox</a></li>
				<li><a href="#klappbox_mit_formular">Klappbox mit Formular</a></li>
				<li><a href="#tabelle">Tabelle</a></li>
			</ul>
			<div id="how-to">
				<h2>» How-To</h2>
				bla bla Mr. Freeman
				<noscript>
					<div>
						<a href="#top"><span class="ui-icon ui-icon-home" style="float: left;"><img src="./images/styles/standard/spacer.gif" alt="" /></span> Top</a>
					</div>
				</noscript>
			</div>
			<div id="formular">
				<form action="" class="uf_formular" method="post">
					<div style="float:right;">
						<a class="uf_erweiterte_optionen" href="form.html?more">Erweiterte Optionen</a>
					</div>
					<h2>» Formular</h2>
					<div class="uf_error ui-widget" style="display:none;">
						<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
							<p>
								<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"><img src="./images/styles/standard/spacer.gif" alt="" /></span> 
								<strong>Fehler: Es ist mindestens ein Fehler aufgetreten!<br /><br />Bitte beachte die Fehlermeldungen bei den jeweiligen Eingabebereichen und berichtige diese.<br />Die Generierung des Turniers ist erst nach vollständiger und korrekter Eingabe aller benötigten Werte möglich.</strong>
							</p>
						</div>
					</div>								
					<fieldset class="ui-widget-content">
						<legend class="ui-widget-header">Name</legend>
						<div class="uf_hilfe">
							<span class="ui-icon ui-icon-help"><img src="./images/styles/standard/spacer.gif" alt="" /></span>
							<div class="ui-widget ui-state-highlight ui-corner-all">
								<span class="ui-icon ui-icon-info"><img src="./images/styles/standard/spacer.gif" alt="" /></span>
								<p>
									<b>Hinweis:</b><br />
									Bitte gib hier deinen Namen an.<br />
									<strong>Beispiel:</strong> Holzmichel
								</p>
							</div>
						</div>
						<div>
							<input name="uf_name" type="text" /> 
						</div>
					</fieldset>				  	
					<fieldset class="ui-widget-content">
						<legend class="ui-widget-header">Formular abschicken</legend>						    
						<input type="submit" name="uf_submit_turnier" class="uf_submit" value="OK, LOS GEHTS!" /> <input type="reset" class="uf_reset" value="Eingaben zurücksetzen" />

					</fieldset>
				</form>
				<noscript>
					<div>
						<a href="#top"><span class="ui-icon ui-icon-home" style="float: left;"><img src="./images/styles/standard/spacer.gif" alt="" /></span> Top</a>
					</div>
				</noscript>
			</div>
			<div id="klappbox">
				<h2>» Klappbox</h2>
				<h3>Hier könnte DEINE Überschrift stehen</h3>
				<div>
					Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
					<br />
					Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
					<br />
					Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
				</div>
				<noscript>
					<div>
						<a href="#top"><span class="ui-icon ui-icon-home" style="float: left;"><img src="./images/styles/standard/spacer.gif" alt="" /></span> Top</a>
					</div>
				</noscript>
			</div>
			<div id="klappbox_mit_formular">
				<h2>» Klappbox mit Formular</h2>
				<h3>Nutzloses Formular #1</h3>
				<div id="nutzloses_formular_1">
					<form action="" method="post">
						<fieldset class="ui-widget-content">
							<legend class="ui-widget-header">Erstellen</legend>
							<input type="submit" name="uf_submit_nutzloses_formular_1" class="uf_submit" value="Rein damit!" /> <input type="reset" class="uf_reset" value="Eingaben zurücksetzen" />
						</fieldset>
					</form>
				</div>
				<h3>Nutzloses Formular #2</h3>
				<div id="nutzloses_formular_2">
					<form action="" method="post">
						<fieldset class="ui-widget-content">
							<legend class="ui-widget-header">Bearbeiten</legend>
							<input type="submit" name="uf_submit_nutzloses_formular_2" class="uf_submit" value="Let it happen!" /> <input type="reset" class="uf_reset" value="Eingaben zurücksetzen" />
						</fieldset>
					</form>
				</div>
				<noscript>
					<div>
						<a href="#top"><span class="ui-icon ui-icon-home" style="float: left;"><img src="./images/styles/standard/spacer.gif" alt="" /></span> Top</a>
					</div>
				</noscript>
			</div>
			<div id="tabelle">
				<div>
					<h2>» Tabelle</h2>
					<table id="uf_table" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
						<thead>
							<tr>
								<th>Name</th>
								<th>Datum</th>
								<th>Assoziativ</th>
								<th>pseudo Boolean</th>
								<th>Zahl</th>
								<th>Fest</th>
							</tr>

						</thead>
						<tbody>
							<tr>
								<td>Huckleberry Finn</td>
								<td>22.03.2009 16:00</td>
								<td>Neu</td>
								<td>Nein</td>
								<td>70</td>
								<td><a href="#">Link</a></td>
							</tr>
							<tr>
								<td>Spock</td>
								<td>27.04.2009 17:00</td>
								<td>Alt</td>
								<td>Ja</td>
								<td>127</td>
								<td> - </td>
							</tr>
							<tr>
								<td>Ich</td>
								<td>26.04.2009 13:00</td>
								<td>Sehr Alt</td>
								<td>Nein</td>
								<td>30</td>
								<td> - </td>
							</tr>

							<tr>
								<td>und auch DU!</td>
								<td>22.04.2009 16:00</td>
								<td>Neu</td>
								<td>Ja</td>
								<td>56</td>
								<td> - </td>
							</tr>
						</tbody>
					</table> 
					<div style="float:right;">
						<a href="#">Uralte Elemente einblenden</a>
					</div>
					<div id="pager" class="pager">
						<form action="" method="get">
							<img src="http://www.united-forum.de/tools/jquery/images/first.png" alt="first" class="first"/>
							<img src="http://www.united-forum.de/tools/jquery/images/prev.png" alt="prev" class="prev"/>
							<input type="text" class="pagedisplay"/>
							<img src="http://www.united-forum.de/tools/jquery/images/next.png" alt="next" class="next"/>
							<img src="http://www.united-forum.de/tools/jquery/images/last.png" alt="last" class="last"/>
							<select class="pagesize">
								<option selected="selected" value="10">10</option>
								<option value="20">20</option>
								<option value="30">30</option>
								<option  value="40">40</option>
							</select>
						</form>
					</div>
				</div>
				<noscript>
					<div>
						<a href="#top"><span class="ui-icon ui-icon-home" style="float: left;"><img src="./images/styles/standard/spacer.gif" alt="" /></span> Top</a>
					</div>
				</noscript>
			</div>
		</div>
	</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Administrative Formulare

Osbes

Similar threads