cách gọi các hành động jquery khác nhau trong thiết kế đáp ứng

Question

Tôi đang ở thời điểm chuyển đổi dự án của mình thành thiết kế đáp ứng.

Giải pháp tiện dụng và phổ biến nhất bạn đề xuất để triển khai các khối jQuery khác nhau cho từng điểm dừng là gì?

Tôi muốn giữ tất cả tập lệnh trong một nguyên nhân của số lượng yêu cầu http.

Đó là những gì tôi đã tìm thấy:

• breakpoint.js -> xác định tất cả breakpoint tăng gấp đôi trong CSS & JS
• http://responsejs.com/ -> xác định breakpoint trong cơ thể dữ liệu attr
• OnMediaQuery -> xác định do con người tên có thể đọc được cho các điểm ngắt (IMHO tốt hơn, vì bạn không bị ràng buộc với pixel)

Vấn đề của tôi là tất cả xác định callbacks, nhưng tôi không biết làm thế nào để ràng buộc hoặc hủy bỏ bất kỳ trình lắng nghe sự kiện jQuery nào trong các trường hợp này.

ví dụ: Tôi có:

$('#selector').click(function() { 
    alert('selector clicked'); 
}); 

nhưng điều đó chỉ xảy ra nếu ở chiều rộng tối đa 320px. Trong kích thước màn hình ở trên mà nhấp chuột phải trả về false hoặc thực hiện bất kỳ hành động nào khác

tại thời điểm này, tôi không biết cách thực hiện điều này.

Answer 1

Bạn chỉ có thể tạo điểm ngắt của riêng mình trong JS. Một cái gì đó như thế này. Điều chỉnh theo nhu cầu của bạn.

var isBreakPoint = function (bp) { 
    var bps = [320, 480, 768, 1024], 
     w = $(window).width(), 
     min, max 
    for (var i = 0, l = bps.length; i < l; i++) { 
     if (bps[i] === bp) { 
     min = bps[i-1] || 0 
     max = bps[i] 
     break 
     } 
    } 
    return w > min && w <= max 
} 

// Usage 
if (isBreakPoint(480)) { ... } // Breakpoint between 320 and 480 

Answer 2

$('#selector').click(function() { 
    if (parseInt($(window).width()) < 320) { 
     ... 
    } 
}); 

Answer 3

Tôi sai lầm xung quanh với một số thư viện và các công cụ và kết thúc bằng loại người biết lắng nghe phản ứng nhanh. Nó sử dụng các truy vấn phương tiện CSS cho các điểm ngắt và UnderscoreJS cho bộ điều chỉnh. Lợi thế tôi thấy là các điểm ngắt được định nghĩa trong CSS thay vì phân mảnh xung quanh các tập lệnh khác nhau.

Ví dụ CSS @media breakpoint sử dụng :after trên body:

body:after { 
    content: 'widescreen'; 
    display: none; 
} 
@media screen and (max-width: 1024px){ 
    body:after { 
     content: "extra-large"; 
    } 
} 
@media screen and (max-width: 768px){ 
    body:after { 
     content: "large"; 
    } 
} 
@media screen and (max-width: 640px){ 
    body:after { 
     content: "medium"; 
    } 
} 
@media screen and (max-width: 480px){ 
    body:after { 
     content: "small"; 
    } 
} 
@media screen and (max-width: 320px){ 
    body:after { 
     content: "tiny"; 
    } 
} 

Ví dụ người nghe kịch bản chờ đợi để bắn dựa trên nội dung của body:after. Như bạn có thể thấy nó được định nghĩa là 2 dãy trong ví dụ này cho show/hide/di chuyển/tạo ra các widget dựa trên tính tổng quát thiết bị:

<script type ="text/javascript"> 
$(window).resize(_.debounce(function(e){ 
    var size = window.getComputedStyle(document.body,':after').content.replace(/"|'/g, ''), 
     mobile = ["tiny", "small", "medium", "large"].indexOf(size), 
     desktop = ["extra-large", "widescreen"].indexOf(size); 

    $('.placehold').html('computed breakpoint: ' + size + '<br />mobile index = ' + mobile + '<br />desktop index = ' + desktop); 

    if (mobile != -1) { 
     $('.placehold2').html('mobile range'); 
    } else if (desktop != -1) { 
     $('.placehold2').html('desktop range'); 
    } 
}, 100)).trigger('resize'); 
</script> 

http://jsfiddle.net/Dhaupin/nw7qbdzx/ - Chỉ cần thay đổi kích thước cửa sổ đầu ra trong jsfiddle để kiểm tra nó ra.

CHỈNH SỬA: Dường như các trình duyệt hiển thị: sau khi nội dung qua window.getComputedStyle(document.body,':after').content khác nhau và chèn dấu ngoặc đơn hoặc kép. Thêm một thay thế để chà chúng ra.

Answer 4

Nếu bạn đang nhắm mục tiêu các trình duyệt hiện đại (IE10 trở lên và không phải là thiết bị di động IE), thì bạn nên sử dụng phương pháp window.matchMedia() mới, vì sự khác biệt giữa tất cả các trình duyệt khác nhau về cách chúng đo chiều rộng thanh cuộn có nghĩa là nếu bạn sử dụng ví dụ window.width(), sẽ có một phạm vi nhỏ pixel mà CSS hoạt động khác với JS (Tôi thấy điều này theo cách khó).

Bài viết này đi vào chi tiết: https://www.fourfront.us/blog/jquery-window-width-and-media-queries

Sử dụng một cái gì đó như sau để JS của bạn và làm việc CSS vào chính xác các breakpoint cùng:

if (window.matchMedia("(min-width: 400px)").matches) { 
    /* the viewport is at least 400 pixels wide, write code specific for that */ 
} else { 
    /* the viewport is less than 400 pixels wide, write code specific for that */ 
} 

Mozilla Developer Network đã ghi ở đây : https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia

Answer 5

Nếu bạn đang sử dụng Bootstrap 4, bạn có thể sử dụng plugin jQuery này để kiểm tra điểm ngắt được đặt bằng cách kiểm tra thuộc tính hiển thị CSS của phần tử.

https://jacoblett.github.io/IfBreakpoint/

Sau đó, sử dụng nó như

if (xs == true) { 
    alert("mobile first"); 
} 

// Update on window resize 
$(window).resize(function(){ 
    $("h2").text(breakpoint); 
});