в 10:00, 26 мая 2010

2010-05-26T10:00:42Z

Admin: 1 версия

2010-05-26T07:43:28Z

1 версия

Новая страница

==Shade border with shadeborder-0.2==



<source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/**
* RUZEE.ShadedBorder 0.2
* (c) 2006 Steffen Rusitschka
*
* RUZEE.ShadedBorder is freely distributable under the terms of an MIT-style license.
* For details, see http://www.ruzee.ru/
*/
var RUZEE = window.RUZEE || {};
RUZEE.ShadedBorder = {
create: function(opts) {
var isie = /msie/i.test(navigator.userAgent) && !window.opera;
function sty(el, h) {
for(k in h) {
if (/ie_/.test(k)) {
if (isie) el.style[k.substr(3)]=h[k];
} else el.style[k]=h[k];
}
}
function crdiv(h) {
var el=document.createElement("div");
el.className = "sb-gen";
sty(el, h);
return el;
}
function op(v) {
v = v<0 ? 0 : v;
v = v>0.99999 ? 0.99999 : v;
if (isie) {
return " filter:alpha(opacity=" + (v*100) + ");";
} else {
return " opacity:" + v + ";";
}
}
var sr = opts.shadow || 0;
var r = opts.corner || 0;
var bor = 0;
var bow = opts.border || 0;
var shadow = sr != 0;
var lw = r > sr ? r : sr;
var rw = lw;
var th = lw;
var bh = lw;
if (bow > 0) {
bor = r;
r = r - bow;
}
var cx = r != 0 && shadow ? Math.round(lw/3) : 0;
var cy = cx;
var cs = Math.round(cx/2);
var iclass = r > 0 ? "sb-inner" : "sb-shadow";
var sclass = "sb-shadow";
var bclass = "sb-border";
var edges = opts.edges || "trlb";
if (!/t/i.test(edges)) th=0;
if (!/b/i.test(edges)) bh=0;
if (!/l/i.test(edges)) lw=0;
if (!/r/i.test(edges)) rw=0;
var p = { position:"absolute", left:"0", top:"0", width:lw + "px", height:th + "px",
ie_fontSize:"1px", overflow:"hidden" }; var tl = crdiv(p);
delete p.left; p.right="0"; p.width=rw + "px"; var tr = crdiv(p);
delete p.top; p.bottom="0"; p.height=bh + "px"; var br = crdiv(p);
delete p.right; p.left="0"; p.width=lw + "px"; var bl = crdiv(p);
var tw = crdiv({ position:"absolute", width:"100%", height:th + "px", ie_fontSize:"1px",
top:"0", left:"0", overflow:"hidden" });
var t = crdiv({ position:"relative", height:th + "px", ie_fontSize:"1px", marginLeft:lw + "px",
marginRight:rw + "px", overflow:"hidden" });
tw.appendChild(t);
var bw = crdiv({ position:"absolute", left:"0", bottom:"0", width:"100%", height:bh + "px",
ie_fontSize:"1px", overflow:"hidden" });

var b = crdiv({ position:"relative", height:bh + "px", ie_fontSize:"1px", marginLeft:lw + "px",
marginRight:rw + "px", overflow:"hidden" });

bw.appendChild(b);
var mw = crdiv({ position:"absolute", top:(-bh)+"px", left:"0", width:"100%", height:"100%",
overflow:"hidden", ie_fontSize:"1px" });
function corner(el,t,l) {
var w = l ? lw : rw;
var h = t ? th : bh;
var s = t ? cs : -cs;
var dsb = []; var dsi = []; var dss = [];

var xp=0; var xd=1; if (l) { xp=w-1; xd=-1; }
for (var x=0; x<w; ++x) {
var yp=0; var yd=1; if (t) { yp=h-1; yd=-1; }
for (var y=0; y<h; ++y) {
var div = "<div style="position:absolute; top:" + yp + "px; left:" + xp + "px; " +
"width:1px; height:1px; overflow:hidden;";
var xc = x - cx; var yc = y - cy - s;
var d = Math.sqrt(xc*xc+yc*yc);
var doShadow = false;
if (r > 0) {
// draw border
if (xc < 0 && yc < bor && yc >= r || yc < 0 && xc < bor && xc >= r) {
dsb.push(div + "" class="" + bclass + ""></div>");
} else
if (d<bor && d>=r-1 && xc>=0 && yc>=0) {
var dd = div;
if (d>=bor-1) {
dd += op(bor-d);
doShadow = true;
}
dsb.push(dd + "" class="" + bclass + ""></div>");
}

// draw inner
var dd = div + " z-index:2;";
if (xc < 0 && yc < r || yc < 0 && xc < r) {
dsi.push(dd + "" class="" + iclass + ""></div>");
} else
if (d<r && xc>=0 && yc>=0) {
if (d>=r-1) {
dd += op(r-d);
doShadow = true;
}
dsi.push(dd + "" class="" + iclass + ""></div>");
} else doShadow = true;
} else doShadow = true;

// draw shadow
if (sr > 0 && doShadow) {
d = Math.sqrt(x*x+y*y);
if (d<sr) {
dss.push(div + " z-index:0; " + op(1-(d/sr)) + "" class="" + sclass + ""></div>");
}
}
yp += yd;
}
xp += xd;
}
el.innerHTML = dss.concat(dsb.concat(dsi)).join("");
}

function mid(mw) {
var ds = [];
ds.push("<div style="position:relative; top:" + (th+bh) + "px;" +
" height:10000px; margin-left:" + (lw-r-cx) + "px;" +
" margin-right:" + (rw-r-cx) + "px; overflow:hidden;"" +
" class="" + iclass + ""></div>");
var dd = "<div style="position:absolute; width:1px;" +
" top:" + (th+bh) + "px; height:10000px;";
for (var x=0; x<lw-r-cx; ++x) {
ds.push(dd + " left:" + x + "px;" + op((x+1.0)/lw) +
"" class="" + sclass + ""></div>");
}
for (var x=0; x<rw-r-cx; ++x) {
ds.push(dd + " right:" + x + "px;" + op((x+1.0)/rw) +
"" class="" + sclass + ""></div>");
}
if (bow > 0) {
var su = " width:" + bow + "px;" + "" class="" + bclass + ""></div>";
ds.push(dd + " left:" + (lw-bor-cx) + "px;" + su);
ds.push(dd + " right:" + (rw-bor-cx) + "px;" + su);
}
mw.innerHTML = ds.join("");
}
function tb(el, t) {
var ds = [];
var h = t ? th : bh;
var dd = "<div style="height:1px; overflow:hidden; position:absolute;" +
" width:100%; left:0px; ";
var s = t ? cs : -cs;
for (var y=0; y<h-s-cy-r; ++y) {
ds.push(dd + (t ? "top:" : "bottom:") + y + "px;" + op((y+1)*1.0/h) +
"" class="" + sclass + ""></div>");
}
if (y >= bow) {
ds.push(dd + (t ? "top:" : "bottom:") + (y - bow) + "px;" +
" height:" + bow + "px;" class="" + bclass + ""></div>");
}
ds.push(dd + (t ? "top:" : "bottom:") + y + "px;" +
" height:" + (r+cy+s) + "px;" class="" + iclass + ""></div>");
el.innerHTML = ds.join("");
}
corner(tl, true, true); corner(tr, true, false);
corner(bl, false, true); corner(br, false, false);
mid(mw); tb(t, true); tb(b, false);
return {
render: function(el) {
if (typeof el == "string") el = document.getElementById(el);
if (el.length != undefined) {
for (var i=0; i<el.length; ++i) this.render(el[i]);
return;
}
// remove generated children
var node = el.firstChild;
while (node) {
var nextNode = node.nextSibling;
if (node.nodeType == 1 && node.className == "sb-gen")
el.removeChild(node);
node = nextNode;
}
var iel = el.firstChild;
var twc = tw.cloneNode(true);
var mwc = mw.cloneNode(true);
var bwc = bw.cloneNode(true);

el.insertBefore(tl.cloneNode(true), iel); el.insertBefore(tr.cloneNode(true), iel);
el.insertBefore(bl.cloneNode(true), iel); el.insertBefore(br.cloneNode(true), iel);
el.insertBefore(twc, iel); el.insertBefore(mwc, iel);
el.insertBefore(bwc, iel);
if (isie) {
function resize() {
twc.style.width = bwc.style.width = mwc.style.width = el.offsetWidth + "px";
mwc.firstChild.style.height = el.offsetHeight + "px";
}
el.onresize=resize;
resize();
}
}
};
}
}
// add our styles to the document
document.write(
"<style type="text/css">" +
".sb, .sbi, .sb *, .sbi * { position:relative; z-index:1; }" +
"* html .sb, * html .sbi { height:1%; }" +
".sbi { display:inline-block; }" +
".sb-inner { background:#ddd; }" +
".sb-shadow { background:#000; }" +
".sb-border { background:#bbb; }" +
"</style>"
);
</script>
<style type="text/css">

html { font-family:sans-serif; background:url(back.jpg); }
html, body { margin:0; padding:0; }
p { margin:5px 0; }
.headfoot { background:#444; text-align:right; color:#ddd;
padding:10px; margin:0; }
.headfoot h1 { font-size:1.3em; padding:0; margin:0; }
.headfoot a { color:#fff; }
/* For the first shadowed border */
#shadowed-border { padding:20px; width:80%; margin:20px auto; }
#shadowed-border .sb-inner { background:#ccc; }
#shadowed-border .sb-border { background:#fff; }
/* The tabs */
#tabs { overflow:hidden; padding:0; margin:20px auto 0 auto; width:400px; }
* html #tabs { height:1%; }
#tabs .tab { float:left; color:#000; list-style:none; padding:0; margin-left:5px; }
* html #tabs .tab { display:inline-block; }
#tabs .tab a { display:block; float:left; text-decoration:none; padding:5px; color:#000; }
#tabs .tab .sb-inner { background:#ccc; }
#tabs .tab:hover .sb-inner { background:#eee; }
#tabs .tab .sb-border { background:#fff; }
#tabs-content { background:#ccc; width:380px; margin:-1px auto 20px auto; padding:10px;
border:1px solid #fff; }
/* The links */
#links { color:#4c2; padding:20px; margin:20px; width:400px; margin:0 auto; }
#links .sb-inner { background:#444; }
#links a { color:#9f2; }
#links a .sb-shadow { background:transparent; }
#links a:hover .sb-shadow { background:#777; }
/* Partial stuff */
#partial { overflow:hidden; width:500px; margin:20px auto; }
* html .partial { height:1%; }
.partial-class { float:left; width:30px; height:30px; padding:10px;
margin-left:10px; color:#4c2; }
.partial-class .sb-inner { background:#444; }
.partial-class .sb-border { background:#fff; }
#change-border { color:#fff; padding:20px; margin:20px auto; width:300px; }
.change-border0 .sb-inner { background:#444; }
.change-border1 .sb-inner { background:#888; }

</style>
<script language="javascript" type="text/javascript">
var t = new Date().getTime();
var shadowedBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });
var tabBorder = RUZEE.ShadedBorder.create({ corner:8, edges:"tlr", border:1 });
var linksBorder = RUZEE.ShadedBorder.create({ corner:10 });
var linkBorder = RUZEE.ShadedBorder.create({ shadow:4 });
var changeBorders = [
RUZEE.ShadedBorder.create({ corner:20 }),
RUZEE.ShadedBorder.create({ corner:10, shadow:20 })
];

var partialIDs = ["tl", "tr", "bl", "br", "tlr", "blr", "tbl", "tbr"];
var partialBorders = {};
for (var i=0; i<partialIDs.length; ++i) {
partialBorders[partialIDs[i]] = RUZEE.ShadedBorder.create({
corner:10, border:2, edges:partialIDs[i] });
}
var calcTime = "Calculation time: " + ((new Date().getTime() - t) / 1000.0) + "s";
</script>
</head>
<body>
<div class="headfoot">
<h1><a href="http://www.ruzee.ru/blog/shadedborder">
RUZEE.ShadedBorder</a> Examples</h1>
</div>
<div id="shadowed-border" class="sb">
<script type="text/javascript">
document.write("<div onload="alert(\"ok\");"></div>");
</script>
<p>This shadowed border has a width of 80% and hence scales with the size of
your browser window. Try it out ;-) And now some Lorem ipsum:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<ul id="tabs">
<li class="tab sb"><a href="#">Tab 1</a></li>
<li class="tab sb"><a href="#">Tab 2</a></li>
<li class="tab sb"><a href="#">And a third tab</a></li>
</ul>
<div id="tabs-content">
Tabs that change the color when hovered over (hover works on all supported browser
but Internet Explorer 6.0).
</div>
<div id="links" class="sb">
<p>
Links that "glow" when hovered over - this is alpha code...
It doesn"t work in IE6 and Opera and looks strange in Safari.
This is some text with some <a href="#" class="sbi"><span>links</span></a>.
Don"t get bored by the content but hover over the links ...
This is some text with some <a href="#" class="sbi"><span>links</span></a>.
Don"t get bored by the content but hover over the links ...
</p>
</div>

<div id="partial">
<div class="partial-class sb" id="tl"><div>tl</div></div>
<div class="partial-class sb" id="tr"><div>tr</div></div>
<div class="partial-class sb" id="bl"><div>bl</div></div>
<div class="partial-class sb" id="br"><div>br</div></div>
<div class="partial-class sb" id="tlr"><div>tlr</div></div>
<div class="partial-class sb" id="blr"><div>blr</div></div>
<div class="partial-class sb" id="tbl"><div>tbl</div></div>
<div class="partial-class sb" id="tbr"><div>tbr</div></div>
</div>
<div id="change-border" class="sb">
<button onclick="changeBorder()">Change this border</button>
<div>Some Text</div>
Text that gets hidden - you can do nothing about it...
<div>And some more text</div>
</div>
<div class="headfoot">
<div id="calcTime"></div>
<div id="renderTime"></div>
</div>

<script language="javascript" type="text/javascript">
if (!window.$) {
window.$ = function(id) { return document.getElementById(id); }
}

var currentChangeBorder=0;

function changeBorder() {
currentChangeBorder = (currentChangeBorder + 1) % changeBorders.length;
$("change-border").className = "sb change-border" + currentChangeBorder;
changeBorders[currentChangeBorder].render("change-border");
}

var t = new Date().getTime();
shadowedBorder.render("shadowed-border");

var tabs = $("tabs").getElementsByTagName("li");
for (var i=0; i < tabs.length; ++i) {
tabBorder.render(tabs[i]);
}
linksBorder.render("links");
linkBorder.render($("links").getElementsByTagName("a"));
for (id in partialBorders) {
partialBorders[id].render(id);
}
changeBorder();

$("calcTime").innerHTML = calcTime;
$("renderTime").innerHTML = "Render time: " + ((new Date().getTime() - t) / 1000.0) + "s";
</script>
</body>
</html>

</source>

← Предыдущая	Версия 10:00, 26 мая 2010
(нет различий)

JavaScript DHTML/GUI Components/Border - История изменений

в 10:00, 26 мая 2010

Admin: 1 версия