SORU
16 HAZİRAN 2009, Salı


jQuery CSS döner elemanın tarzı sözde bu eleman klon için hesaplanan bu eklenti?

Bir şekilde jQuery 1 eşleşen öğe için hesaplanan tarzı bir nesneyi döndürmek için kullanarak arıyorum. Sonra jQuery css metodu başka bir çağrı için bu nesne geçerim.

width ile örneğin, aşağıdaki 2 divs aynı genişlikte olması için ne yapabilirim:

$('#div2').width($('#div1').width());

Eğer yapabilseydim güzel olurdubir metin giriş mevcut bir yayılma alanı gibi görünmesi:

$('#input1').css($('#span1').css());

nerede .() css hiçbir bağımsız değişken döndürür .css(obj) geçirilen bir nesne.

(Bu bir WordPress kullanmak için bir eklenti bulamadım, ama var gibi görünüyor. Eğer var değil mi, benimki aşağıda bir eklenti dönüşmesi ve kullandığım tüm özellikleri ile göndeririz.)

Temel olarak, sözde bazı öğeleri çoğaltmak istiyorumama farklı bir etiket kullanın. Örneğin, aynı görünüyor üzerine bir giriş elemanı gizlemek koymak istiyorum ki li bir eleman var. Kullanıcı türlerieleman online düzenleme gibi görünüyor.

Ayrıca düzenleme için bu sözde klonlama sorunu için diğer yaklaşımlara açığım.Herhangi bir öneriniz var mı?

Ben şu anda. Tek sorun, sadece tüm olası stilleri oluyor. Bu çok uzun bir liste olabilir.

< / ^ hr .

jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
    var attr = ['font-family','font-size','font-weight','font-style','color',
	'text-transform','text-decoration','letter-spacing','word-spacing',
	'line-height','text-align','vertical-align','direction','background-color',
	'background-image','background-repeat','background-position',
	'background-attachment','opacity','width','height','top','right','bottom',
	'left','margin-top','margin-right','margin-bottom','margin-left',
	'padding-top','padding-right','padding-bottom','padding-left',
	'border-top-width','border-right-width','border-bottom-width',
	'border-left-width','border-top-color','border-right-color',
	'border-bottom-color','border-left-color','border-top-style',
	'border-right-style','border-bottom-style','border-left-style','position',
	'display','visibility','z-index','overflow-x','overflow-y','white-space',
	'clip','float','clear','cursor','list-style-image','list-style-position',
	'list-style-type','marker-offset'];
    var len = attr.length, obj = {};
    for (var i = 0; i < len; i  ) 
        obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
    return obj;
}

Edit: şimdi bir süre için yukarıdaki kodu kullanıyorum. İyi çalışıyor ve kesinlikle bir istisna dışında orijinal css yöntemi gibi davranır: 0 besten geçirilirse, döner hesaplanan style nesne.

Gördüğünüz gibi, derhal geçerli. bu durumda orijinal css yöntemini çağırır. Aksi halde, listelenen tüm özellikleri hesaplanan stilleri (Firebug hesaplanan stil listesinden toplandı) alır. Değerler uzun bir liste oluyor olsa da, oldukça hızlı. Başkalarına yararlı olduğunu umuyorum.

CEVAP
20 HAZİRAN 2011, PAZARTESİ


İki yıl geç, ama aradığınız çözüm buldum. İşte tam olarak istediğiniz şeyi yapar, ama alır yazdığım bir eklenti (plugin biçimde başka bir adamın işlevi sararak)tümYANİ bütün tarayıcılarda Olası stilleri.

jquery.getStyleObject.js:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for(var i=0;i<style.length;i  ){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

Temel kullanımı oldukça basittir:

var style = $("#original").getStyleObject(); // copy all computed CSS properties
$("#original").clone() // clone the object
    .parent() // select it's parent
    .appendTo() // append the cloned object to the parent, after the original
                // (though this could really be anywhere and ought to be somewhere
                // else to show that the styles aren't just inherited again
    .css(style); // apply cloned styles

Bu yardımcı olur umarım.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • lilstevie89

    lilstevie89

    25 Mart 2011
  • Mr_BrettHooge

    Mr_BrettHoog

    3 Ocak 2011
  • SRC RECORDS

    SRC RECORDS

    2 EKİM 2006