Antworten zum Thema „jquery ui splitbutton - wie liste darunter darstellen?“

[Clubnite]

Hallo,

Kann mir bitte mal jemand erklären, wie man bei diesem jquery ui splitbutton eine select liste nach Klick auf den Pfeil genau bündig darunter darstellen kann? Die Liste selbst soll aber nicht auch noch ihren Pfeil zeigen. Es soll also so aussehen wie bei einer Eingabe bei Google, wenn das autocomplete-Fenster darunter aufgeht.

Ich stehe irgendwie auf der Leitung und blicke es nicht.

 

[Duddle]

AW: jquery ui splitbutton - wie liste darunter darstellen?

Bei welchem Schritt hängst du denn?

Das Beispiel gibt ja schon eindeutige Stellen vor, an denen du dein Listen-Element einblenden kannst. Wie das Ding dann positioniert ist, ist Sache des CSS und hat mit JS nichts mehr zu tun.


Duddle

 

[Clubnite]

AW: jquery ui splitbutton - wie liste darunter darstellen?

Bei welchem Schritt hängst du denn?

Ich hab das ganze jetzt zumindest soweit, dass die Liste vom Button verdeckt wird, aber wie bekomme ich die jetzt getoggelt, wenn ich auf den Pfeil-Button klicke? Ich möchte, dass die Liste darunter aufklappt und nicht als Popup oder umständlich in eine <ul> transformiert/geclont werden muss.

<li class="first" style="position:relative">
   <button id="toggle-lable">changeover day</button>
   <button id="toggle-icon">Select a day</button>
   // Inline styling only for testing
   <select name="day-of-the-week" id="day-of-the-week" style="position:absolute; width:100%; padding:0; margin-top:-1.9em; left:.2em; z-index:-1">
      <option></option>
      <option value="1">Mon</option>
      <option value="2">Tue</option>
      <option value="3">Wed</option>
      <option value="4">Thu</option>
      <option value="5">Fri</option>
      <option value="6">Sat</option>
      <option value="0">Sun</option>
   </select>
</li>

<script>
$('#day-of-the-week').click(function(e) {
   console.debug('angekommen');
});

$('#toggle-icon')
.button()
.click(function(e)
{
  $('#day-of-the-week').trigger('click');
})		
</script>

 

[Duddle]

AW: jquery ui splitbutton - wie liste darunter darstellen?

Du scheinst mir einen Datepicker programmieren zu wollen. jQuery UI hat da schon ein Modul, ansonsten gibt es wie immer zig PlugIns: bzw.


Ansonsten: um ein Element zu togglen, benutzt du toggle(). Im Beispiel-Code auf der jQ-UI-Seite suchst du dann den entsprechenden Anker und blendest dort dein Element ein.


Duddle

 

[Clubnite]

AW: jquery ui splitbutton - wie liste darunter darstellen?

Datepicker ??? Völlig falscher Dampfer!

Das Element ein- / auszublenden ist auch nicht das Problem. Aber die Liste soll nicht ein- / ausgeblendet werden sondern geöffnet werden, wenn ich auf den jui button klicke. Von dem her ist toggle() die falsche Funktion - es kämen eher click() oder trigger() in Frage. Das Auf- / Zuklappen der Liste funktioniert aber nicht über den jui-Button, auch nicht, wenn ich dem Klick-Event des jui-Buttons als neues Target das <select> Element zuweise.

Ich habe meinen Code oben um den JS-Bereich erweitert. So wie es dort jetzt zu sehen ist, bekomme ich zwar 'angekommen' auf der Konsole angezeigt, aber die Liste öffnet sich nicht für eine Auswahl.

Edit:
So, Antwort hier gefunden.