Здeсь опубликую несколько своих опытов на основе
соответствующей статьи.
Сам попрактикуюсь в освоении новых стандартов, да идеями поделюсь…
(
Пока есть время, здоровье, интерес…)
<head>
<link rel=icon type='image/ico' href='http://javascript.ru/favicon.ico' />
<script type='text/javascript'>
(function() {
var gue = Object.create(HTMLTableElement.prototype); // Graphic Unical Element
gue.createdCallback = function() {
var cpt = document.createElement("tr");
var pic = cpt.insertCell(0);
var title = cpt.insertCell(1);
var buttons = cpt.insertCell(2);
this.style.width = "100%";
this.style.position = "fixed";
this.style.top = "0px";
cpt.style.backgroundColor = "ActiveCaption";
cpt.style.color = "CaptionText";
cpt.style.width = "100%";
pic.style.width = "16px";
title.style.width = "100%";
buttons.style.whiteSpace = "nowrap";
var picture = new Image();
this.minimizer = document.createElement("button");
this.maximizer = document.createElement("button");
this.optimizer = document.createElement("button");
this.minimizer.style.fontFamily = "Marlett";
this.maximizer.style.fontFamily = "Marlett";
this.optimizer.style.fontFamily = "Marlett";
try { picture.src = document.querySelector("link[rel*='icon']").href; } catch(e) {}
picture.style.width = "16px";
picture.style.height = "16px";
this.minimizer.textContent = "0";
this.maximizer.textContent = "2";
this.optimizer.textContent = "r";
pic.appendChild(picture);
title.textContent = this.innerHTML;
buttons.appendChild(this.minimizer);
buttons.appendChild(this.maximizer);
buttons.appendChild(this.optimizer);
this.textContent = "";
this.appendChild(cpt);
};
document.registerElement("gui-caption", {
prototype :gue
});
})();
</script>
<style>
body
{
padding :0px 0px 0px 0px;
margin :0px 0px 0px 0px;
background-color:ThreeDFace;
color :WindowText;
overflow :auto;
}
</style>
</head>
<body>
<gui-caption>CAPTIONISSIMO</gui-caption>
</body>
P.S.: Чуток разомнусь…
Авось кому-то будет интересно и полезно…
