clxMessageBox –
accessible error, hint and status messages

Für Web-Anwendungen werden sie immer wieder benötigt: Fehler- oder Statusmeldungen. Bei einem aktuellen Projekt stand ich gerade wieder vor solch einer Herausforderung. So war diese Klasse schnell geschrieben.

Wert wurde vor allem auf Barrierefreiheit und gute Verständlichkeit gelegt. So ist die Ausgabe als <fieldset> ausgelegt. Als <legend> wird der Typ der Nachricht dargestellt und, wenn angegeben, auch noch eine Sektion. Dies kann z.B. ein Methodenname sein, wo der Fehler auftrat.

Live-Demo

See the class and the example stylesheet in action!

Usage Example

// load class
require_once("clxMessageBox.php");

// create object
$msg = new clxMessageBox();

// add error message
$msg->addMessage("error", "functionName", "<p>message</p>");
// add hint
$msg->addMessage("hint", "", "<p></p>");
// add status message
$msg->addMessage("status", "", "<p></p>");

// display all added messages, sorted by type
$msg->display();

Main Methods

/**
 * addMessage: add message
 *
 * @author     Stefan Dressler
 * @version    0.1, 2007-01-19
 * @param      $type		String
 * @param      $section		String
 * @param      $msgText		String
 * @param      $attributes	String
 */
public function addMessage(
	$type = "status", 
	$section = "", 
	$msgText = "", 
	$attributes = ""
) { .. }

/**
 * display: display messages
 *
 * @author     Stefan Dressler
 * @version    0.1, 2007-01-19
 * @param      $type		String
 */
public function display(
	$type = ""
) { .. }

Example StyleSheet

/* main presets */
* { padding: 0; margin: 0; }

html { height: 100.05%; }
body { margin: 0; padding: 0; }
a { text-decoration: none; }

/* boxes */
fieldset.clxMessageBox { 
	margin: 0 0 8px 0; padding: 3px; 
	border: none; border-top: 3px solid transparent; 
	border-bottom: 3px solid transparent; 
}
fieldset.clxMessageBox legend { 
	padding: 0 4px; background: #fff; display: none; 
}
fieldset.clxMessageBox p { 
	margin: 3px 4px; font-weight: bold; text-align: center; 
}

/* colors etc. */
fieldset.clxMessageStatus { 
	border-color: #446e00; border-top-color: #C7DBA9; 
	background: #C7DBA9; 
}
fieldset.clxMessageHint { 
	border-color: #DAA520; border-top-color: #ffa; 
	background: #ffa; 
}
fieldset.clxMessageError { 
	border-color: #900; border-top-color: #fcf0f0; 
	background: #fcf0f0; 
}

fieldset.clxMessageStatus legend strong { color: #446e00; }
fieldset.clxMessageHint legend strong { color: #f90; }
fieldset.clxMessageError legend strong { color: #900; }

fieldset.clxMessageStatus p { color: #446e00; }
fieldset.clxMessageHint p { color: #DAA520; }
fieldset.clxMessageError p { color: #900; }

Download