166 lines
No EOL
6.5 KiB
HTML
166 lines
No EOL
6.5 KiB
HTML
<html><head><title>Shadow.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Shadow.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.Shadow
|
|
* Simple class that can provide a shadow effect <b>for</b> any element. Note that the element MUST be absolutely positioned,
|
|
* and the shadow does not provide any shimming. This should be used only <b>in</b> simple cases -- <b>for</b> more advanced
|
|
* functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
|
|
* @constructor
|
|
* Create a <b>new</b> Shadow
|
|
* @param {Object} config The config object
|
|
*/</i>
|
|
Ext.Shadow = <b>function</b>(config){
|
|
Ext.apply(<b>this</b>, config);
|
|
<b>if</b>(typeof <b>this</b>.mode != "string"){
|
|
<b>this</b>.mode = <b>this</b>.defaultMode;
|
|
}
|
|
<b>var</b> o = <b>this</b>.offset, a = {h: 0};
|
|
<b>switch</b>(this.mode.toLowerCase()){
|
|
<b>case</b> "drop":
|
|
a.w = 0;
|
|
a.l = a.t = o;
|
|
<b>break</b>;
|
|
<b>case</b> "sides":
|
|
a.w = (o*2);
|
|
a.l = -o;
|
|
a.t = o;
|
|
<b>break</b>;
|
|
<b>case</b> "frame":
|
|
a.w = a.h = (o*2);
|
|
a.l = a.t = -o;
|
|
<b>break</b>;
|
|
};
|
|
<b>this</b>.adjusts = a;
|
|
};
|
|
|
|
Ext.Shadow.prototype = {
|
|
<i>/**
|
|
* @cfg {String} mode
|
|
* The shadow display mode. Supports the following options:
|
|
* <pre>
|
|
Option Description
|
|
------- ----------------------------------------------
|
|
sides Shadow displays on both sides and bottom only
|
|
frame Shadow displays equally on all four sides
|
|
drop Traditional bottom-right drop shadow
|
|
</pre>
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {String} offset
|
|
* The number of pixels to offset the shadow from the element (defaults to 4)
|
|
*/</i>
|
|
offset: 4,
|
|
|
|
<i>// private</i>
|
|
defaultMode: "drop",
|
|
|
|
<i>/**
|
|
* Displays the shadow under the target element
|
|
* @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
|
|
*/</i>
|
|
show : <b>function</b>(target){
|
|
target = Ext.get(target);
|
|
<b>if</b>(!<b>this</b>.el){
|
|
<b>this</b>.el = Ext.Shadow.Pool.pull();
|
|
<b>if</b>(this.el.dom.nextSibling != target.dom){
|
|
<b>this</b>.el.insertBefore(target);
|
|
}
|
|
}
|
|
<b>this</b>.el.setStyle("z-index", <b>this</b>.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
|
|
<b>if</b>(Ext.isIE){
|
|
<b>this</b>.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+<b>this</b>.offset+")";
|
|
}
|
|
<b>this</b>.realign(
|
|
target.getLeft(true),
|
|
target.getTop(true),
|
|
target.getWidth(),
|
|
target.getHeight()
|
|
);
|
|
<b>this</b>.el.dom.style.display = "block";
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> the shadow is visible, <b>else</b> false
|
|
*/</i>
|
|
isVisible : <b>function</b>(){
|
|
<b>return</b> this.el ? true : false;
|
|
},
|
|
|
|
<i>/**
|
|
* Direct alignment when values are already available. Show must be called at least once before
|
|
* calling <b>this</b> method to ensure it is initialized.
|
|
* @param {Number} left The target element left position
|
|
* @param {Number} top The target element top position
|
|
* @param {Number} width The target element width
|
|
* @param {Number} height The target element height
|
|
*/</i>
|
|
realign : <b>function</b>(l, t, w, h){
|
|
<b>if</b>(!<b>this</b>.el){
|
|
<b>return</b>;
|
|
}
|
|
<b>var</b> a = <b>this</b>.adjusts, d = <b>this</b>.el.dom, s = d.style;
|
|
<b>var</b> iea = 0;
|
|
<b>if</b>(Ext.isIE){
|
|
iea = -(<b>this</b>.offset);
|
|
}
|
|
s.left = (l+a.l+iea)+"px";
|
|
s.top = (t+a.t+iea)+"px";
|
|
<b>var</b> sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
|
|
<b>if</b>(s.width != sws || s.height != shs){
|
|
s.width = sws;
|
|
s.height = shs;
|
|
<b>if</b>(!Ext.isIE){
|
|
<b>var</b> cn = d.childNodes;
|
|
<b>var</b> sww = Math.max(0, (sw-12))+"px";
|
|
cn[0].childNodes[1].style.width = sww;
|
|
cn[1].childNodes[1].style.width = sww;
|
|
cn[2].childNodes[1].style.width = sww;
|
|
cn[1].style.height = Math.max(0, (sh-12))+"px";
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Hides <b>this</b> shadow
|
|
*/</i>
|
|
hide : <b>function</b>(){
|
|
<b>if</b>(this.el){
|
|
<b>this</b>.el.dom.style.display = "none";
|
|
Ext.Shadow.Pool.push(<b>this</b>.el);
|
|
<b>delete</b> this.el;
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Adjust the z-index of <b>this</b> shadow
|
|
* @param {Number} zindex The <b>new</b> z-index
|
|
*/</i>
|
|
setZIndex : <b>function</b>(z){
|
|
<b>this</b>.zIndex = z;
|
|
<b>if</b>(this.el){
|
|
<b>this</b>.el.setStyle("z-index", z);
|
|
}
|
|
}
|
|
};
|
|
|
|
<i>// Private utility class that manages the internal Shadow cache</i>
|
|
Ext.Shadow.Pool = <b>function</b>(){
|
|
<b>var</b> p = [];
|
|
<b>var</b> markup = Ext.isIE ?
|
|
'<div class="x-ie-shadow"></div>' :
|
|
'<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>';
|
|
<b>return</b> {
|
|
pull : <b>function</b>(){
|
|
<b>var</b> sh = p.shift();
|
|
<b>if</b>(!sh){
|
|
sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
|
|
sh.autoBoxAdjust = false;
|
|
}
|
|
<b>return</b> sh;
|
|
},
|
|
|
|
push : <b>function</b>(sh){
|
|
p.push(sh);
|
|
}
|
|
};
|
|
}();</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |