Kesme noktasına ulaşıldığında yangın jQuery

Question

Birden çok kesme noktasıyla duyarlı bir tasarıma sahibim. İçerikteki blok boyutlarının bazıları jQuery ile hesaplanır. Görüntü alanı değiştiğinde, bu boyutlar değişir ve bu nedenle hesaplama çalıştırılmalıdır. Referans öğesinin boyutu değiştiğinde bu olayları nasıl tetikleyebilirim? Referans öğesi, bir kesme noktası geçildiğinde değişir.

"Orientationchange" olayına baktım ama ihtiyacım olan sonuçlara sahip değil.

Answer 1

Çok az ayrıntı ve kod içermezsiniz, böylece yapabileceğimiz tek şey genel olarak yanıt vermektir.

Genellikle, bir .resize() olay işleyicisini yüklersiniz ve içerdiği pencerenin her yeniden boyutlandırması üzerinde, sonuç boyutlarının, düzeni yeniden hesaplamanız ve değiştirmeniz için değiştirip değiştirmeyeceğini kontrol edersiniz.

$(window).resize(function(e) { 
    // check dimensions here to decide if layout needs to be adjusted 
}); 

jQuery mobil ayrıca "portrait" veya "landscape" olarak e.orientation verir böyle orientationchange olayı destekler:

diğer Sayfadaki belirli bir parça üzerine bir boyut değişikliğini izlemek için herhangi bir DOM etkinlik yok

$(window).on("orientationchange", function(e) { 
    // check dimensions here to decide if layout needs to be adjusted 
}); 

window nesnesinden daha fazla. Bunun yerine, belirli bir öğenin pencerenin yeniden boyutlandırılması, bir yönlendirme değişikliği veya sayfada değişiklik yapan başka bir işlem olabilecek bir öğenin yeniden boyutlandırılmasına neden olabileceğini izlemeniz gerekir (bir tuşa basın veya bir şeye tıklayın, örnek). Ardından, diğer olaylar işlendiğinde ve işlendiğinde, hedef öğenizin boyutunu kontrol edebilir ve değişip değişmediğini görebilirsiniz.

(function($) { 
    var uniqueCntr = 0; 
    $.fn.resized = function (waitTime, fn) { 
     if (typeof waitTime === "function") { 
      fn = waitTime; 
      waitTime = 250; 
     } 
     var tag = "resizeTimer" + uniqueCntr++; 
     this.resize(function() { 
      var self = $(this); 
      var timer = self.data(tag); 
      if (timer) { 
       clearTimeout(timer); 
      } 
      timer = setTimeout(function() { 
       self.removeData(tag); 
       fn.call(self[0]); 
      }, waitTime); 
      self.data(tag, timer); 
     }); 
    } 
})(jQuery); 

Çalışma demo: https://jsfiddle.net/jfriend00/k415qunp/

Numune kullanımını:

---

İşte boyut değiştirerek durdurdu zaman sadece yeniden boyutlandırma hakkında size söyler, böylece yeniden boyutlandırma olayını debounces bir jQuery eklentisi var

Answer 2

This page size yardımcı olabilir. JS uygulamalarını kesme noktalarına dayalı olarak ve çapraz tarayıcı desteği ile yapıyorlar. Temel olarak .myClass'ın "content" özelliğini kullanarak gizli bir sahte öğe kullanıyorsunuz: sonra. Pencereyi yeniden boyutlandırma etkinliğine