Làm cách nào tôi có thể trượtDown với #states?

7

Tôi có một biểu mẫu bằng cách sử dụng "#states" (trong mô-đun Relation), và nó hoạt động, nhưng nó nhảy xung quanh. Một slideDown đẹp sẽ tốt hơn rất nhiều.

Làm thế nào tôi có thể làm điều đó thay vì chỉ làm cho nó hiển thị?

javascript

— kiamlaluno
nguồn

Tôi cũng muốn biết điều này. Sẽ thật tốt khi dễ dàng xác định quá trình chuyển đổi, thay vì có hình thức thay đổi đột ngột khi một tùy chọn được chọn.

— ge Muffguy

2

Dựa trên bài đăng của Mike, đoạn mã trên chỉ khiến phần tử nằm xuống, không sao lưu lại. Để làm cho nó trượt lên và xuống, tôi đã thêm e.stopPropagation (); vì vậy mã đầy đủ là:

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();
        }
    });
});

— Đêm giao thừa
nguồn

10

Tôi giả sử bạn đang sử dụng trạng thái hữu hình?

Mã chịu trách nhiệm thực hiện việc này là trong state.js:

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

Như bạn có thể thấy, nó gọi show / ẩn mà không có bất kỳ tham số cấu hình nào, điều đó có nghĩa là nó không thể dễ dàng thay đổi.

Tuy nhiên, bình luận ở trên khối đó rất thú vị:

/**
 * 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.
 */

Nếu tôi hiểu điều này một cách chính xác, bạn có thể ghi đè trình xử lý sự kiện cho thành phần trang cụ thể của bạn, ví dụ: biểu mẫu hoặc thậm chí các thành phần biểu mẫu đơn, bằng cách thêm một cái gì đó như thế này:

$('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']();
  }
});

Tôi đoán bạn sẽ cần phải trả về SAI để ngăn sự kiện nổi lên hơn nữa trong cây DOM.

— Berdir
nguồn

Làm việc rất đẹp! Nếu bạn đang làm nội tuyến này (mà tôi không muốn giới thiệu) thay thế $'s với jQueryvà bọc trongdrupal_add_js("[Berdir's code here]", array('type' => 'inline', 'scope' => 'footer'));

— Joshua Stewardson

Sẽ thật tuyệt nếu ai đó có thể cập nhật điều này để cũng hoạt động với jquerys mới .on()thay vì .bind().

— Letharion

Bạn không nên phản ứng với sự kiện document. Yet. Bạn nên sử dụng một hành vi drupal.

— aaronbauman

0

Dựa trên bài đăng của Berdir, tôi đã có thể tinh chỉnh nó và khiến nó hoạt động trong một mô-đun tùy chỉnh.

Vì vậy, trong tệp .module của tôi, tôi đã thêm dòng này dưới hàm hook_init ()

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

Sau đó, trong tệp 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']();
    }
});

})

Tất nhiên, trong trường hợp này, nó sẽ chỉ áp dụng cho Hồ sơ người dùng.

— mikeDOTexe
nguồn