Bir div'yükseklik değişiklikleri jQuery kullanarak s ne zaman tespit
Eklenen bir içeriği olan bir div var ve dinamik olarak çıkardım, yüksekliği sık değişiyor. Ben de kesinlikle doğrudan javascript altında konumlandırılmış bir div, div yüksekliği değiştiğinde tespit edebilirim sürece, altındaki div konumlandırmak istemiyorum.
Nasıl div yüksekliği değişiklikleri algılayabilir miyim? Kullanmam gereken bazı jQuery olay var sanırım, ama kanca içine hangisi olduğundan emin değilim.
Teşekkürler.
CEVAP
Bir eklenti bir ara cevap yazdımattrchangetemelde bir dinleyici ekler dinleyici öznitelik değiştirme işlevi. Bir eklenti olarak söylüyorum, ama aslında eğer eklenti dolayı kodu kapalı şerit ve temel işlevleri kullanın.. isterseniz çok basit bir fonksiyon jQuery plugin olarak yazılmıştır.
Not: Bu kod yoklama kullanmaz
5 ** Bu basit bir demo göz atın
$(function () {
var prevHeight = $('#test').height();
$('#test').attrchange({
callback: function (e) {
var curHeight = $(this).height();
if (prevHeight !== curHeight) {
$('#logger').text('height changed from ' prevHeight ' to ' curHeight);
prevHeight = curHeight;
}
}
}).resizable();
});
Sayfa eklenti:http://meetselva.github.io/attrchange/
Minified sürümü:(1.68 kb)
(function(e){function t(){var e=document.createElement("p");var t=false;if(e.addEventListener)e.addEventListener("DOMAttrModified",function(){t=true},false);else if(e.attachEvent)e.attachEvent("onDOMAttrModified",function(){t=true});else return false;e.setAttribute("id","target");return t}function n(t,n){if(t){var r=this.data("attr-old-value");if(n.attributeName.indexOf("style")>=0){if(!r["style"])r["style"]={};var i=n.attributeName.split(".");n.attributeName=i[0];n.oldValue=r["style"][i[1]];n.newValue=i[1] ":" this.prop("style")[e.camelCase(i[1])];r["style"][i[1]]=n.newValue}else{n.oldValue=r[n.attributeName];n.newValue=this.attr(n.attributeName);r[n.attributeName]=n.newValue}this.data("attr-old-value",r)}}var r=window.MutationObserver||window.WebKitMutationObserver;e.fn.attrchange=function(i){var s={trackValues:false,callback:e.noop};if(typeof i==="function"){s.callback=i}else{e.extend(s,i)}if(s.trackValues){e(this).each(function(t,n){var r={};for(var i,t=0,s=n.attributes,o=s.length;t<o;t ){i=s.item(t);r[i.nodeName]=i.value}e(this).data("attr-old-value",r)})}if(r){var o={subtree:false,attributes:true,attributeOldValue:s.trackValues};var u=new r(function(t){t.forEach(function(t){var n=t.target;if(s.trackValues){t.newValue=e(n).attr(t.attributeName)}s.callback.call(n,t)})});return this.each(function(){u.observe(this,o)})}else if(t()){return this.on("DOMAttrModified",function(e){if(e.originalEvent)e=e.originalEvent;e.attributeName=e.attrName;e.oldValue=e.prevValue;s.callback.call(this,e)})}else if("onpropertychange"in document.body){return this.on("propertychange",function(t){t.attributeName=window.event.propertyName;n.call(e(this),s.trackValues,t);s.callback.call(this,t)})}return this}})(jQuery)
≪input type="text" bir tüm...
İPad kullanıcıları jQuery kullanarak t...
JQuery ile element içeriği değişiklikl...
Kullanıcı alt jQuery ile div kaydırır ...
Jquery Olay : bir div html/metin değiş...