JavaScript/Jquery Phát hiện va chạm cho cửa sổ bật lên

Question

Tôi đang viết một ứng dụng web có thể chạy trên cả trình duyệt iPad và Máy tính để bàn.

Tôi có một phần bộ lọc với cửa sổ bật lên tới từ phía bên (popup được hoàn toàn vị trí tương đối so với thẻ lọc <li>):

Mọi chuyện có vẻ tốt đẹp và dandy trên máy tính để bàn, nhưng trên một Ipad ở chế độ ngang, dưới cùng của cửa sổ bật lên bị cắt vì nó vượt ra ngoài chế độ xem.

tôi đã cố gắng giải quyết nó bằng cách sử queryUI position:

$('.capbIpadPopupAutoComplete').position({ 
    "my": "left center" ,  // Horizontal then vertical, missing values default to center 
    "at": "left top",  // Horizontal then vertical, missing values default to center 
    "of": $(this).closest('li'),  // Element to position against 
    // "offset": "20 30" ,  // Pixel values for offset, Horizontal then vertical, negative values OK 
    "collision": "fit flip" // What to do in case of 
}); 

nhưng điều đó chỉ hoạt động nếu popup va chạm với phía bên trái của màn hình và không đáy.

Tôi cũng cần phải đảm bảo tam giác di chuyển tương ứng vì nó luôn phải trỏ đến bộ lọc chính xác.

Tôi có đang sử dụng vị trí JqueryUI sai không? là có một giải pháp tốt hơn?

Here is a very simplified fiddle

Answer 1

Được rồi, có vẻ như vấn đề lớn nhất là "flip fit" không phải là thực sự là một giá trị hợp lệ cho collision. (Tôi nghĩ rằng nó đang được coi là "flip".) Có thể bạn đang tìm kiếm "flipfit" (không có khoảng trống), hoặc có thể chỉ "fit". Bạn cũng nên đảm bảo căn chỉnh bên phải bên phải của cửa sổ bật lên với cạnh bên trái của li - căn chỉnh bên trái với bên trái khiến chúng trùng lặp và sau đó nó bị lật vì không có đủ chỗ. Tôi đã chỉnh sửa mã của bạn và làm cho nó hoạt động tốt hơn (nhưng vẫn không hoàn hảo; bạn sẽ phải tinh chỉnh nó).

$('.capbIpadPopupAutoComplete').position({ 
    "my": "right top" ,  // Horizontal then vertical, missing values default to center 
    "at": "left top",  // Horizontal then vertical, missing values default to center 
    "of": $('.capbStrategicPlan'),  // Element to position against 
    // "offset": "20 30" ,  // Pixel values for offset, Horizontal then vertical, negative values OK 
    "collision": "fit" // What to do in case of 
}); 

$(this) dường như không được làm việc trong đối số of, vì vậy tôi thay thế nó.

Bạn cũng không cần đặt giá trị right của cửa sổ bật lên, vì .position đặt left và đặt cả hai đều nhấn vào cửa sổ bật lên.

Đối với mũi tên, tại sao bạn không chỉ định vị chúng một cách riêng biệt? Nếu cửa sổ bật lên phải di chuyển một chút, nó sẽ chồng chéo lên một số mũi tên, nhưng điều đó sẽ làm cho mũi tên trông nhỏ hơn.