decoupling styles retrieval from the attr method
This commit is contained in:
Brandon Aaron
parent
9476530fa1
commit
d7d908b05a
14 changed files with 4177 additions and 257 deletions
|
|
@ -1,30 +1,26 @@
|
|||
// exclude the following css properties to add px
|
||||
var exclude = /z-?index|font-?weight|opacity|zoom|line-?height/i,
|
||||
// cache defaultView
|
||||
defaultView = document.defaultView || {};
|
||||
|
||||
jQuery.fn.extend({
|
||||
attr: function( name, value, type ) {
|
||||
attr: function( name, value ) {
|
||||
var options = name, isFunction = jQuery.isFunction( value );
|
||||
|
||||
// Look for the case where we're accessing a style value
|
||||
if ( typeof name === "string" ) {
|
||||
// Are we setting the attribute?
|
||||
if ( value === undefined ) {
|
||||
return this.length ?
|
||||
jQuery[ type || "attr" ]( this[0], name ) :
|
||||
jQuery.attr( this[0], name ) :
|
||||
null;
|
||||
|
||||
// Convert name, value params to options hash format
|
||||
} else {
|
||||
options = {};
|
||||
options[ name ] = value;
|
||||
}
|
||||
}
|
||||
|
||||
// Check to see if we're setting style values
|
||||
// For each element...
|
||||
for ( var i = 0, l = this.length; i < l; i++ ) {
|
||||
var elem = this[i];
|
||||
|
||||
// Set all the styles
|
||||
// Set all the attributes
|
||||
for ( var prop in options ) {
|
||||
value = options[prop];
|
||||
|
||||
|
|
@ -32,24 +28,13 @@ jQuery.fn.extend({
|
|||
value = value.call( elem, i );
|
||||
}
|
||||
|
||||
if ( typeof value === "number" && type === "curCSS" && !exclude.test(prop) ) {
|
||||
value = value + "px";
|
||||
}
|
||||
|
||||
jQuery.attr( type ? elem.style : elem, prop, value );
|
||||
jQuery.attr( elem, prop, value );
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
css: function( key, value ) {
|
||||
// ignore negative width and height values
|
||||
if ( (key == 'width' || key == 'height') && parseFloat(value) < 0 )
|
||||
value = undefined;
|
||||
return this.attr( key, value, "curCSS" );
|
||||
},
|
||||
|
||||
hasClass: function( selector ) {
|
||||
return !!selector && this.is( "." + selector );
|
||||
},
|
||||
|
|
@ -181,119 +166,6 @@ jQuery.extend({
|
|||
}
|
||||
},
|
||||
|
||||
// A method for quickly swapping in/out CSS properties to get correct calculations
|
||||
swap: function( elem, options, callback ) {
|
||||
var old = {};
|
||||
// Remember the old values, and insert the new ones
|
||||
for ( var name in options ) {
|
||||
old[ name ] = elem.style[ name ];
|
||||
elem.style[ name ] = options[ name ];
|
||||
}
|
||||
|
||||
callback.call( elem );
|
||||
|
||||
// Revert the old values
|
||||
for ( var name in options )
|
||||
elem.style[ name ] = old[ name ];
|
||||
},
|
||||
|
||||
css: function( elem, name, force, extra ) {
|
||||
if ( name == "width" || name == "height" ) {
|
||||
var val, props = { position: "absolute", visibility: "hidden", display:"block" }, which = name == "width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ];
|
||||
|
||||
function getWH() {
|
||||
val = name == "width" ? elem.offsetWidth : elem.offsetHeight;
|
||||
|
||||
if ( extra === "border" )
|
||||
return;
|
||||
|
||||
jQuery.each( which, function() {
|
||||
if ( !extra )
|
||||
val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
|
||||
if ( extra === "margin" )
|
||||
val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0;
|
||||
else
|
||||
val -= parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
|
||||
});
|
||||
}
|
||||
|
||||
if ( elem.offsetWidth !== 0 )
|
||||
getWH();
|
||||
else
|
||||
jQuery.swap( elem, props, getWH );
|
||||
|
||||
return Math.max(0, Math.round(val));
|
||||
}
|
||||
|
||||
return jQuery.curCSS( elem, name, force );
|
||||
},
|
||||
|
||||
curCSS: function( elem, name, force ) {
|
||||
var ret, style = elem.style;
|
||||
|
||||
// We need to handle opacity special in IE
|
||||
if ( name == "opacity" && !jQuery.support.opacity ) {
|
||||
ret = jQuery.attr( style, "opacity" );
|
||||
|
||||
return ret == "" ?
|
||||
"1" :
|
||||
ret;
|
||||
}
|
||||
|
||||
// Make sure we're using the right name for getting the float value
|
||||
if ( name.match( /float/i ) )
|
||||
name = styleFloat;
|
||||
|
||||
if ( !force && style && style[ name ] )
|
||||
ret = style[ name ];
|
||||
|
||||
else if ( defaultView.getComputedStyle ) {
|
||||
|
||||
// Only "float" is needed here
|
||||
if ( name.match( /float/i ) )
|
||||
name = "float";
|
||||
|
||||
name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
|
||||
|
||||
var computedStyle = defaultView.getComputedStyle( elem, null );
|
||||
|
||||
if ( computedStyle )
|
||||
ret = computedStyle.getPropertyValue( name );
|
||||
|
||||
// We should always get a number back from opacity
|
||||
if ( name == "opacity" && ret == "" )
|
||||
ret = "1";
|
||||
|
||||
} else if ( elem.currentStyle ) {
|
||||
var camelCase = name.replace(/\-(\w)/g, function(all, letter){
|
||||
return letter.toUpperCase();
|
||||
});
|
||||
|
||||
ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
|
||||
|
||||
// From the awesome hack by Dean Edwards
|
||||
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
|
||||
|
||||
// If we're not dealing with a regular pixel number
|
||||
// but a number that has a weird ending, we need to convert it to pixels
|
||||
if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
|
||||
// Remember the original values
|
||||
var left = style.left, rsLeft = elem.runtimeStyle.left;
|
||||
|
||||
// Put in the new values to get a computed value out
|
||||
elem.runtimeStyle.left = elem.currentStyle.left;
|
||||
style.left = ret || 0;
|
||||
ret = style.pixelLeft + "px";
|
||||
|
||||
// Revert the changed values
|
||||
style.left = left;
|
||||
elem.runtimeStyle.left = rsLeft;
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
attr: function( elem, name, value ) {
|
||||
// don't set attributes on text and comment nodes
|
||||
if (!elem || elem.nodeType == 3 || elem.nodeType == 8)
|
||||
|
|
@ -307,7 +179,6 @@ jQuery.extend({
|
|||
name = notxml && jQuery.props[ name ] || name;
|
||||
|
||||
// Only do all the following if this is a node (faster for style)
|
||||
// IE elem.getAttribute passes even for style
|
||||
if ( elem.tagName ) {
|
||||
|
||||
// These attributes require special treatment
|
||||
|
|
@ -348,8 +219,12 @@ jQuery.extend({
|
|||
return elem[ name ];
|
||||
}
|
||||
|
||||
if ( !jQuery.support.style && notxml && name == "style" )
|
||||
return jQuery.attr( elem.style, "cssText", value );
|
||||
if ( !jQuery.support.style && notxml && name == "style" ) {
|
||||
if ( set )
|
||||
elem.style.cssText = "" + value;
|
||||
|
||||
return elem.style.cssText;
|
||||
}
|
||||
|
||||
if ( set )
|
||||
// convert the value to a string (all browsers do this but IE) see #1070
|
||||
|
|
@ -365,31 +240,7 @@ jQuery.extend({
|
|||
}
|
||||
|
||||
// elem is actually elem.style ... set the style
|
||||
|
||||
// IE uses filters for opacity
|
||||
if ( !jQuery.support.opacity && name == "opacity" ) {
|
||||
if ( set ) {
|
||||
// IE has trouble with opacity if it does not have layout
|
||||
// Force it by setting the zoom level
|
||||
elem.zoom = 1;
|
||||
|
||||
// Set the alpha filter to set the opacity
|
||||
elem.filter = (elem.filter || "").replace( /alpha\([^)]*\)/, "" ) +
|
||||
(parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");
|
||||
}
|
||||
|
||||
return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
|
||||
(parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
|
||||
"";
|
||||
}
|
||||
|
||||
name = name.replace(/-([a-z])/ig, function(all, letter){
|
||||
return letter.toUpperCase();
|
||||
});
|
||||
|
||||
if ( set )
|
||||
elem[ name ] = value;
|
||||
|
||||
return elem[ name ];
|
||||
// Using attr for specific style information is now deprecated. Use style insead.
|
||||
return jQuery.style(elem, name, value);
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue