Wie ändere ich das Ajax-Ladeverhalten in Ansichten?

Ich habe eine Ansicht mit einigen herausgestellten Filtern in einem Block; Es verwendet AJAX und die Funktion zum automatischen Senden, sodass die Ansicht erneut geladen wird, sobald eine Filteroption geändert wird.

In der kurzen Zeitspanne zwischen der Auswahl einer Option und dem erneuten Laden der Ansicht wird der vertraute blaue AJAX-Throbber irgendwo unten im Formular angezeigt (ich denke, wo sich derzeit die versteckte Schaltfläche zum Senden befindet).

Ich weiß, dass ich dieses Bild anpassen kann, indem ich das CSS für das throbber-Element überschreibe, aber ich würde es vorziehen, es überhaupt nicht zu verwenden.

Am liebsten würde ich die belichtete Filterform (und im Idealfall auch die Hauptansicht) mithilfe einer jQuery-Animation vorübergehend ausblenden. Sie werden dann wieder eingeblendet, wenn der AJAX-Aufruf abgeschlossen ist.

Andernfalls würde ich gerne die gleiche Methode verwenden, die das Ansichten-UI-Modul beim Aktualisieren verwendet, nämlich dieses Symbol in der Mitte der Seite zu platzieren:

Da dies bereits eingebaut ist, habe ich nur angenommen, dass es irgendwo eine Einstellung geben würde, um den Stil / die Position dieses Ladeverhaltens zu ändern. aber kein solches Glück.

Wie implementiere ich eine dieser Methoden?

Ich verwende Drupal 7 mit Views 7.x-3.3.

Wenn es Ihnen nichts ausmacht, ein wenig jquery zu benutzen, können Sie immer etwas tun wie:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});

Der Vollständigkeit halber hier der Code, den ich letztendlich benutzt habe; Es blendet sowohl die belichtete Filterform als auch die Ansicht aus, wenn das AJAX-Laden beginnt, und wieder ein, wenn es beendet ist:

(function($) {
  Drupal.behaviors.events = {
    attach: function(context, settings) {
      $('#views-exposed-form-events-page', context).ajaxStart(function(){
        $('#views-exposed-form-events-page,div.view-id-events', context).fadeTo(300, 0.5);
      });
      $('#views-exposed-form-events-page', context).ajaxSuccess(function(){
         $('#views-exposed-form-events-page', context).fadeTo(300, 1.0);
         $('div.view-id-events', context).css('opacity', 0.5).fadeTo(300, 1.0);
      });
    }
  };
})(jQuery);

Hallo, ich habe ein sehr einfaches Modul erstellt, das genau das dosiert, was Sie tun möchten. Das Modul verfügt über eine Konfigurationsseite, auf der Sie den Stil des Throbbers steuern und sogar Ihre eigenen Bilder hochladen können, ohne hacken zu müssen.

Dies ist der Sandbox-Link: http://drupal.org/sandbox/ANDiTKO/1556808

Wenn Sie es nützlich finden, lesen Sie es bitte hier, damit es als offizielles Projekt genehmigt werden kann: http://drupal.org/node/1556114

Ich habe gerade recherchiert.
Das throbberist hier im Konstruktor von hardcodiert Drupal.views.ajaxView.
Eine Instanz von Drupal.views.ajaxViewwird nicht in gespeichert Drupal.ajaxund es gibt @todo darüber.
Es bedeutet, dass wir nicht in das Objekt hineingehen und unsere eigenen Parameter einstellen können.

Wie funktioniert Views?

Die kurze Antwort lautet CSS.
Die Ansichten-Administratorseite wird nur ausgeblendet throbber und dem übergeordneten Element ein Stil hinzugefügt .ajax-progress-throbber.

.ajax-progress-throbber {
  background-color: #232323;
  background-image: url("../images/loading-small.gif");
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}

Kann ich etwas mit Drupal.ajax machen?

Ja, ich habe einige Methoden gefunden, die Sie für AJAX-Elemente überschreiben können (Schaltflächen, Links usw.). Ich habe hier ein Beispiel gezeigt: Wie kann man Drupal Form AJAX erweitern oder "einbinden"? . Aber in diesem Fall wird es nicht so gut sein.
Das Fortschrittselement wird in der beforeSendPhase angezeigt, sodass Sie etwas tun können, bevor es passiert.