• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[SCRIPTSUCHE] Erweitertes <select> gesucht

mikdoe

mikdoe

Moderator
Suche nach einem erweiterten <select> mit folgendem Merkmal: Jede <option> besteht aus zwei Teilen, einem Label und einer Erklärung. Die Erklärung ist ein etwas längerer einzeiliger Satz, das Label ist nur ein Wort. Wenn das <select> zugeklappt ist sieht man nur das Label, ganz normales Browserverhalten.
Wenn man allerdings das Dropdown öffnet soll das ganze so breit werden, dass man unter jedem Label noch diesen Erklärungssatz anzeigen kann. Schön wäre auch, wenn die Liste ausfahren würde mit einer ganz leichten Animation.

Gibt es sowas, wenn ja, wie heißt das? Falls nein, gibt es etwas, worauf ich aufsetzen könnte?
jQuery 1.7.1 und UI 1.8.11 sind vorhanden.
 
mikdoe schrieb:
Suche nach einem erweiterten <select> mit folgendem Merkmal: Jede <option> besteht aus zwei Teilen, einem Label und einer Erklärung.
Zum Vergrößern anklicken....

meinst du sowas hier:

Code: 
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
$("#e15").on("change", function() { $("#e15_val").html($("#e15").val());});
 
$("#e15").select2("container").find("ul.select2-choices").sortable({
    containment: 'parent',
    start: function() { $("#e15").select2("onSortStart"); },
    update: function() { $("#e15").select2("onSortEnd"); }
});
Zum Vergrößern anklicken....

bzw.

Code: 
$("#e16").select2();
$("#e16_2").select2();
$("#e16_enable").click(function() { $("#e16,#e16_2").select2("enable", true); });
$("#e16_disable").click(function() { $("#e16,#e16_2").select2("enable", false); });
$("#e16_readonly").click(function() { $("#e16,#e16_2").select2("readonly", true); });
$("#e16_writable").click(function() { $("#e16,#e16_2").select2("readonly", false); });
Zum Vergrößern anklicken....

?

dann schau auch mal hier:[url]http://ivaynberg.github.io/select2/[/URL]!

Eine weiter Möglichkeit (etwas simpler gestrickt) ist dies hier: Selectmenu | jQuery UI
 
Zuletzt bearbeitet:
rico2009 schrieb:
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Zum Vergrößern anklicken....
Danke dir. Hattest du da etwas bestimmtes im Auge? Ich hab da keines gesehen, was mit zwei Feldern je Option arbeitet.

dbarthel schrieb:
meinst du sowas hier:
Zum Vergrößern anklicken....
Dir auch vielen Dank. Bei diesen Beispielen sehe ich nirgends das zweite Feld pro Option.

dbarthel schrieb:
[url]http://ivaynberg.github.io/select2/[/URL]!
Zum Vergrößern anklicken....
Davon gefällt mir sehr gut, was man unter "Loading Remote Data" sieht. Müsste ich mir so umbauen, dass es ohne Bilder arbeitet und nicht per Ajax lädt sondern die Options direkt bekommt. Ein bisschen wie mit Kanonen auf Spatzen schießen :)
Wenn es das eine Nummer einfacher gäbe wäre toll.

dbarthel schrieb:
Eine weiter Möglichkeit (etwas simpler gestrickt) ist dies hier: Selectmenu | jQuery UI
Zum Vergrößern anklicken....
Dort hab ich jetzt auch keines gesehen, was mit mind. zwei Feldern je Option arbeitet.
 
mikdoe schrieb:
Hattest du da etwas bestimmtes im Auge? Ich hab da keines gesehen, was mit zwei Feldern je Option arbeitet.
Zum Vergrößern anklicken....
Sowas direkt gibt es dabei auch nicht. Ich habe ehr daran gedacht, dass man auf eines dieser Felder aufsetzen könnte und dann erweitert.

Man könnte dabei z.B. das Layout und die Auswahl übernehmen und dann noch ein zusätzliches Feld einbauen. Vielleicht findet sich aber auch noch ein anderes Plugin, was besser geeignet ist.
 
Hierzu hab ich mir mal was gebastelt. Und zwar sollen die Options auf lang umschalten, wenn die Maus in der Nähe ist. Es sind nur 6 Optionen, werden allerhöchstens 10. Mehr nicht.

