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

[SCRIPTSUCHE] Erweitertes <select> gesucht

Mir scheint, als unterbreche das Klicken auf die Select den hover.
Mit einer normalen Select wird das also nichts. da muss man die schon umbauen, denn dann kann man auf klassen prüfen und dann entscheiden ob es ausgeblendet werden darf.
Dann ist die Frage, ob du wirklich möchtest, dass die Select sich von der Größe verändern darf, da das das Layout sprengen könnte.
Ich persönlich bin ja immernoch für die Tooltips, aber das ist deine Entscheidung.
Ein Wort und ich bau dir die Select um ;)
 
AW: Erweitertes &lt;select&gt; gesucht

Ich kann dir sowas anbieten: Plunker
Guck dir da das Select in der Mitte an

- - - Aktualisiert - - -

Ich baue sowieso meine ganzen Funktionen in ein Framework ein und erstelle APIs und so...
Mit der Select fang ich an :D
Mal gucken, ob meine Services/Funktionen/Plugins von Dritten genutzt werden :)
Jedenfalls denke ich schon so weit vorraus, dass jeder selber Plugins dafür erstellen kann
 
FancySelect ist soweit fertig.
Hier ist ein Fiddle dazu. Sieh dir einfach an, welche Dateien dazu importiert werden.
Multiple FancySelect - JSFiddle

HTML: 
<!-- Import FancyFrame and FancySelect -->
<script src="//code.mephiztopheles.wtf/fancy/fancy-latest.js"></script>
<script src="//code.mephiztopheles.wtf/fancyselect/fancyselect-latest.js"></script>
<link href="//code.mephiztopheles.wtf/fancyselect/fancyselect-latest.css" type="text/css" rel="stylesheet" >

jQuery * > 1.7 wird benötigt
 
Ah ok. Für mich dennoch nicht nutzbar, weil ich immer alle Auswahlen lang anzeigen muss, wenn die Maus kommt. Nicht nur den einen wo man die Maus drauf hat.
 
Mephiztopheles, das ist total nett von dir, wie du dich bemühst aber lass mal. Als nächstes würden mir jetzt die Standard Eigenschaften eines select fehlen, z.B. mit einem Buchstaben auf der Tastatur zum ersten Eintrag springen, der mit diesem Buchstaben beginnt. Danach kämen wahrscheinlich weitere optische Details. Das zieht einen endlosen Rattenschwanz hinter sich her. Soviel Zeit hat das Feld gar nicht verdient :) Vor allem nicht von deiner Zeit.

Ich lass es bei mir einfach wie es ist, zeige einfach immer die Langversion an und gebe dem Feld halt mehr Platz. Dachte, ein Standard select wäre mit einfachen Mitteln schöner gestaltbar.
 
Das mit den Tasten war auch eine Sache die ich noch reinmachen wollte, aber nie dazu zeit gefunden hatte :D
Zumindest hab ich jetzt das Framework an sich fertig, hab eine Möglichkeit meine Dateien von meinem Server direkt anzubieten und die Select ist importiert
Kannst trotzdem gerne weiterempfehlen :)
 
mikdoe schrieb:
Ich lass es bei mir einfach wie es ist, zeige einfach immer die Langversion an und gebe dem Feld halt mehr Platz.
Zum Vergrößern anklicken....
was ist denn jetzt das problem? das flackern liegt daran, dass dein ein/aus-blenden dafür sorgt, daß dein div schrumpft/wächst und damit wieder ein out/over auslöst. das hatten wir doch in #18.
sorgst du jetzt dafür, daß der nächste eventhandler erst nach abschluss der animation ausgeführt wird, sollte das behoben sein.
was ist denn das problem in #23 und wie sieht der code aus?

mikdoe schrieb:
Dachte, ein Standard select wäre mit einfachen Mitteln schöner gestaltbar.
Zum Vergrößern anklicken....
weinn du das wechseln mit ein/ausblenden meinst, sollte das ohne probleme lösbar sein.
 
AW: Erweitertes &lt;select&gt; gesucht

mikdoe schrieb:
hesst, in #23 hab ich mein letztes Fiddle gezeigt: Edit fiddle - JSFiddle
Danach hast du dich erst jetzt wieder gemeldet.
Zum Vergrößern anklicken....
und warum ein Fiddle? Das sehe ich mir nicht an, wenn du es hier als code postest, kann ich das sofort sehen, bei bedarf kopieren und gleich testen.

mikdoe schrieb:
Deine Tipps bis dahin habe ich m.E. eingebaut oder hab ich was vergessen?
Zum Vergrößern anklicken....
was geht denn nicht? flackert es immer noch?

- - - Aktualisiert - - -

habs mal probiert, ja, wenn du vom div zum select wechselst kommt ja auch ein out + over.
nimm mouseenter/leave
Code: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="jquery.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, e)
    {
      var $div = $(this);
      jQuery(zielobj).hide(70, function()
      {
        data.prio.forEach(function(ref)
        {
          ref.opt.innerHTML = ref[kurz_lang];
        });
      }).show(70, function()
      {
        data.stand = kurz_lang;
        switch (kurz_lang)
        {
        case "kurz":
          $div.one("mouseenter", $.proxy(toggle, $div, data, sel, 'lang'));
          break;
        case "lang":
          $div.one("mouseleave", $.proxy(toggle, $div, data, sel, 'kurz'));
          break;
        }
      });
    };

    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).one("mouseenter", $.proxy(toggle, $(zielobj), data, sel, 'lang'));
  }
  prio_select();
</script>

</body>
</html>
 
Danke hesst, sieht schon nicht schlecht aus, das Gezappel scheint beendet zu sein: Edit fiddle - JSFiddle

Eins noch: wenn ich drüber fahre, werden sie lang, dann klicke ich rein, um einen auszuwählen, Liste klappt auf und zack, ohne Mausbewegung wird es sofort wieder kurz und die Liste klappt auch wieder zu, Auswahl unmöglich. Zumindest im IE.
Kann man es lang halten, solange die Maus drüber ist, egal was man dort macht?
 
mikdoe schrieb:
Eins noch: wenn ich drüber fahre, werden sie lang, dann klicke ich rein, um einen auszuwählen, Liste klappt auf und zack, ohne Mausbewegung wird es sofort wieder kurz und die Liste klappt auch wieder zu, Auswahl unmöglich. Zumindest im IE.
Zum Vergrößern anklicken....
mhhh, mist, wenn man in die auswahlliste wechselt, die ja größer ist als das div, kommt ein mouseleave.
da geht bestimmt was mit den event-targets, ich schau mir das bei gelegenheit mal an.
wenn die maus nur auf dem select reagieren muss wäre das kein problem. du wolltest aber, daß der wechsel kurz/lang auch stattfindet, wenn man das div überfährt?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben