Formulare mit ToolTip-Hilfen
Formulare sind etwas ganz Grundsätzliches jeder Web-Anwendung. Zu jedem guten Formular gehören Hilfe und Erklärungstexte, damit der Benutzer ganau weiß was er einzugeben hat. Meiner Auffassung nach sollte die Aufklärung im Vorfeld durchgeführt werden und nicht erst durch die Ausgabe einer entsprechenden Fehlermeldung - jedoch wäre ein langer Erklärungstext für jedes Feld zu umfangreich, und würde eher abschreckend wirken.
Die Lösung sind also ToolTips, die nach belieben des Benutzers eingeblendet werden. Häufig werden die Hilfetexte nicht vom Entwickler, sondern von anderen Kräften erstellt. Somit sollten die Hilfetexte leicht einzugeben ein und ohne Problem verändert werden können.
Die Verarbeitung und Anzeige der ToolTips überlasse ich der jQuery JavaScript Library mit der Abwandlung jTip, was bedeutet das diese Referenzen zunächst eingebunden werden müssen. Wichtig ist hierbei die Reihenfolge, die strikt eingehalten werden muss. Weiterhin gibt es eine CSS Datei, die sich um die nötigen Formatierungen kümmert.
<head runat="server"> <link href="Stylesheet1.css" rel="stylesheet" type="text/css" /> <script src="jquery.js" type="text/javascript"></script><script src="jtip.js" type="text/javascript"></script>
<title></title>
</head>
Die Hilfetexte selbst werden über einen generischen HttpHandler eingebunden, welcher wiederum den Zugriff auf eine globale Resource-Datei nutzt. Die Unterscheidung der Texte erfolgt über die Angabe eines Schlüssels, welcher in der gleichen Form in der Resource-Datei zu finden ist.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; namespace FormularToolTip { [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class HelpHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { string key = context.Request.QueryString["key"]; context.Response.Write(String.Format("<p>{0}</p>", HttpContext.GetGlobalResourceObject("Help", key))); } public bool IsReusable { get { return false; } } } }
Damit der jQuery Code die Arbeit aufnehmen kann, ist es nötig den Link zur Hilfe mit einer entsprechenden Klasse zu versehen. Über das Attribut Name, wird die Überschrift abgegeben.
Benutzername: <asp:textbox ID="Textbox1" runat="server"></asp:textbox> <a href="HelpHandler.ashx?key=Help1" name="Benutzername" id="Help1" class="jTip">?</a>
Dieser Beispielcode zeigt den Link als Fragezeichen. Zusätzlich wird der Mauszeiger mit Hilfe der CSS Datei verändert, sobald er sich über dem Fragezeichen befindet, allerdings nur sofern der Browser dies unterstützt.
Das Ergebnis ist die Anzeige eines einfachen ToolTips, welcher dazu noch leicht einzugeben und zu warten ist. Leider ist auf dem Screenshot der Mauszeiger nicht zu sehen.
Das Beispielprojekt gibt es hier zum Download.
Hi Kai,
afte Downloading the FormularToolTip.zip (it is 30 KBytes) I could not open it with the built-in Windows ZIP mechanism.
Greetings from Germany