Code folgt, Frage: Warum zappelt das die ganze Zeit, wenn ich mich innerhalb des roten Rahmens mit der Maus bewege? Ich bekomme da einfach keine Ruhe rein. Warum ist das so? An dem Mischmasch mit und ohne jQuery bitte mal nicht stören, das ist nur Testcode.

HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<title>Test select</title>
</head>
<body>

<div id="prio_select_id" style="width:100%;border:1px solid red;"></div>

<script>
	"use strict";
	function prio_select() {
		var data = {
			div:	'prio_select_id',
			prio:	[
				{
					val:	1,
					kurz:	'Test 1',
					lang:	'Test 1 laaaaaaaaaaaaaaaaaaang geschrieben'
				},
				{
					val:	2,
					kurz:	'Test 2',
					lang:	'Test 2 laaaaaaaaaaaaaaaaaaang geschrieben'
				},
				{
					val:	3,
					kurz:	'Test 3',
					lang:	'Test 3 laaaaaaaaaaaaaaaaaaang geschrieben'
				},
				{
					val:	4,
					kurz:	'Test 4',
					lang:	'Test 4 laaaaaaaaaaaaaaaaaaang geschrieben'
				},
				{
					val:	5,
					kurz:	'Test 5',
					lang:	'Test 5 laaaaaaaaaaaaaaaaaaang geschrieben'
				},
				{
					val:	6,
					kurz:	'Test 6',
					lang:	'Test 6 laaaaaaaaaaaaaaaaaaang geschrieben'
				}
			]
		};
		var toggle = function(data,zielobj,kurz_lang) {
			jQuery(zielobj).hide(70,function() {
				zielobj.style.visibility = 'hidden';
				data['prio'].forEach(function(ref) {
					ref['opt'].innerHTML = ref[kurz_lang];
				});
				jQuery(zielobj).show(70,function() {
					zielobj.style.visibility = 'visible';
					data['stand'] = kurz_lang;
				});
			});
		};

		var zielobj = document.getElementById(data['div']);
		var sel = document.createElement('select');
		data['prio'].forEach(function(ref) {
			ref['opt'] = new Option(ref['kurz'],ref['val']);
			ref['opt'].innerHTML = ref['kurz'];
			sel.appendChild(ref['opt']);
		});
		zielobj.appendChild(sel);

		data['stand'] = 'kurz';

		zielobj.onmouseover = function() { if (data['stand'] != 'lang' ) { toggle(data,sel,'lang'); } };
		zielobj.onmouseout = function() { if (data['stand'] != 'kurz' ) { toggle(data,sel,'kurz'); } };
	}
	prio_select();
</script>

</body>
</html>
 
*push*

Hab extra ein Fiddle gemacht. Kann denn bitte jemand bestätigen oder widersprechen, ob es bei ihm auch flattert?
Einfach im rechten unteren Quadranten im roten Kasten die Maus nach rechts und links hin und her bewegen.
 
Also für eine Selectbox, die mit css bearbeitet werden soll, kann ich mit dienen :)
Ich würde vorschlagen, die Ergänzungen mit tooltips zu regeln, wozu ich dir noch ein weiteres Plugin anbieten könnte.
Oder du gibst mir etwas Zeit und ich bearbeite mein Plugin so, dass du egal was in eine Option einbauen kannst ;)
FancySelect
FancyTooltip

Greetz, Mephizto
 
rico2009 schrieb:
Ja, es flattert und zwar ziemlich extrem. Ist das gewollt?
Zum Vergrößern anklicken....
Nein, natürlich nicht, das ist ja meine Frage, wie man das weg bekommt :)

Mephiztopheles schrieb:
Ich würde vorschlagen, die Ergänzungen mit tooltips zu regeln, wozu ich dir noch ein weiteres Plugin anbieten könnte.
Zum Vergrößern anklicken....
Nein, keine Tooltips, die hasse ich. Ich will auch grundsätzlich nichts mehr verbauen, was nicht ohne Maus auf Touch Screens auskommt.

