开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
Element.style.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：17k
源码类别：

中间件编程

开发平台：

JavaScript

Element.style.js：源码内容
  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.Element
  3.  */
  4. Ext.Element.addMethods(function(){  
  5.     // local style camelizing for speed
  6.     var propCache = {},
  7.         camelRe = /(-[a-z])/gi,
  8.         classReCache = {},
  9.         view = document.defaultView,
  10.         propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
  11.         opacityRe = /alpha(opacity=(.*))/i,
  12.         trimRe = /^s+|s+$/g,
  13.         EL = Ext.Element,   
  14.         PADDING = "padding",
  15.         MARGIN = "margin",
  16.         BORDER = "border",
  17.         LEFT = "-left",
  18.         RIGHT = "-right",
  19.         TOP = "-top",
  20.         BOTTOM = "-bottom",
  21.         WIDTH = "-width",    
  22.         MATH = Math,
  23.         HIDDEN = 'hidden',
  24.         ISCLIPPED = 'isClipped',
  25.         OVERFLOW = 'overflow',
  26.         OVERFLOWX = 'overflow-x',
  27.         OVERFLOWY = 'overflow-y',
  28.         ORIGINALCLIP = 'originalClip',
  29.         // special markup used throughout Ext when box wrapping elements    
  30.         borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
  31.         paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
  32.         margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
  33.         data = Ext.Element.data;
  34.         
  35.     
  36.     // private  
  37.     function camelFn(m, a) {
  38.         return a.charAt(1).toUpperCase();
  39.     }
  40.     
  41.     // private (needs to be called => addStyles.call(this, sides, styles))
  42.     function addStyles(sides, styles){
  43.         var val = 0;    
  44.         
  45.         Ext.each(sides.match(/w/g), function(s) {
  46.             if (s = parseInt(this.getStyle(styles[s]), 10)) {
  47.                 val += MATH.abs(s);      
  48.             }
  49.         },
  50.         this);
  51.         return val;
  52.     }
  54.     function chkCache(prop) {
  55.         return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
  57.     }
  58.             
  59.     return {    
  60.         // private  ==> used by Fx  
  61.         adjustWidth : function(width) {
  62.             var me = this;
  63.             var isNum = (typeof width == "number");
  64.             if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
  65.                width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
  66.             }
  67.             return (isNum && width < 0) ? 0 : width;
  68.         },
  69.         
  70.         // private   ==> used by Fx 
  71.         adjustHeight : function(height) {
  72.             var me = this;
  73.             var isNum = (typeof height == "number");
  74.             if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
  75.                height -= (me.getBorderWidth("tb") + me.getPadding("tb"));               
  76.             }
  77.             return (isNum && height < 0) ? 0 : height;
  78.         },
  79.     
  80.     
  81.         /**
  82.          * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
  83.          * @param {String/Array} className The CSS class to add, or an array of classes
  84.          * @return {Ext.Element} this
  85.          */
  86.         addClass : function(className){
  87.             var me = this;
  88.             Ext.each(className, function(v) {
  89.                 me.dom.className += (!me.hasClass(v) && v ? " " + v : "");  
  90.             });
  91.             return me;
  92.         },
  93.     
  94.         /**
  95.          * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
  96.          * @param {String/Array} className The CSS class to add, or an array of classes
  97.          * @return {Ext.Element} this
  98.          */
  99.         radioClass : function(className){
  100.             Ext.each(this.dom.parentNode.childNodes, function(v) {
  101.                 if(v.nodeType == 1) {
  102.                     Ext.fly(v, '_internal').removeClass(className);          
  103.                 }
  104.             });
  105.             return this.addClass(className);
  106.         },
  107.     
  108.         /**
  109.          * Removes one or more CSS classes from the element.
  110.          * @param {String/Array} className The CSS class to remove, or an array of classes
  111.          * @return {Ext.Element} this
  112.          */
  113.         removeClass : function(className){
  114.             var me = this;
  115.             if (me.dom.className) {
  116.                 Ext.each(className, function(v) {               
  117.                     me.dom.className = me.dom.className.replace(
  118.                         classReCache[v] = classReCache[v] || new RegExp('(?:^|\s+)' + v + '(?:\s+|$)', "g"), 
  119.                         " ");               
  120.                 });    
  121.             }
  122.             return me;
  123.         },
  124.     
  125.         /**
  126.          * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
  127.          * @param {String} className The CSS class to toggle
  128.          * @return {Ext.Element} this
  129.          */
  130.         toggleClass : function(className){
  131.             return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
  132.         },
  133.     
  134.         /**
  135.          * Checks if the specified CSS class exists on this element's DOM node.
  136.          * @param {String} className The CSS class to check for
  137.          * @return {Boolean} True if the class exists, else false
  138.          */
  139.         hasClass : function(className){
  140.             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
  141.         },
  142.     
  143.         /**
  144.          * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
  145.          * @param {String} oldClassName The CSS class to replace
  146.          * @param {String} newClassName The replacement CSS class
  147.          * @return {Ext.Element} this
  148.          */
  149.         replaceClass : function(oldClassName, newClassName){
  150.             return this.removeClass(oldClassName).addClass(newClassName);
  151.         },
  152.         
  153.         isStyle : function(style, val) {
  154.             return this.getStyle(style) == val;  
  155.         },
  156.     
  157.         /**
  158.          * Normalizes currentStyle and computedStyle.
  159.          * @param {String} property The style property whose value is returned.
  160.          * @return {String} The current value of the style property for this element.
  161.          */
  162.         getStyle : function(){         
  163.             return view && view.getComputedStyle ?
  164.                 function(prop){
  165.                     var el = this.dom,
  166.                         v,                  
  167.                         cs;
  168.                     if(el == document) return null;
  169.                     prop = chkCache(prop);
  170.                     return (v = el.style[prop]) ? v : 
  171.                            (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
  172.                 } :
  173.                 function(prop){      
  174.                     var el = this.dom, 
  175.                         m, 
  176.                         cs;     
  177.                         
  178.                     if(el == document) return null;      
  179.                     if (prop == 'opacity') {
  180.                         if (el.style.filter.match) {                       
  181.                             if(m = el.style.filter.match(opacityRe)){
  182.                                 var fv = parseFloat(m[1]);
  183.                                 if(!isNaN(fv)){
  184.                                     return fv ? fv / 100 : 0;
  185.                                 }
  186.                             }
  187.                         }
  188.                         return 1;
  189.                     }
  190.                     prop = chkCache(prop);  
  191.                     return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
  192.                 };
  193.         }(),
  194.         
  195.         /**
  196.          * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
  197.          * are convert to standard 6 digit hex color.
  198.          * @param {String} attr The css attribute
  199.          * @param {String} defaultValue The default value to use when a valid color isn't found
  200.          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
  201.          * color anims.
  202.          */
  203.         getColor : function(attr, defaultValue, prefix){
  204.             var v = this.getStyle(attr),
  205.                 color = prefix || '#',
  206.                 h;
  207.                 
  208.             if(!v || /transparent|inherit/.test(v)){
  209.                 return defaultValue;
  210.             }
  211.             if(/^r/.test(v)){
  212.                 Ext.each(v.slice(4, v.length -1).split(','), function(s){
  213.                     h = parseInt(s, 10);
  214.                     color += (h < 16 ? '0' : '') + h.toString(16); 
  215.                 });
  216.             }else{
  217.                 v = v.replace('#', '');
  218.                 color += v.length == 3 ? v.replace(/^(w)(w)(w)$/, '$1$1$2$2$3$3') : v;
  219.             }
  220.             return(color.length > 5 ? color.toLowerCase() : defaultValue);
  221.         },
  222.     
  223.         /**
  224.          * Wrapper for setting style properties, also takes single object parameter of multiple styles.
  225.          * @param {String/Object} property The style property to be set, or an object of multiple styles.
  226.          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
  227.          * @return {Ext.Element} this
  228.          */
  229.         setStyle : function(prop, value){
  230.             var tmp, 
  231.                 style,
  232.                 camel;
  233.             if (!Ext.isObject(prop)) {
  234.                 tmp = {};
  235.                 tmp[prop] = value;          
  236.                 prop = tmp;
  237.             }
  238.             for (style in prop) {
  239.                 value = prop[style];            
  240.                 style == 'opacity' ? 
  241.                     this.setOpacity(value) : 
  242.                     this.dom.style[chkCache(style)] = value;
  243.             }
  244.             return this;
  245.         },
  246.         
  247.         /**
  248.          * Set the opacity of the element
  249.          * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
  250.          * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
  251.          * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
  252.          * @return {Ext.Element} this
  253.          */
  254.          setOpacity : function(opacity, animate){
  255.             var me = this,
  256.                 s = me.dom.style;
  257.                 
  258.             if(!animate || !me.anim){            
  259.                 if(Ext.isIE){
  260.                     var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', 
  261.                     val = s.filter.replace(opacityRe, '').replace(trimRe, '');
  263.                     s.zoom = 1;
  264.                     s.filter = val + (val.length > 0 ? ' ' : '') + opac;
  265.                 }else{
  266.                     s.opacity = opacity;
  267.                 }
  268.             }else{
  269.                 me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
  270.             }
  271.             return me;
  272.         },
  273.         
  274.         /**
  275.          * Clears any opacity settings from this element. Required in some cases for IE.
  276.          * @return {Ext.Element} this
  277.          */
  278.         clearOpacity : function(){
  279.             var style = this.dom.style;
  280.             if(Ext.isIE){
  281.                 if(!Ext.isEmpty(style.filter)){
  282.                     style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
  283.                 }
  284.             }else{
  285.                 style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
  286.             }
  287.             return this;
  288.         },
  289.     
  290.         /**
  291.          * Returns the offset height of the element
  292.          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
  293.          * @return {Number} The element's height
  294.          */
  295.         getHeight : function(contentHeight){
  296.             var me = this,
  297.                 dom = me.dom,
  298.                 h = MATH.max(dom.offsetHeight, dom.clientHeight) || 0;
  299.             h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
  300.             return h < 0 ? 0 : h;
  301.         },
  302.     
  303.         /**
  304.          * Returns the offset width of the element
  305.          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
  306.          * @return {Number} The element's width
  307.          */
  308.         getWidth : function(contentWidth){
  309.             var me = this,
  310.                 dom = me.dom,
  311.                 w = MATH.max(dom.offsetWidth, dom.clientWidth) || 0;
  312.             w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
  313.             return w < 0 ? 0 : w;
  314.         },
  315.     
  316.         /**
  317.          * Set the width of this Element.
  318.          * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
  319.          * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
  320.          * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
  321.          * </ul></div>
  322.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  323.          * @return {Ext.Element} this
  324.          */
  325.         setWidth : function(width, animate){
  326.             var me = this;
  327.             width = me.adjustWidth(width);
  328.             !animate || !me.anim ? 
  329.                 me.dom.style.width = me.addUnits(width) :
  330.                 me.anim({width : {to : width}}, me.preanim(arguments, 1));
  331.             return me;
  332.         },
  333.     
  334.         /**
  335.          * Set the height of this Element.
  336.          * <pre><code>
  337. // change the height to 200px and animate with default configuration
  338. Ext.fly('elementId').setHeight(200, true);
  340. // change the height to 150px and animate with a custom configuration
  341. Ext.fly('elId').setHeight(150, {
  342.     duration : .5, // animation will have a duration of .5 seconds
  343.     // will change the content to "finished"
  344.     callback: function(){ this.{@link #update}("finished"); } 
  345. });
  346.          * </code></pre>
  347.          * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
  348.          * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
  349.          * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
  350.          * </ul></div>
  351.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  352.          * @return {Ext.Element} this
  353.          */
  354.          setHeight : function(height, animate){
  355.             var me = this;
  356.             height = me.adjustHeight(height);
  357.             !animate || !me.anim ? 
  358.                 me.dom.style.height = me.addUnits(height) :
  359.                 me.anim({height : {to : height}}, me.preanim(arguments, 1));
  360.             return me;
  361.         },
  362.         
  363.         /**
  364.          * Gets the width of the border(s) for the specified side(s)
  365.          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
  366.          * passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
  367.          * @return {Number} The width of the sides passed added together
  368.          */
  369.         getBorderWidth : function(side){
  370.             return addStyles.call(this, side, borders);
  371.         },
  372.     
  373.         /**
  374.          * Gets the width of the padding(s) for the specified side(s)
  375.          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
  376.          * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
  377.          * @return {Number} The padding of the sides passed added together
  378.          */
  379.         getPadding : function(side){
  380.             return addStyles.call(this, side, paddings);
  381.         },
  382.     
  383.         /**
  384.          *  Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
  385.          * @return {Ext.Element} this
  386.          */
  387.         clip : function(){
  388.             var me = this,
  389.                 dom = me.dom;
  390.                 
  391.             if(!data(dom, ISCLIPPED)){
  392.                 data(dom, ISCLIPPED, true);
  393.                 data(dom, ORIGINALCLIP, {
  394.                     o: me.getStyle(OVERFLOW),
  395.                     x: me.getStyle(OVERFLOWX),
  396.                     y: me.getStyle(OVERFLOWY)
  397.                 });
  398.                 me.setStyle(OVERFLOW, HIDDEN);
  399.                 me.setStyle(OVERFLOWX, HIDDEN);
  400.                 me.setStyle(OVERFLOWY, HIDDEN);
  401.             }
  402.             return me;
  403.         },
  404.     
  405.         /**
  406.          *  Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
  407.          * @return {Ext.Element} this
  408.          */
  409.         unclip : function(){
  410.             var me = this,
  411.                 dom = me.dom;
  412.                 
  413.             if(data(dom, ISCLIPPED)){
  414.                 data(dom, ISCLIPPED, false);
  415.                 var o = data(dom, ORIGINALCLIP);
  416.                 if(o.o){
  417.                     me.setStyle(OVERFLOW, o.o);
  418.                 }
  419.                 if(o.x){
  420.                     me.setStyle(OVERFLOWX, o.x);
  421.                 }
  422.                 if(o.y){
  423.                     me.setStyle(OVERFLOWY, o.y);
  424.                 }
  425.             }
  426.             return me;
  427.         },
  428.         
  429.         addStyles : addStyles,
  430.         margins : margins
  431.     }
  432. }()         
  433. );