Element.fx.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:12k
源码类别:

中间件编程

开发平台:

JavaScript

  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. /**
  5.  * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
  6.  * @static
  7.  * @type Number
  8.  */
  9. Ext.Element.VISIBILITY = 1;
  10. /**
  11.  * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
  12.  * @static
  13.  * @type Number
  14.  */
  15. Ext.Element.DISPLAY = 2;
  16. Ext.Element.addMethods(function(){
  17.     var VISIBILITY = "visibility",
  18.         DISPLAY = "display",
  19.         HIDDEN = "hidden",
  20.         NONE = "none",      
  21.         ORIGINALDISPLAY = 'originalDisplay',
  22.         VISMODE = 'visibilityMode',
  23.         ELDISPLAY = Ext.Element.DISPLAY,
  24.         data = Ext.Element.data,
  25.         getDisplay = function(dom){
  26.             var d = data(dom, ORIGINALDISPLAY);
  27.             if(d === undefined){
  28.                 data(dom, ORIGINALDISPLAY, d = '');
  29.             }
  30.             return d;
  31.         },
  32.         getVisMode = function(dom){
  33.             var m = data(dom, VISMODE);
  34.             if(m === undefined){
  35.                 data(dom, VISMODE, m = 1)
  36.             }
  37.             return m;
  38.         };
  39.     
  40.     return {
  41.         /**
  42.          * The element's default display mode  (defaults to "")
  43.          * @type String
  44.          */
  45.         originalDisplay : "",
  46.         visibilityMode : 1,
  47.         
  48.         /**
  49.          * Sets the element's visibility mode. When setVisible() is called it
  50.          * will use this to determine whether to set the visibility or the display property.
  51.          * @param visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
  52.          * @return {Ext.Element} this
  53.          */
  54.         setVisibilityMode : function(visMode){  
  55.             data(this.dom, VISMODE, visMode);
  56.             return this;
  57.         },
  58.         
  59.         /**
  60.          * Perform custom animation on this element.
  61.          * <div><ul class="mdetail-params">
  62.          * <li><u>Animation Properties</u></li>
  63.          * 
  64.          * <p>The Animation Control Object enables gradual transitions for any member of an
  65.          * element's style object that takes a numeric value including but not limited to
  66.          * these properties:</p><div><ul class="mdetail-params">
  67.          * <li><tt>bottom, top, left, right</tt></li>
  68.          * <li><tt>height, width</tt></li>
  69.          * <li><tt>margin, padding</tt></li>
  70.          * <li><tt>borderWidth</tt></li>
  71.          * <li><tt>opacity</tt></li>
  72.          * <li><tt>fontSize</tt></li>
  73.          * <li><tt>lineHeight</tt></li>
  74.          * </ul></div>
  75.          * 
  76.          * 
  77.          * <li><u>Animation Property Attributes</u></li>
  78.          * 
  79.          * <p>Each Animation Property is a config object with optional properties:</p>
  80.          * <div><ul class="mdetail-params">
  81.          * <li><tt>by</tt>*  : relative change - start at current value, change by this value</li>
  82.          * <li><tt>from</tt> : ignore current value, start from this value</li>
  83.          * <li><tt>to</tt>*  : start at current value, go to this value</li>
  84.          * <li><tt>unit</tt> : any allowable unit specification</li>
  85.          * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
  86.          * </ul></div>
  87.          * 
  88.          * <li><u>Animation Types</u></li>
  89.          * 
  90.          * <p>The supported animation types:</p><div><ul class="mdetail-params">
  91.          * <li><tt>'run'</tt> : Default
  92.          * <pre><code>
  93. var el = Ext.get('complexEl');
  94. el.animate(
  95.     // animation control object
  96.     {
  97.         borderWidth: {to: 3, from: 0},
  98.         opacity: {to: .3, from: 1},
  99.         height: {to: 50, from: el.getHeight()},
  100.         width: {to: 300, from: el.getWidth()},
  101.         top  : {by: - 100, unit: 'px'},
  102.     },
  103.     0.35,      // animation duration
  104.     null,      // callback
  105.     'easeOut', // easing method
  106.     'run'      // animation type ('run','color','motion','scroll')    
  107. );
  108.          * </code></pre>
  109.          * </li>
  110.          * <li><tt>'color'</tt>
  111.          * <p>Animates transition of background, text, or border colors.</p>
  112.          * <pre><code>
  113. el.animate(
  114.     // animation control object
  115.     {
  116.         color: { to: '#06e' },
  117.         backgroundColor: { to: '#e06' }
  118.     },
  119.     0.35,      // animation duration
  120.     null,      // callback
  121.     'easeOut', // easing method
  122.     'color'    // animation type ('run','color','motion','scroll')    
  123. );
  124.          * </code></pre> 
  125.          * </li>
  126.          * 
  127.          * <li><tt>'motion'</tt>
  128.          * <p>Animates the motion of an element to/from specific points using optional bezier
  129.          * way points during transit.</p>
  130.          * <pre><code>
  131. el.animate(
  132.     // animation control object
  133.     {
  134.         borderWidth: {to: 3, from: 0},
  135.         opacity: {to: .3, from: 1},
  136.         height: {to: 50, from: el.getHeight()},
  137.         width: {to: 300, from: el.getWidth()},
  138.         top  : {by: - 100, unit: 'px'},
  139.         points: {
  140.             to: [50, 100],  // go to this point
  141.             control: [      // optional bezier way points
  142.                 [ 600, 800],
  143.                 [-100, 200]
  144.             ]
  145.         }
  146.     },
  147.     3000,      // animation duration (milliseconds!)
  148.     null,      // callback
  149.     'easeOut', // easing method
  150.     'motion'   // animation type ('run','color','motion','scroll')    
  151. );
  152.          * </code></pre> 
  153.          * </li>
  154.          * <li><tt>'scroll'</tt>
  155.          * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
  156.          * <pre><code>
  157. el.animate(
  158.     // animation control object
  159.     {
  160.         scroll: {to: [400, 300]}
  161.     },
  162.     0.35,      // animation duration
  163.     null,      // callback
  164.     'easeOut', // easing method
  165.     'scroll'   // animation type ('run','color','motion','scroll')    
  166. );
  167.          * </code></pre> 
  168.          * </li>
  169.          * </ul></div>
  170.          * 
  171.          * </ul></div>
  172.          * 
  173.          * @param {Object} args The animation control args
  174.          * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)
  175.          * @param {Function} onComplete (optional) Function to call when animation completes
  176.          * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)
  177.          * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
  178.          * <tt>'motion'</tt>, or <tt>'scroll'</tt>
  179.          * @return {Ext.Element} this
  180.          */
  181.         animate : function(args, duration, onComplete, easing, animType){       
  182.             this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
  183.             return this;
  184.         },
  185.     
  186.         /*
  187.          * @private Internal animation call
  188.          */
  189.         anim : function(args, opt, animType, defaultDur, defaultEase, cb){
  190.             animType = animType || 'run';
  191.             opt = opt || {};
  192.             var me = this,              
  193.                 anim = Ext.lib.Anim[animType](
  194.                     me.dom, 
  195.                     args,
  196.                     (opt.duration || defaultDur) || .35,
  197.                     (opt.easing || defaultEase) || 'easeOut',
  198.                     function(){
  199.                         if(cb) cb.call(me);
  200.                         if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
  201.                     },
  202.                     me
  203.                 );
  204.             opt.anim = anim;
  205.             return anim;
  206.         },
  207.     
  208.         // private legacy anim prep
  209.         preanim : function(a, i){
  210.             return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
  211.         },
  212.         
  213.         /**
  214.          * Checks whether the element is currently visible using both visibility and display properties.         
  215.          * @return {Boolean} True if the element is currently visible, else false
  216.          */
  217.         isVisible : function() {
  218.             return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
  219.         },
  220.         
  221.         /**
  222.          * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
  223.          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
  224.          * @param {Boolean} visible Whether the element is visible
  225.          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  226.          * @return {Ext.Element} this
  227.          */
  228.          setVisible : function(visible, animate){
  229.             var me = this,
  230.                 dom = me.dom,
  231.                 isDisplay = getVisMode(this.dom) == ELDISPLAY;
  232.                 
  233.             if (!animate || !me.anim) {
  234.                 if(isDisplay){
  235.                     me.setDisplayed(visible);
  236.                 }else{
  237.                     me.fixDisplay();
  238.                     dom.style.visibility = visible ? "visible" : HIDDEN;
  239.                 }
  240.             }else{
  241.                 // closure for composites            
  242.                 if(visible){
  243.                     me.setOpacity(.01);
  244.                     me.setVisible(true);
  245.                 }
  246.                 me.anim({opacity: { to: (visible?1:0) }},
  247.                         me.preanim(arguments, 1),
  248.                         null,
  249.                         .35,
  250.                         'easeIn',
  251.                         function(){
  252.                              if(!visible){
  253.                                  dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;                     
  254.                                  Ext.fly(dom).setOpacity(1);
  255.                              }
  256.                         });
  257.             }
  258.             return me;
  259.         },
  260.     
  261.         /**
  262.          * Toggles the element's visibility or display, depending on visibility mode.
  263.          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  264.          * @return {Ext.Element} this
  265.          */
  266.         toggle : function(animate){
  267.             var me = this;
  268.             me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
  269.             return me;
  270.         },
  271.     
  272.         /**
  273.          * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
  274.          * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
  275.          * @return {Ext.Element} this
  276.          */
  277.         setDisplayed : function(value) {            
  278.             if(typeof value == "boolean"){
  279.                value = value ? getDisplay(this.dom) : NONE;
  280.             }
  281.             this.setStyle(DISPLAY, value);
  282.             return this;
  283.         },
  284.         
  285.         // private
  286.         fixDisplay : function(){
  287.             var me = this;
  288.             if(me.isStyle(DISPLAY, NONE)){
  289.                 me.setStyle(VISIBILITY, HIDDEN);
  290.                 me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
  291.                 if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
  292.                     me.setStyle(DISPLAY, "block");
  293.                 }
  294.             }
  295.         },
  296.     
  297.         /**
  298.          * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
  299.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  300.          * @return {Ext.Element} this
  301.          */
  302.         hide : function(animate){
  303.             this.setVisible(false, this.preanim(arguments, 0));
  304.             return this;
  305.         },
  306.     
  307.         /**
  308.         * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
  309.         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  310.          * @return {Ext.Element} this
  311.          */
  312.         show : function(animate){
  313.             this.setVisible(true, this.preanim(arguments, 0));
  314.             return this;
  315.         }
  316.     }
  317. }());