uiwidgets.tpl

eGroupWare is a multi-user, web-based groupware suite developed on a custom set of PHP-based APIs. C

<!-- BEGIN multiSelectBox -->
<script LANGUAGE="JavaScript" TYPE="text/javascript">

	function addCustomValue()
	{
		idCustomValue = document.getElementById("htmlclass_custom_value");
		idSelectedValues = document.getElementById("htmlclass_selected_values");
				
		NewOption = new Option(idCustomValue.value,
					idCustomValue.value,false,true);
		idSelectedValues.options[idSelectedValues.length] = NewOption;
		
		idCustomValue.value = '';
		
		for(i=0;i<idSelectedValues.length;++i)
		{
			idSelectedValues.options[i].selected = true;
		}
		
		sortSelect(idSelectedValues);
	}

	function addPredefinedValue()
	{
		idSelectedValues = document.getElementById("htmlclass_selected_values");
		idPredefinedValues = document.getElementById("htmlclass_predefined_values");
		
		if(idPredefinedValues.selectedIndex != -1)
		{
			NewOption = new Option(idPredefinedValues.options[idPredefinedValues.selectedIndex].text,
						idPredefinedValues.options[idPredefinedValues.selectedIndex].value,false,true);
			idSelectedValues.options[idSelectedValues.length] = NewOption;
			
			idPredefinedValues.options[idPredefinedValues.selectedIndex] = null;
			
			if(idPredefinedValues.length > 0)
			{
				idPredefinedValues.selectedIndex = 0;
			}
			
			sortSelect(idSelectedValues);
		}
	}
	
	function removeValue()
	{
		idSelectedValues = document.getElementById("htmlclass_selected_values");
		idPredefinedValues = document.getElementById("htmlclass_predefined_values");
		
		if(idSelectedValues.selectedIndex != -1)
		{
			NewOption = new Option(idSelectedValues.options[idSelectedValues.selectedIndex].text,
						idSelectedValues.options[idSelectedValues.selectedIndex].value,false,true);
			idPredefinedValues.options[idPredefinedValues.length] = NewOption;
			
			idSelectedValues.options[idSelectedValues.selectedIndex] = null;
			
			for(i=0;i<idSelectedValues.length;++i)
			{
				idSelectedValues.options[i].selected = true;
			}
			
			sortSelect(idPredefinedValues);
		}
	}
	
	function selectAllOptions()
	{
		idSelectedValues = document.getElementById("htmlclass_selected_values");
		
		for(i=0;i<idSelectedValues.length;++i)
		{
			idSelectedValues.options[i].selected = true;
		}
	}
	
	// Author: Matt Kruse <[e-mail]>
	// WWW: http://www.mattkruse.com/
	//
	// NOTICE: You may use this code for any purpose, commercial or
	// private, without any further permission from the author. You may
	// remove this notice from your final code if you wish, however it is
	// appreciated by the author if at least my web site address is kept.
	function sortSelect(obj) 
	{
		var o = new Array();
		if (obj.options==null) { return; }
		for (var i=0; i<obj.options.length; i++) 
		{
			o[o.length] = new Option( obj.options[i].text, obj.options[i].value, obj.options[i].defaultSelected, obj.options[i].selected) ;
		}
		if (o.length==0) { return; }
		o = o.sort(
			function(a,b) 
			{
				if ((a.text+"") < (b.text+"")) { return -1; }
				if ((a.text+"") > (b.text+"")) { return 1; }
				return 0;
			}
		);
		
		for (var i=0; i<o.length; i++) 
		{
			obj.options[i] = new Option(o[i].text, o[i].value, o[i].defaultSelected, o[i].selected);
		}
	}

</SCRIPT>
<table border="0" cellspacing="0" cellpadding="0" width="{multiSelectBox_boxWidth}">
	<tr>
		<td width="50%" align="right" rowspan="2" valign="top">
			<select name="{multiSelectBox_valueName}[]" id="htmlclass_selected_values" size=8 
				style="width : 250px;" multiple="multiple" ondblclick="removeValue()"
				onblur="selectAllOptions()">
				{multiSelectBox_selected_options}
			</select>
		</td>
		<td align="left" rowspan="2" style="padding-right : 10px; padding-left : 2px;">
			<a href="javascript:removeValue()">>></a>
		</td>
		<td align="right" style="padding-left : 10px; padding-right : 2px;">
			<a href="javascript:addPredefinedValue()"><<</a>
		</td>
		<td width="50%" valign="top">
			<select name="{multiSelectBox_valueName}_predefined_values[]" id="htmlclass_predefined_values" size=6 style="width : 250px;" ondblclick="addPredefinedValue()">
				{multiSelectBox_predefinded_options}
			</select>
		</td>
	</tr>

	<tr>
		<td align="right" style="padding-left : 10px; padding-right : 2px;">
			<a href="javascript:addCustomValue()"><<</a>
		</td>
		<td>
			<input type="text" name="custom_value" id="htmlclass_custom_value" style="width : 250px;">
		</td>
	</tr>
</table>
<!-- END multiSelectBox -->

<!-- BEGIN tableView -->
<table width="{tableView_width}">

<tr>
	{tableView_Head}
</tr>

{tableView_Rows}

</table>
<!-- END tableView -->

<!-- BEGIN tableViewHead -->
<td>{tableHeadContent}</td>
<!-- END tableViewHead -->