|
|
dynamische Listbox
|
| von subzero265, 06.10.2006 15:52:30 |
  (2 votes)  (1) [vote] |
Erzeugt eine 'comboBox' aus einem üblichen SELECT-Feld. Eine
comboBox ist eine Kombination aus einem Textfeld und einer Auswahlliste (wie sie z.B. im Browser für die aktuelle URL angezeigt wird)
URL zum Script: http://www.impulse030.de/projects/comboBox3/.
Besten Dank an S. Wiegmann.
Letzte Bearbeitung am 15. May 2006 |
<style>
DIV.comboBox {
display: inline;
}
DIV.comboBox INPUT.text {
margin: 0px;
height: 19px;
}
DIV.comboBox INPUT.toggleButton {
width: 17px;
height: 19px;
padding: 0px;
margin: 0px;
}
DIV.comboBox INPUT.toggleButtonIE {
font-size: 8pt;
font-family: Webdings, Marlett;
}
DIV.comboBox SELECT.list {
position: absolute;
color: #000000;
margin-top: 20px;
}
</style>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
/**
* ComboBox3
*
*(c) 2005 S.Wiegmann <stefan@impulse030.de>
* http://www.impulse030.de
* inspired by Jared Nuzzolillo's ComboBox @ http://webfx.eae.net
*
* Version 0.90
* Last Change: 2005-06-24
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* Usage:
* 1. Add the following code to your BODY-onload:
* myObj = new comboBoxObj('myObj', 'selectFieldName' [, widthPx]);
*/
var comboBoxKeyCode;
function comboBoxObj(objName, fieldName)
{
if (!document.getElementsByName(fieldName)[0])
{
return false;
}
// Detect Useragent
var useragent = navigator.userAgent;
var bName = (useragent.indexOf('Opera') > -1) ? 'Opera' : navigator.appName;
if (bName == 'Microsoft Internet Explorer')
{
isIE = true;
}
else
{
isIE = false;
}
this.objName = objName;
this.fieldName = fieldName;
this.fieldObj = document.getElementsByName(this.fieldName)[0];
this.value = this.fieldObj.options[this.fieldObj.options.selectedIndex].text; // Current ComboBox-Value
// Determine ComboBox-Width, set to default if not specified
if (!arguments[2])
{
if (this.fieldObj.offsetWidth)
{
this.width = this.fieldObj.offsetWidth;
}
else
{
this.width = '200';
}
}
else
{
this.width = arguments[2];
}
// Is there a onChange-Event on the original Select-Field ?
if (this.fieldObj.onchange == null)
{
this.onChangeFunction = '';
}
else
{
this.onChangeFunction = this.fieldObj.onchange + '';
this.onChangeFunction = this.onChangeFunction.substr(23, this.onChangeFunction.length-25);
}
// Change original Form-Object
this.fieldObj.style.display = 'none';
// Add Main-Object
this.obj = document.createElement('DIV');
this.obj.id = this.fieldName + 'ComboBox';
this.obj.className = 'comboBox';
// Add it
this.fieldObj.parentNode.insertBefore(this.obj, this.fieldObj);
// Define the List
this.list = document.createElement('SELECT');
this.list.size = 8;
this.list.className = 'list';
this.list.style.width = this.width + 'px';
this.list.onchange = new Function ("", this.objName + ".select(this.value, this.options[this.options.selectedIndex].text);" + this.onChangeFunction);
this.list.onclick = new Function ("", this.objName + ".select(this.value, this.options[this.options.selectedIndex].text, true);" + this.onChangeFunction);
this.list.style.display = 'none';
// Add it
this.obj.appendChild(this.list);
// Define the Text-Field
this.txtField = document.createElement("INPUT");
this.txtField.name = '_' + this.fieldName + '_';
this.txtField.type = "text";
this.txtField.className = "text";
this.txtField.style.width = this.width - 17 + 'px';
this.txtField.value = this.value;
this.txtField.onclick = new Function ("", this.objName + ".list.style.display = 'none'");
this.txtField.onkeydown = comboBoxCaptureKey;
if (this.fieldObj.onchange == null)
{
this.onKeyUpFunction = this.objName + ".txtFieldKey()"
}
else
{
this.onKeyUpFunction = this.objName + ".txtFieldKey(); " + this.onChangeFunction;
}
this.txtField.onkeyup = new Function ("", this.onKeyUpFunction);
// Add it
this.obj.appendChild(this.txtField);
// Define the Toggle-Button
this.toggleButton = document.createElement("INPUT");
this.toggleButton.type = "button";
if (isIE)
{
this.toggleButton.className = "toggleButton toggleButtonIE";
this.toggleButton.value = '6';
}
else
{
this.toggleButton.className = "toggleButton";
this.toggleButton.value = '...';
}
this.toggleButton.onclick = new Function ("", this.objName + ".toggleList()");
// Add it
this.obj.appendChild(this.toggleButton);
// this.buildList(null, false); // Build the List
}
comboBoxObj.prototype.buildList = function()
{
/**
* Arguments:
* 1: new Value
* 2: Display on/off
*/
var value, tmpText, tmpObj;
if (arguments.length > 1 && !arguments[1])
{
this.list.style.display = 'none';
return true;
}
if (arguments.length && arguments[0] !== null)
{
value = arguments[0];
}
else
{
value = this.txtField.value.toLowerCase();
}
if (this.list.options.length)
{
this.list.options.length = 0;
}
tmpLength = this.fieldObj.length;
for (i=0; i<tmpLength; i++)
{
tmpText = this.fieldObj.options[i].text;
if (value == tmpText.substr(0, value.length).toLowerCase())
{
selected = ((this.txtField.value.toLowerCase() == tmpText.toLowerCase())) ? true : false;
this.list.options[this.list.length] = new Option(tmpText, this.fieldObj.options[i].value, false, selected);
}
}
if (this.list.options.length)
{
this.list.style.display = '';
}
else
{
this.list.style.display = 'none';
}
}
comboBoxObj.prototype.toggleList = function()
{
if (this.list.style.display == 'none')
{
display = true;
}
else
{
display = false;
}
this.buildList('', display);
if (display)
{
this.focusList();
}
}
comboBoxObj.prototype.select = function(value, text)
{
this.txtField.value = text;
this.fieldObj.value = value;
if (arguments.length>1 && arguments[2])
{
this.list.style.display = 'none';
this.txtField.focus();
}
}
comboBoxObj.prototype.txtFieldKey = function()
{
// (The Key-Code in the Variable 'comboBoxKeyCode' is set via a global Function)
// Pressed Arrow-Down Key: Open the List, set Focus on it
if (comboBoxKeyCode == 40)
{
this.fieldObj.value = this.txtField.value;
this.buildList(this.txtField.value.toLowerCase(), true);
this.focusList();
if (this.list.options[0])
{
this.list.options[0].selected = true;
}
return;
}
// Search the Textfield-Value in the Options of the original List
txtFieldValueLower = this.txtField.value.toLowerCase();
foundValue = false;
for (i=0; i<this.fieldObj.length; i++)
{
tmpText = this.fieldObj.options[i].text;
if (tmpText.toLowerCase() == txtFieldValueLower)
{
this.fieldObj.value = this.fieldObj.options[i].value;
foundValue = true;
continue;
}
}
if (!foundValue)
{
this.fieldObj.value = null;
}
this.buildList();
}
comboBoxObj.prototype.focusList = function()
{
if (!this.list.options || this.list.style.display !== '')
{
return;
}
this.list.focus();
}
// Key-Capturing Function
function comboBoxCaptureKey(keyEvent)
{
if (!keyEvent)
{
keyEvent = window.event;
}
if (keyEvent.which)
{
comboBoxKeyCode = keyEvent.which;
}
else if (keyEvent.keyCode)
{
comboBoxKeyCode = keyEvent.keyCode;
}
else
{
comboBoxKeyCode = null;
}
}
//-->
</SCRIPT>
<body onload="myJsObj=new comboBoxObj('myJsObj', 'myInputVar')">
<form action="" method="post">
<select name="myInputVar">
<option value=""></option>
<option value="value1">demo</option>
<option value="value1">demonstration of comboBox</option>
<option value="value1">hello</option>
<option value="value2">hello world</option>
</select>
</form>
</body>
|
|
|
Hinweis: Auf dieser Seite liegen Links zu anderen Seiten im Internet. Für alle diese Links gilt: Wir
betonen ausdrücklich, daß wir keinerlei Einfluß auf die Gestaltung und die Inhalte der gelinkten Seiten
haben. Deshalb distanzieren wir uns hiermit ausdrücklich von allen Inhalten aller gelinkten Seiten auf
dieser Homepage und machen uns ihre Inhalte nicht zueigen. Diese Erklärung gilt für alle auf unserer
Homepage angebrachten Links
Redaktion/Betreiber von JSP-Develop übernehmen keinerlei Gewährleistung und Verantwortung für die Richtig-
und/oder Vollständigkeit von den auf den Webseiten JSP-Develop veröffentlichten Source Codes.
Die Verantwortung der Verwendung/Anwendung sowie etwaige Modifikation der hier veröffentlichten Sourcen
obliegt einzig dem Benutzer der Webseite, welche die veröffentlichten Sourcen in einer Applikation/Anwendung
einsetzt. Durch das Kopieren und/oder Benutzen der Sourcen in einer Applikation/Anwendung
bzw. etwaigen Abschriften wird dieser Rechtshinweis anerkannt.
Java, JSP, JavaServer Pages, J2EE, EJB, JDBC, JNDI, JTA, Sun, Sun Microsystems are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and in other countries.
IBM, WebSphere are trademarks or registered trademarks of International Business Machines Corporation.
Other trademarks and registered trademarks are the property of their respective owners.
|
|
|
|
