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

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.Shadow
  9.  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
  10.  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
  11.  * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
  12.  * @constructor
  13.  * Create a new Shadow
  14.  * @param {Object} config The config object
  15.  */
  16. Ext.Shadow = function(config){
  17.     Ext.apply(this, config);
  18.     if(typeof this.mode != "string"){
  19.         this.mode = this.defaultMode;
  20.     }
  21.     var o = this.offset, a = {h: 0};
  22.     var rad = Math.floor(this.offset/2);
  23.     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
  24.         case "drop":
  25.             a.w = 0;
  26.             a.l = a.t = o;
  27.             a.t -= 1;
  28.             if(Ext.isIE){
  29.                 a.l -= this.offset + rad;
  30.                 a.t -= this.offset + rad;
  31.                 a.w -= rad;
  32.                 a.h -= rad;
  33.                 a.t += 1;
  34.             }
  35.         break;
  36.         case "sides":
  37.             a.w = (o*2);
  38.             a.l = -o;
  39.             a.t = o-1;
  40.             if(Ext.isIE){
  41.                 a.l -= (this.offset - rad);
  42.                 a.t -= this.offset + rad;
  43.                 a.l += 1;
  44.                 a.w -= (this.offset - rad)*2;
  45.                 a.w -= rad + 1;
  46.                 a.h -= 1;
  47.             }
  48.         break;
  49.         case "frame":
  50.             a.w = a.h = (o*2);
  51.             a.l = a.t = -o;
  52.             a.t += 1;
  53.             a.h -= 2;
  54.             if(Ext.isIE){
  55.                 a.l -= (this.offset - rad);
  56.                 a.t -= (this.offset - rad);
  57.                 a.l += 1;
  58.                 a.w -= (this.offset + rad + 1);
  59.                 a.h -= (this.offset + rad);
  60.                 a.h += 1;
  61.             }
  62.         break;
  63.     };
  64.     this.adjusts = a;
  65. };
  66. Ext.Shadow.prototype = {
  67.     /**
  68.      * @cfg {String} mode
  69.      * The shadow display mode.  Supports the following options:<div class="mdetail-params"><ul>
  70.      * <li><b><tt>sides</tt></b> : Shadow displays on both sides and bottom only</li>
  71.      * <li><b><tt>frame</tt></b> : Shadow displays equally on all four sides</li>
  72.      * <li><b><tt>drop</tt></b> : Traditional bottom-right drop shadow</li>
  73.      * </ul></div>
  74.      */
  75.     /**
  76.      * @cfg {String} offset
  77.      * The number of pixels to offset the shadow from the element (defaults to <tt>4</tt>)
  78.      */
  79.     offset: 4,
  80.     // private
  81.     defaultMode: "drop",
  82.     /**
  83.      * Displays the shadow under the target element
  84.      * @param {Mixed} targetEl The id or element under which the shadow should display
  85.      */
  86.     show : function(target){
  87.         target = Ext.get(target);
  88.         if(!this.el){
  89.             this.el = Ext.Shadow.Pool.pull();
  90.             if(this.el.dom.nextSibling != target.dom){
  91.                 this.el.insertBefore(target);
  92.             }
  93.         }
  94.         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
  95.         if(Ext.isIE){
  96.             this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
  97.         }
  98.         this.realign(
  99.             target.getLeft(true),
  100.             target.getTop(true),
  101.             target.getWidth(),
  102.             target.getHeight()
  103.         );
  104.         this.el.dom.style.display = "block";
  105.     },
  106.     /**
  107.      * Returns true if the shadow is visible, else false
  108.      */
  109.     isVisible : function(){
  110.         return this.el ? true : false;  
  111.     },
  112.     /**
  113.      * Direct alignment when values are already available. Show must be called at least once before
  114.      * calling this method to ensure it is initialized.
  115.      * @param {Number} left The target element left position
  116.      * @param {Number} top The target element top position
  117.      * @param {Number} width The target element width
  118.      * @param {Number} height The target element height
  119.      */
  120.     realign : function(l, t, w, h){
  121.         if(!this.el){
  122.             return;
  123.         }
  124.         var a = this.adjusts, d = this.el.dom, s = d.style;
  125.         var iea = 0;
  126.         s.left = (l+a.l)+"px";
  127.         s.top = (t+a.t)+"px";
  128.         var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
  129.         if(s.width != sws || s.height != shs){
  130.             s.width = sws;
  131.             s.height = shs;
  132.             if(!Ext.isIE){
  133.                 var cn = d.childNodes;
  134.                 var sww = Math.max(0, (sw-12))+"px";
  135.                 cn[0].childNodes[1].style.width = sww;
  136.                 cn[1].childNodes[1].style.width = sww;
  137.                 cn[2].childNodes[1].style.width = sww;
  138.                 cn[1].style.height = Math.max(0, (sh-12))+"px";
  139.             }
  140.         }
  141.     },
  142.     /**
  143.      * Hides this shadow
  144.      */
  145.     hide : function(){
  146.         if(this.el){
  147.             this.el.dom.style.display = "none";
  148.             Ext.Shadow.Pool.push(this.el);
  149.             delete this.el;
  150.         }
  151.     },
  152.     /**
  153.      * Adjust the z-index of this shadow
  154.      * @param {Number} zindex The new z-index
  155.      */
  156.     setZIndex : function(z){
  157.         this.zIndex = z;
  158.         if(this.el){
  159.             this.el.setStyle("z-index", z);
  160.         }
  161.     }
  162. };
  163. // Private utility class that manages the internal Shadow cache
  164. Ext.Shadow.Pool = function(){
  165.     var p = [];
  166.     var markup = Ext.isIE ?
  167.                  '<div class="x-ie-shadow"></div>' :
  168.                  '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
  169.     return {
  170.         pull : function(){
  171.             var sh = p.shift();
  172.             if(!sh){
  173.                 sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
  174.                 sh.autoBoxAdjust = false;
  175.             }
  176.             return sh;
  177.         },
  178.         push : function(sh){
  179.             p.push(sh);
  180.         }
  181.     };
  182. }();