Mephiztopheles schrieb:
Oder du gibst mir etwas Zeit und ich bearbeite mein Plugin so, dass du egal was in eine Option einbauen kannst ;)
Zum Vergrößern anklicken....
Schön wäre, wenn die Optionen breit wären, wenn die Maus in der Nähe ist oder man rein klickt. Und zwar ohne dieses Flackern und möglichst auch für Touch Bedienung ohne Maus nutzbar.

Mephiztopheles schrieb:
FancySelect
FancyTooltip
Zum Vergrößern anklicken....
Sehr cool, Respekt!! Das muss ich mir unbedingt merken. Hab nämlich noch so ein Multiple Select, das mir auch nicht gefällt, deine sind sehr schön!
 
Ich hab jetzt direkt mal nachgesehen.
Wenn ich ein span-tag in eine option einbaue, wird das vom html gelöscht.
Ich kann aber jedes beliebige Attribut in die option einbauen und somit eine description einbauen.
Ich werde mich ransetzen und mein Plugin erweitern, dass man eine description für jede option einbauen kann, welche dann als span-tag in die FancySelect eingebaut wird.
Jetzt muss ich überlegen, wie das Handling am sinnvollsten wäre. am besten sollte jeder Benutzer das per CSS selber bestimmen denke ich

.fancySelect-option:hover .fancySelect-optiondescription { display:inline }

mikdoe schrieb:
Nein, keine Tooltips, die hasse ich. Ich will auch grundsätzlich nichts mehr verbauen, was nicht ohne Maus auf Touch Screens auskommt.
Zum Vergrößern anklicken....
Aber meine Tooltips funktionieren ohne Maus auf Touch :) sogar mit AirView ;)
 
Zuletzt bearbeitet:
hesst schrieb:
indem du das ein/ausblenden weglässt.
Zum Vergrößern anklicken....
Neee :)
In dem Select stehen relativ allgemeine Begriffe zur Auswahl. Und das ist auch gut so, denn solange sich der Betrachter für das select nicht interessiert soll es auch nicht so viel Platz einnehmen. Wenn allerdings die Maus rein klickt oder in die Nähe kommt möchte ich jeden Begriff etwas ausformulierter anzeigen, dann darf das ruhig Breite einnehmen.

Wie würdest du das lösen?

hesst schrieb:
onmouseover?
Zum Vergrößern anklicken....
Ja, ich hab jetzt letztens gesehen, dass auf neueren Android Browsern mit Touchscreen sogar der mouseover ganz gut gelöst ist. Aber so richtig überzeugt bin ich davon noch nicht. Glaube nicht, das die Leute sich so schnell immer neue Tablets und Handys kaufen und ein Andoid Update gibt es doch bei den meisten nur mit Rooten, oder?
Wenn das jetzt etwas offtopic wird, macht nichts. Würde mich diesbezüglich gern mit euch austauschen, denn man hat ja selbst selten eine ganze Amada von Handys um sich rum liegen womit man sich das anschauen kann. :) Und ob diese ganzen Simulatoren im Netz wirklich 100 %ig simulieren weiß ich nicht.
 
mikdoe schrieb:
solange sich der Betrachter für das select nicht interessiert soll es auch nicht so viel Platz einnehmen. Wenn allerdings die Maus rein klickt oder in die Nähe kommt möchte ich jeden Begriff etwas ausformulierter anzeigen, dann darf das ruhig Breite einnehmen.
Zum Vergrößern anklicken....
das war ja das ziel, davon spreche ich nicht.
aber du machst im onmouseover/out ein hide/show. das sorgt dann für weitere mouseover/out events.

mikdoe schrieb:
Wie würdest du das lösen?
Zum Vergrößern anklicken....
hide/show und visibility änderungen weglassen
wozu sind die eigentlich da?

mikdoe schrieb:
Ja, ich hab jetzt letztens gesehen, dass auf neueren Android Browsern mit Touchscreen sogar der mouseover ganz gut gelöst ist.
Zum Vergrößern anklicken....
mouseover/out auf touch gibt es nicht, diese events zu simulieren macht nur teilweise sinn
 
Bei mir macht der den Scatman, wenn Du über die Auswahl gehst. :D Das dürfte aber an Deinem hide() liegen, denn damit hebst Du onmouseover doch eigentlich wieder auf - blendest wieder ein, Mouse wieder drüber, hide() usw.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben