/javascripts/lib/docs/source/Element.fx.html

https://bitbucket.org/ksokmesa/sina-asian · HTML · 368 lines · 352 code · 16 blank · 0 comment · 0 complexity · df4833b27f8609c29287ebccc8eb3964 MD5 · raw file 

    

  1. <html>
    2. 

  2. <head>
    3. 

  3.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    4. 

  4.   <title>The source code</title>
    5. 

  5.     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    6. 

  6.     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
    7. 

  7. </head>
    8. 

  8. <body  onload="prettyPrint();">
    9. 

  9.     <pre class="prettyprint lang-js">/*!
    10. 

  10.  * Ext JS Library 3.2.1
    11. 

  11.  * Copyright(c) 2006-2010 Ext JS, Inc.
    12. 

  12.  * licensing@extjs.com
    13. 

  13.  * http://www.extjs.com/license
    14. 

  14.  */
    15. 

  15. /**
    16. 

  16.  * @class Ext.Element
    17. 

  17.  */
    18. 

  18. <div id="prop-Ext.Element-VISIBILITY"></div>/**
    19. 

  19.  * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
    20. 

  20.  * @static
    21. 

  21.  * @type Number
    22. 

  22.  */
    23. 

  23. Ext.Element.VISIBILITY = 1;
    24. 

  24. <div id="prop-Ext.Element-DISPLAY"></div>/**
    25. 

  25.  * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
    26. 

  26.  * @static
    27. 

  27.  * @type Number
    28. 

  28.  */
    29. 

  29. Ext.Element.DISPLAY = 2;
    30. 

  30. 

  31. Ext.Element.addMethods(function(){
    32. 

  32.     var VISIBILITY = "visibility",
    33. 

  33.         DISPLAY = "display",
    34. 

  34.         HIDDEN = "hidden",
    35. 

  35.         OFFSETS = "offsets",
    36. 

  36.         NONE = "none",
    37. 

  37.         ORIGINALDISPLAY = 'originalDisplay',
    38. 

  38.         VISMODE = 'visibilityMode',
    39. 

  39.         ELDISPLAY = Ext.Element.DISPLAY,
    40. 

  40.         data = Ext.Element.data,
    41. 

  41.         getDisplay = function(dom){
    42. 

  42.             var d = data(dom, ORIGINALDISPLAY);
    43. 

  43.             if(d === undefined){
    44. 

  44.                 data(dom, ORIGINALDISPLAY, d = '');
    45. 

  45.             }
    46. 

  46.             return d;
    47. 

  47.         },
    48. 

  48.         getVisMode = function(dom){
    49. 

  49.             var m = data(dom, VISMODE);
    50. 

  50.             if(m === undefined){
    51. 

  51.                 data(dom, VISMODE, m = 1);
    52. 

  52.             }
    53. 

  53.             return m;
    54. 

  54.         };
    55. 

  55. 

  56.     return {
    57. 

  57.         <div id="prop-Ext.Element-originalDisplay"></div>/**
    58. 

  58.          * The element's default display mode  (defaults to "")
    59. 

  59.          * @type String
    60. 

  60.          */
    61. 

  61.         originalDisplay : "",
    62. 

  62.         visibilityMode : 1,
    63. 

  63. 

  64.         <div id="method-Ext.Element-setVisibilityMode"></div>/**
    65. 

  65.          * Sets the element's visibility mode. When setVisible() is called it
    66. 

  66.          * will use this to determine whether to set the visibility or the display property.
    67. 

  67.          * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
    68. 

  68.          * @return {Ext.Element} this
    69. 

  69.          */
    70. 

  70.         setVisibilityMode : function(visMode){
    71. 

  71.             data(this.dom, VISMODE, visMode);
    72. 

  72.             return this;
    73. 

  73.         },
    74. 

  74. 

  75.         <div id="method-Ext.Element-animate"></div>/**
    76. 

  76.          * Perform custom animation on this element.
    77. 

  77.          * <div><ul class="mdetail-params">
    78. 

  78.          * <li><u>Animation Properties</u></li>
    79. 

  79.          *
    80. 

  80.          * <p>The Animation Control Object enables gradual transitions for any member of an
    81. 

  81.          * element's style object that takes a numeric value including but not limited to
    82. 

  82.          * these properties:</p><div><ul class="mdetail-params">
    83. 

  83.          * <li><tt>bottom, top, left, right</tt></li>
    84. 

  84.          * <li><tt>height, width</tt></li>
    85. 

  85.          * <li><tt>margin, padding</tt></li>
    86. 

  86.          * <li><tt>borderWidth</tt></li>
    87. 

  87.          * <li><tt>opacity</tt></li>
    88. 

  88.          * <li><tt>fontSize</tt></li>
    89. 

  89.          * <li><tt>lineHeight</tt></li>
    90. 

  90.          * </ul></div>
    91. 

  91.          *
    92. 

  92.          *
    93. 

  93.          * <li><u>Animation Property Attributes</u></li>
    94. 

  94.          *
    95. 

  95.          * <p>Each Animation Property is a config object with optional properties:</p>
    96. 

  96.          * <div><ul class="mdetail-params">
    97. 

  97.          * <li><tt>by</tt>*  : relative change - start at current value, change by this value</li>
    98. 

  98.          * <li><tt>from</tt> : ignore current value, start from this value</li>
    99. 

  99.          * <li><tt>to</tt>*  : start at current value, go to this value</li>
    100. 

  100.          * <li><tt>unit</tt> : any allowable unit specification</li>
    101. 

  101.          * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
    102. 

  102.          * </ul></div>
    103. 

  103.          *
    104. 

  104.          * <li><u>Animation Types</u></li>
    105. 

  105.          *
    106. 

  106.          * <p>The supported animation types:</p><div><ul class="mdetail-params">
    107. 

  107.          * <li><tt>'run'</tt> : Default
    108. 

  108.          * <pre><code>
    109. 

  109. var el = Ext.get('complexEl');
    110. 

  110. el.animate(
    111. 

  111.     // animation control object
    112. 

  112.     {
    113. 

  113.         borderWidth: {to: 3, from: 0},
    114. 

  114.         opacity: {to: .3, from: 1},
    115. 

  115.         height: {to: 50, from: el.getHeight()},
    116. 

  116.         width: {to: 300, from: el.getWidth()},
    117. 

  117.         top  : {by: - 100, unit: 'px'},
    118. 

  118.     },
    119. 

  119.     0.35,      // animation duration
    120. 

  120.     null,      // callback
    121. 

  121.     'easeOut', // easing method
    122. 

  122.     'run'      // animation type ('run','color','motion','scroll')
    123. 

  123. );
    124. 

  124.          * </code></pre>
    125. 

  125.          * </li>
    126. 

  126.          * <li><tt>'color'</tt>
    127. 

  127.          * <p>Animates transition of background, text, or border colors.</p>
    128. 

  128.          * <pre><code>
    129. 

  129. el.animate(
    130. 

  130.     // animation control object
    131. 

  131.     {
    132. 

  132.         color: { to: '#06e' },
    133. 

  133.         backgroundColor: { to: '#e06' }
    134. 

  134.     },
    135. 

  135.     0.35,      // animation duration
    136. 

  136.     null,      // callback
    137. 

  137.     'easeOut', // easing method
    138. 

  138.     'color'    // animation type ('run','color','motion','scroll')
    139. 

  139. );
    140. 

  140.          * </code></pre>
    141. 

  141.          * </li>
    142. 

  142.          *
    143. 

  143.          * <li><tt>'motion'</tt>
    144. 

  144.          * <p>Animates the motion of an element to/from specific points using optional bezier
    145. 

  145.          * way points during transit.</p>
    146. 

  146.          * <pre><code>
    147. 

  147. el.animate(
    148. 

  148.     // animation control object
    149. 

  149.     {
    150. 

  150.         borderWidth: {to: 3, from: 0},
    151. 

  151.         opacity: {to: .3, from: 1},
    152. 

  152.         height: {to: 50, from: el.getHeight()},
    153. 

  153.         width: {to: 300, from: el.getWidth()},
    154. 

  154.         top  : {by: - 100, unit: 'px'},
    155. 

  155.         points: {
    156. 

  156.             to: [50, 100],  // go to this point
    157. 

  157.             control: [      // optional bezier way points
    158. 

  158.                 [ 600, 800],
    159. 

  159.                 [-100, 200]
    160. 

  160.             ]
    161. 

  161.         }
    162. 

  162.     },
    163. 

  163.     3000,      // animation duration (milliseconds!)
    164. 

  164.     null,      // callback
    165. 

  165.     'easeOut', // easing method
    166. 

  166.     'motion'   // animation type ('run','color','motion','scroll')
    167. 

  167. );
    168. 

  168.          * </code></pre>
    169. 

  169.          * </li>
    170. 

  170.          * <li><tt>'scroll'</tt>
    171. 

  171.          * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
    172. 

  172.          * <pre><code>
    173. 

  173. el.animate(
    174. 

  174.     // animation control object
    175. 

  175.     {
    176. 

  176.         scroll: {to: [400, 300]}
    177. 

  177.     },
    178. 

  178.     0.35,      // animation duration
    179. 

  179.     null,      // callback
    180. 

  180.     'easeOut', // easing method
    181. 

  181.     'scroll'   // animation type ('run','color','motion','scroll')
    182. 

  182. );
    183. 

  183.          * </code></pre>
    184. 

  184.          * </li>
    185. 

  185.          * </ul></div>
    186. 

  186.          *
    187. 

  187.          * </ul></div>
    188. 

  188.          *
    189. 

  189.          * @param {Object} args The animation control args
    190. 

  190.          * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)
    191. 

  191.          * @param {Function} onComplete (optional) Function to call when animation completes
    192. 

  192.          * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)
    193. 

  193.          * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
    194. 

  194.          * <tt>'motion'</tt>, or <tt>'scroll'</tt>
    195. 

  195.          * @return {Ext.Element} this
    196. 

  196.          */
    197. 

  197.         animate : function(args, duration, onComplete, easing, animType){
    198. 

  198.             this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
    199. 

  199.             return this;
    200. 

  200.         },
    201. 

  201. 

  202.         /*
    203. 

  203.          * @private Internal animation call
    204. 

  204.          */
    205. 

  205.         anim : function(args, opt, animType, defaultDur, defaultEase, cb){
    206. 

  206.             animType = animType || 'run';
    207. 

  207.             opt = opt || {};
    208. 

  208.             var me = this,
    209. 

  209.                 anim = Ext.lib.Anim[animType](
    210. 

  210.                     me.dom,
    211. 

  211.                     args,
    212. 

  212.                     (opt.duration || defaultDur) || .35,
    213. 

  213.                     (opt.easing || defaultEase) || 'easeOut',
    214. 

  214.                     function(){
    215. 

  215.                         if(cb) cb.call(me);
    216. 

  216.                         if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
    217. 

  217.                     },
    218. 

  218.                     me
    219. 

  219.                 );
    220. 

  220.             opt.anim = anim;
    221. 

  221.             return anim;
    222. 

  222.         },
    223. 

  223. 

  224.         // private legacy anim prep
    225. 

  225.         preanim : function(a, i){
    226. 

  226.             return !a[i] ? false : (typeof a[i] == 'object' ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
    227. 

  227.         },
    228. 

  228. 

  229.         <div id="method-Ext.Element-isVisible"></div>/**
    230. 

  230.          * Checks whether the element is currently visible using both visibility and display properties.
    231. 

  231.          * @return {Boolean} True if the element is currently visible, else false
    232. 

  232.          */
    233. 

  233.         isVisible : function() {
    234. 

  234.             return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
    235. 

  235.         },
    236. 

  236. 

  237.         <div id="method-Ext.Element-setVisible"></div>/**
    238. 

  238.          * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
    239. 

  239.          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
    240. 

  240.          * @param {Boolean} visible Whether the element is visible
    241. 

  241.          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
    242. 

  242.          * @return {Ext.Element} this
    243. 

  243.          */
    244. 

  244.          setVisible : function(visible, animate){
    245. 

  245.             var me = this, isDisplay, isVisible, isOffsets,
    246. 

  246.                 dom = me.dom;
    247. 

  247. 

  248.             // hideMode string override
    249. 

  249.             if (typeof animate == 'string'){
    250. 

  250.                 isDisplay = animate == DISPLAY;
    251. 

  251.                 isVisible = animate == VISIBILITY;
    252. 

  252.                 isOffsets = animate == OFFSETS;
    253. 

  253.                 animate = false;
    254. 

  254.             } else {
    255. 

  255.                 isDisplay = getVisMode(this.dom) == ELDISPLAY;
    256. 

  256.                 isVisible = !isDisplay;
    257. 

  257.             }
    258. 

  258. 

  259.             if (!animate || !me.anim) {
    260. 

  260.                 if (isDisplay){
    261. 

  261.                     me.setDisplayed(visible);
    262. 

  262.                 } else if (isOffsets){
    263. 

  263.                     if (!visible){
    264. 

  264.                         me.hideModeStyles = {
    265. 

  265.                             position: me.getStyle('position'),
    266. 

  266.                             top: me.getStyle('top'),
    267. 

  267.                             left: me.getStyle('left')
    268. 

  268.                         };
    269. 

  269. 

  270.                         me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
    271. 

  271.                     } else {
    272. 

  272.                         me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
    273. 

  273.                     }
    274. 

  274.                 }else{
    275. 

  275.                     me.fixDisplay();
    276. 

  276.                     dom.style.visibility = visible ? "visible" : HIDDEN;
    277. 

  277.                 }
    278. 

  278.             }else{
    279. 

  279.                 // closure for composites
    280. 

  280.                 if (visible){
    281. 

  281.                     me.setOpacity(.01);
    282. 

  282.                     me.setVisible(true);
    283. 

  283.                 }
    284. 

  284.                 me.anim({opacity: { to: (visible?1:0) }},
    285. 

  285.                         me.preanim(arguments, 1),
    286. 

  286.                         null,
    287. 

  287.                         .35,
    288. 

  288.                         'easeIn',
    289. 

  289.                         function(){
    290. 

  290.                              if(!visible){
    291. 

  291.                                  dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;
    292. 

  292.                                  Ext.fly(dom).setOpacity(1);
    293. 

  293.                              }
    294. 

  294.                         });
    295. 

  295.             }
    296. 

  296.             return me;
    297. 

  297.         },
    298. 

  298. 

  299.         <div id="method-Ext.Element-toggle"></div>/**
    300. 

  300.          * Toggles the element's visibility or display, depending on visibility mode.
    301. 

  301.          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
    302. 

  302.          * @return {Ext.Element} this
    303. 

  303.          */
    304. 

  304.         toggle : function(animate){
    305. 

  305.             var me = this;
    306. 

  306.             me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
    307. 

  307.             return me;
    308. 

  308.         },
    309. 

  309. 

  310.         <div id="method-Ext.Element-setDisplayed"></div>/**
    311. 

  311.          * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
    312. 

  312.          * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
    313. 

  313.          * @return {Ext.Element} this
    314. 

  314.          */
    315. 

  315.         setDisplayed : function(value) {
    316. 

  316.             if(typeof value == "boolean"){
    317. 

  317.                value = value ? getDisplay(this.dom) : NONE;
    318. 

  318.             }
    319. 

  319.             this.setStyle(DISPLAY, value);
    320. 

  320.             return this;
    321. 

  321.         },
    322. 

  322. 

  323.         // private
    324. 

  324.         fixDisplay : function(){
    325. 

  325.             var me = this;
    326. 

  326.             if(me.isStyle(DISPLAY, NONE)){
    327. 

  327.                 me.setStyle(VISIBILITY, HIDDEN);
    328. 

  328.                 me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
    329. 

  329.                 if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
    330. 

  330.                     me.setStyle(DISPLAY, "block");
    331. 

  331.                 }
    332. 

  332.             }
    333. 

  333.         },
    334. 

  334. 

  335.         <div id="method-Ext.Element-hide"></div>/**
    336. 

  336.          * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
    337. 

  337.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
    338. 

  338.          * @return {Ext.Element} this
    339. 

  339.          */
    340. 

  340.         hide : function(animate){
    341. 

  341.             // hideMode override
    342. 

  342.             if (typeof animate == 'string'){
    343. 

  343.                 this.setVisible(false, animate);
    344. 

  344.                 return this;
    345. 

  345.             }
    346. 

  346.             this.setVisible(false, this.preanim(arguments, 0));
    347. 

  347.             return this;
    348. 

  348.         },
    349. 

  349. 

  350.         <div id="method-Ext.Element-show"></div>/**
    351. 

  351.         * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
    352. 

  352.         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
    353. 

  353.          * @return {Ext.Element} this
    354. 

  354.          */
    355. 

  355.         show : function(animate){
    356. 

  356.             // hideMode override
    357. 

  357.             if (typeof animate == 'string'){
    358. 

  358.                 this.setVisible(true, animate);
    359. 

  359.                 return this;
    360. 

  360.             }
    361. 

  361.             this.setVisible(true, this.preanim(arguments, 0));
    362. 

  362.             return this;
    363. 

  363.         }
    364. 

  364.     };
    365. 

  365. }());
    366. 

  366. </pre>    
    367. 

  367. </body>
    368. 

  368. </html>
    369.