Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Custom Tags - тесты (https://javascript.ru/forum/project/73605-custom-tags-testy.html)

Paguo-86PK 28.04.2018 03:48

Custom Tags - тесты
 
Зд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.: Чуток разомнусь…:dance:
Авось кому-то будет интересно и полезно…:thanks:


Часовой пояс GMT +3, время: 04:29.