it-swarm-ko.tech

뷰에서 아약스 로딩 동작을 어떻게 변경합니까?

블록에 노출 된 필터가있는 것을 볼 수 있습니다. AJAX 및 자동 제출 기능을 사용하므로 필터 옵션이 변경되는 즉시보기가 다시로드됩니다.

옵션을 선택하고 다시로드하는보기 사이의 짧은 지연 시간에 익숙한 파란색 AJAX throbber)가 양식의 맨 아래에 표시됩니다 (숨겨진 제출 버튼이 현재 어디에 있는지 생각합니다 ).

Throbber 요소의 CSS를 재정 의하여이 이미지를 사용자 정의 할 수 있다는 것을 알고 있지만 전혀 사용하지 않는 것이 좋습니다.

내가 오히려 많이하는 일은 jQuery 애니메이션을 사용하여 노출 된 필터 양식 (및 이상적으로 기본보기)을 일시적으로 페이드 아웃하는 것입니다. 그런 다음 AJAX 호출이 완료되면 페이드 인됩니다.

실패하면 뷰 UI 모듈이 업데이트 할 때 사용하는 것과 동일한 방법, 즉 페이지 중간 에이 아이콘을 배치하고 싶습니다.

enter image description here

그것이 이미 내장되어 있기 때문에이 로딩 동작의 스타일/위치를 변경할 수있는 설정이 있다고 가정했습니다. 그래도 그런 행운은 없습니다.

이러한 방법 중 하나를 어떻게 구현합니까?

뷰 7.x-3.3에서 Drupal 7을 사용하고 있습니다.

34
Clive

작은 jquery를 사용하는 것이 마음에 들지 않으면 항상 다음과 같은 작업을 수행 할 수 있습니다.

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

완성을 위해 여기에 내가 사용한 코드가 있습니다. AJAX로드가 시작될 때 노출 된 필터 형식과보기를 모두 페이드 아웃하고 완료되면 다시 다시 표시됩니다.

(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);
29
Clive

안녕하세요, 당신이하고 싶은 것을 정확하게 복용하는 매우 간단한 모듈을 만들었습니다. 이 모듈에는 throbber의 스타일을 제어하고 해킹없이 자신의 이미지를 업로드 할 수있는 구성 페이지가 있습니다.

이것은 샌드 박스 링크입니다 : http://drupal.org/sandbox/ANDiTKO/1556808

유용하다고 생각되면 여기에서 다시 공식 프로젝트로 승인 할 수 있도록 확인하십시오 : http://drupal.org/node/1556114

10
ANDiTKO

방금 조사했습니다.
Drupal.views.ajaxView의 생성자에서 throbberhere 로 하드 코딩됩니다.
Drupal.views.ajaxView의 인스턴스는 Drupal.ajax에 저장되지 않으며 있음@todo입니다.
이것은 객체에 들어가서 우리 자신의 매개 변수를 설정할 수 없음을 의미합니다.

뷰는 어떻게합니까?

짧은 대답은 CSS입니다.
관리 페이지를 그냥 숨 깁니다throbber을보고 부모 .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;
}

Drupal.ajax로 무엇을 할 수 있습니까?

예, AJAX 요소 (버튼, 링크 등)로 덮어 쓸 수있는 몇 가지 방법을 찾았습니다.) 여기에 예가 나와 있습니다. 확장 또는 "후크"방법 Drupal Form AJAX? . 그러나이 경우에는 좋지 않습니다.
진행 요소가 beforeSend 단계에 표시되므로 문제가 발생하기 전에 수행 할 수 있습니다.

6
kalabro