Components

TreeSelect

A front-end component to select an item from tree styled data

Example: A TreeSelect with preselected values

Code:

<div id="ui-standort2">
	... unobtrusive html code ...
</div>

<script>
	myOptions = {
		formLabel: "Kategorie",
		formName: "category_1",
		tree_root: 1,
		bem: true,
		bemModifier: "category",
		xhrSource: "./data.categories.php",
	};
	a = new MobileAge.Component.TreeSelect("ui-standort", myOptions);
</script>

Example: A TreeSelect in a Table

Hierhin

Code:

<table class="test_form_2">
	<tbody id="ui-standort">
		<tr><th colspan="3">... unobtrusive html code ...</th></tr>
	</tbody>
</table>

<script>
	myOptions = {
		formLabel: "Categories",
		formName: "cat",
		tree_root: 1,
		tree_leaf: 13,
		wrapper_level: '<tr><%%></tr>',
		wrapperLabel: '<th><%%></th>',
		wrapper_select: '<td><%%></td>',
		wrapperStatus: '<td colspan="2"><%%></td>',
		bem: true,
		bemModifier: "cat",
		xhrSource: "./data.categories.php",
	};
	a = new MobileAge.Component.TreeSelect("ui-standort", myOptions);
</script>

Options

For a full list of available options, please refer to the Documentation for TreeSelect

ToDos:

  • Die tree-leaf-Option soll eine Vorauswahl mehrerer Select-Felder ermöglichen. Die Datenbank liefert in diesem Fall nur Dummy-Daten, das zugehörige SQL ist noch nicht fertig.
  • Die Wrapper funktionieren für die Level noch nicht korrekt. Ein Level wird derzeit nur vom äußeren Element des Wrappers umschlossen.
  • Nach einem Ajax-Call sollte bis zum Empfang der Daten ein Feld mit einem Warte-Symbol erzeugt werden. Es reicht wahrscheinlich, dem Platzhater-Div temporär eine entsprechende CSS-Klasse mitzugeben.
  • Aufräumen: Benennung DOM-Node und DOM-Element unterscheiden, Groß-/Kleinschreibung in der Doku, Konventionen für Benennung
  • Testabschnitt auf dieser Seite zu einer einzelnen Selectbox (class MobileAge.Component.Select)

Select

A component to select an item from list styled data. Used as a sub-component the the Tree-Select-Component.

Example:

Code:

Options

For a full list of available options, please refer to the Documentation for Select