Add open/closed classes on events in JavaScript image combobox / msdropdown / msdd / Drupal lang_dropdown

Add open/closed classes on events in JavaScript image combobox / msdropdown / msdd / Drupal lang_dropdown

Today I'd like to present you a little snippet to add open/closed classes within MSDropdown jQuery Plugin!
Explicitly this plugin is used within Drupals Language switcher dropdown / lang_dropdown Module.

Therefore we needed open/closed classes to determine the current state of selection for CSS purposes.

Fortunately the plugin developer (thank you so much, really great development!) was so gracious to provide "onOpen" and "onClose" events to hook into.
So the last challenge was to pick the MsDropdown object within DOM to add the events. And it worked!

Here are the results as snippet, feel free to use and modify:

  1. (function ($) {
  2.     // Initial values:
  3.     $('#edit-lang-dropdown-select_msdd').addClass('closed').removeClass('open');
  4.    
  5.     // Events
  6.     var oHandler = $('select#edit-lang-dropdown-select').data("dd");
  7.     oHandler.addMyEvent('onOpen', function(){
  8.       $('#edit-lang-dropdown-select_msdd').addClass('open').removeClass('closed');
  9.     });
  10.     oHandler.addMyEvent('onClose', function(){
  11.       $('#edit-lang-dropdown-select_msdd').addClass('closed').removeClass('open');
  12.     });
  13.   })(jQuery);

More about the plugin and download:
http://www.marghoobsuleman.com/jquery-image-dropdown
https://github.com/marghoobsuleman/ms-Dropdown

Kommentare

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt. Wenn Sie ein zulässiges Avatar mit Ihrer E-Mail-Adresse verknüpft haben, wird dieses als Avatar verwendet.

Weitere Informationen über Formatierungsoptionen

Aktualisieren Geben Sie die Zeichen ein, die Sie im Bild sehen. Geben Sie die im Bild dargestellten Zeichen ein; wenn Sie diese nicht lesen können, senden Sie das Formular ohne Eingabe ab, um ein neues Bild zu generieren. Groß-/Kleinschreibung wird nicht beachtet.  Switch to audio verification.