Wie kann ich mit #states schieben?

7

Ich habe ein Formular mit "#states" (im Beziehungsmodul) und es funktioniert, aber es springt irgendwie herum. Ein schöner SlideDown wäre so viel besser.

Wie kann ich das tun, anstatt es nur sichtbar zu machen?

javascript kiamlaluno
quelle
Das würde ich auch gerne wissen. Es wäre schön, den Übergang einfach zu definieren, anstatt die Form abrupt ändern zu lassen, wenn eine Option ausgewählt wird.
Geerlingguy

Antworten:

2

Aufbauend auf Mikes Post hat der obige Code das Element nur mit der Seite nach unten und nicht wieder gesichert. Damit es auf und ab gleitet, habe ich e.stopPropagation () hinzugefügt. Der vollständige Code lautet also:

jQuery(document).ready(function($) {
    $('form.slide').bind('state:visible', function(e) {
        if(e.trigger) {
            $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'slideDown' : 'slideUp']();
            e.stopPropagation();
        }
    });
});
Felix Eve
quelle
10

Ich nehme an, Sie verwenden den sichtbaren Zustand?

Der Code, der dafür verantwortlich ist, befindet sich in state.js:

$(document).bind('state:visible', function(e) {
    if (e.trigger) {
      $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'show' : 'hide']();
    }
  });

Wie Sie sehen können, werden show / hide ohne konfigurierbare Parameter aufgerufen, was bedeutet, dass es nicht einfach geändert werden kann.

Der Kommentar über diesem Block ist jedoch interessant:

/**
 * Global state change handlers. These are bound to "document" to cover all
 * elements whose state changes. Events sent to elements within the page
 * bubble up to these handlers. We use this system so that themes and modules
 * can override these state change handlers for particular parts of a page.
 */

Wenn ich das richtig verstehe, können Sie den Ereignishandler für Ihr spezifisches Seitenelement, z. B. das Formular oder sogar einzelne Formularelemente, überschreiben, indem Sie Folgendes hinzufügen:

$('form.your-form-class').bind('state:visible', function(e) {
  if (e.trigger) {
    $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'slideDown' : 'slideUp']();
  }
});

Ich denke, Sie müssen FALSE zurückgeben, um zu verhindern, dass das Ereignis im DOM-Baum weiter sprudelt.

Berdir
quelle
Hat wunderbar funktioniert! Wenn Sie dies inline tun (was ich nicht empfehlen würde), ersetzen Sie es $durch jQueryund wickeln Sie es eindrupal_add_js("[Berdir's code here]", array('type' => 'inline', 'scope' => 'footer'));
Joshua Stewardson
Es wäre cool, wenn jemand dies aktualisieren könnte, um auch mit jquerys new .on()statt zu arbeiten .bind().
Letharion
Sie sollten nicht auf das Ereignis document.ready reagieren. Sie sollten ein Drupal-Verhalten verwenden.
Aaronbauman
0

Aufbauend auf Berdirs Beitrag konnte ich ihn optimieren und in einem benutzerdefinierten Modul zum Laufen bringen.

Also habe ich in meiner .module-Datei diese Zeile unter der Funktion hook_init () hinzugefügt

function er_init(){
    drupal_add_js('custom.js'); 
}

Dann in der Datei custom.js

jQuery(document).ready(function(){
  jQuery('form#user-profile-form').bind('state:visible', function(e) {
    if (e.trigger) {
      jQuery(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'fadeIn' : 'fadeOut']();
    }
});

})

In diesem Fall gilt dies natürlich nur für das Benutzerprofil.

mikeDOTexe
quelle